adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 16:44:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: input, input number, layout, loading bar, menu, message, modal

Browse source
This commit is contained in:
luoxiao 2023-11-15 14:21:18 +08:00
parent 9c115720b9
commit f8aabfb822
8 changed files with 374 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demo/src/pages/button/mod.rs
View file

@ -193,7 +193,7 @@ pub fn ButtonPage() -> impl IntoView {
} }
#[component] #[component]
pub fn LoadingButton() -> impl IntoView { fn LoadingButton() -> impl IntoView {
let loading = create_rw_signal(false); let loading = create_rw_signal(false);
let on_click = move |_| { let on_click = move |_| {
loading.set(true); loading.set(true);

68
demo/src/pages/input/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode}; use crate::components::{Demo, DemoCode};
use leptos::*; use leptos::*;
use thaw::*;
use prisms::highlight_str; use prisms::highlight_str;
use thaw::*;
#[component] #[component]
pub fn InputPage() -> impl IntoView { pub fn InputPage() -> impl IntoView {
@ -43,6 +43,72 @@ pub fn InputPage() -> impl IntoView {
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Input Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"RwSignal<String>"</td>
<td>r#""""#</td>
<td>"Set the input value"</td>
</tr>
<tr>
<td>"variant"</td>
<td>"MaybeSignal<InputVariant>"</td>
<td>"InputVariant::Text"</td>
<td>"Button's variant."</td>
</tr>
<tr>
<td>"placeholder"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Placeholder of input."</td>
</tr>
<tr>
<td>"allow_value"</td>
<td>"Option<Callback<String, bool>>"</td>
<td>"None"</td>
<td>"Check the incoming value, if it returns false, input will not be accepted."</td>
</tr>
<tr>
<td>"on_focus"</td>
<td>"Option<Callback<ev::FocusEvent>>"</td>
<td>"None"</td>
<td>"Callback triggered when the input is focussed on."</td>
</tr>
<tr>
<td>"on_blur"</td>
<td>"Option<Callback<ev::FocusEvent>>"</td>
<td>"None"</td>
<td>"Callback triggered when the input is blurred."</td>
</tr>
</tbody>
</Table>
<h3>"Input Slots"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"InputSuffix"</td>
<td>"None"</td>
<td>"Input content."</td>
</tr>
</tbody>
</Table>
</div> </div>
} }
} }

37
demo/src/pages/input_number/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode}; use crate::components::{Demo, DemoCode};
use leptos::*; use leptos::*;
use thaw::*;
use prisms::highlight_str; use prisms::highlight_str;
use thaw::*;
#[component] #[component]
pub fn InputNumberPage() -> impl IntoView { pub fn InputNumberPage() -> impl IntoView {
@ -36,6 +36,41 @@ pub fn InputNumberPage() -> impl IntoView {
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"InputNumber Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"RwSignal<T>"</td>
<td>"T::default()"</td>
<td>"Set the input value."</td>
</tr>
<tr>
<td>"placeholder"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Placeholder of input number."</td>
</tr>
<tr>
<td>"step"</td>
<td>"MaybeSignal<T>"</td>
<td></td>
<td>"The number which the current value is increased or decreased on key or button press."</td>
</tr>
</tbody>
</Table>
<h3>"T impl"</h3>
<p>
"T: Add<Output = T> + Sub<Output = T> + Default + Clone + FromStr + ToString + 'static"
</p>
</div> </div>
} }
} }

99
demo/src/pages/layout/mod.rs
View file

@ -57,6 +57,105 @@ pub fn LayoutPage() -> impl IntoView {
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Layout Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"style"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Layout's style."</td>
</tr>
<tr>
<td>"position"</td>
<td>"LayoutPosition"</td>
<td>"LayoutPosition::Static"</td>
<td>"static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."</td>
</tr>
<tr>
<td>"has_sider"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether the component has sider inside. If so it must be true."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Layout's content."</td>
</tr>
</tbody>
</Table>
<h3>"Layout Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"style"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Layout's style."</td>
</tr>
<tr>
<td>"position"</td>
<td>"LayoutPosition"</td>
<td>"LayoutPosition::Static"</td>
<td>"static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."</td>
</tr>
<tr>
<td>"has_sider"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether the component has sider inside. If so it must be true."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Layout's content."</td>
</tr>
</tbody>
</Table>
<h3>"LayoutHeader, LayoutSider Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"style"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"LayoutHeader's style."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"LayoutHeader's content."</td>
</tr>
</tbody>
</Table>
</div> </div>
} }
} }

27
demo/src/pages/loading_bar/mod.rs
View file

@ -57,6 +57,33 @@ pub fn LoadingBarPage() -> impl IntoView {
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"LoadingBar Injection Methods"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"start"</td>
<th>"fn(&self)"</th>
<td>"Callback function for loading bar to start loading."</td>
</tr>
<tr>
<td>"finish"</td>
<th>"fn(&self)"</th>
<td>"The callback function when the loading bar finishes loading."</td>
</tr>
<tr>
<td>"error"</td>
<th>"fn(&self)"</th>
<td>"Callback function for loading bar error."</td>
</tr>
</tbody>
</Table>
</div> </div>
} }
} }

77
demo/src/pages/menu/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode}; use crate::components::{Demo, DemoCode};
use leptos::*; use leptos::*;
use thaw::*;
use prisms::highlight_str; use prisms::highlight_str;
use thaw::*;
#[component] #[component]
pub fn MenuPage() -> impl IntoView { pub fn MenuPage() -> impl IntoView {
@ -32,6 +32,81 @@ pub fn MenuPage() -> impl IntoView {
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Menu Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"The selected item key of the menu."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Menu's content."</td>
</tr>
</tbody>
</Table>
<h3>"MenuGroup Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"label"</td>
<td>"String"</td>
<td></td>
<td>"The label of the menu group."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"MenuGroup's content."</td>
</tr>
</tbody>
</Table>
<h3>"MenuItem Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"label"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"The label of the menu item."</td>
</tr>
<tr>
<td>"key"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"The indentifier of the menu item."</td>
</tr>
</tbody>
</Table>
</div> </div>
} }
} }

19
demo/src/pages/message/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode}; use crate::components::{Demo, DemoCode};
use leptos::*; use leptos::*;
use thaw::*;
use prisms::highlight_str; use prisms::highlight_str;
use thaw::*;
#[component] #[component]
pub fn MessagePage() -> impl IntoView { pub fn MessagePage() -> impl IntoView {
@ -72,6 +72,23 @@ pub fn MessagePage() -> impl IntoView {
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"MessageProvider Injection Methods"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"create"</td>
<td>"fn(&self, content: String, variant: MessageVariant, options: MessageOptions)"</td>
<td>"The label of the menu item."</td>
</tr>
</tbody>
</Table>
</div> </div>
} }
} }

51
demo/src/pages/modal/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode}; use crate::components::{Demo, DemoCode};
use leptos::*; use leptos::*;
use thaw::*;
use prisms::highlight_str; use prisms::highlight_str;
use thaw::*;
#[component] #[component]
pub fn ModalPage() -> impl IntoView { pub fn ModalPage() -> impl IntoView {
@ -34,6 +34,55 @@ pub fn ModalPage() -> impl IntoView {
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Modal Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"show"</td>
<td>"MaybeSignal<bool>"</td>
<td></td>
<td>"Whether to show modal."</td>
</tr>
<tr>
<td>"title"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Modal title."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Modal's content."</td>
</tr>
</tbody>
</Table>
<h3>"Modal Slots"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"ModalFooter"</td>
<td>"None"</td>
<td>"Footer content."</td>
</tr>
</tbody>
</Table>
</div> </div>
} }
} }