mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
demo: refactor docs (#66)
This commit is contained in:
parent
789ea6772a
commit
e929ade762
10 changed files with 228 additions and 610 deletions
|
@ -43,7 +43,6 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
|
||||||
<Route path="/components" view=ComponentsPage>
|
<Route path="/components" view=ComponentsPage>
|
||||||
<Route path="/tabbar" view=TabbarPage/>
|
<Route path="/tabbar" view=TabbarPage/>
|
||||||
<Route path="/nav-bar" view=NavBarPage/>
|
<Route path="/nav-bar" view=NavBarPage/>
|
||||||
<Route path="/input" view=InputPage/>
|
|
||||||
<Route path="/image" view=ImagePage/>
|
<Route path="/image" view=ImagePage/>
|
||||||
<Route path="/button" view=ButtonPage/>
|
<Route path="/button" view=ButtonPage/>
|
||||||
<Route path="/checkbox" view=CheckboxPage/>
|
<Route path="/checkbox" view=CheckboxPage/>
|
||||||
|
@ -56,12 +55,13 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
|
||||||
<Route path="/badge" view=BadgePage/>
|
<Route path="/badge" view=BadgePage/>
|
||||||
<Route path="/card" view=CardPage/>
|
<Route path="/card" view=CardPage/>
|
||||||
<Route path="/divider" view=DividerPage/>
|
<Route path="/divider" view=DividerPage/>
|
||||||
<Route path="/input-number" view=InputNumberPage/>
|
|
||||||
<Route path="/icon" view=IconPage/>
|
<Route path="/icon" view=IconPage/>
|
||||||
<Route path="/breadcrumb" view=BreadcrumbPage/>
|
<Route path="/breadcrumb" view=BreadcrumbPage/>
|
||||||
<Route path="/layout" view=LayoutPage/>
|
|
||||||
<Route path="/calendar" view=CalendarPage/>
|
<Route path="/calendar" view=CalendarPage/>
|
||||||
<Route path="/date-picker" view=DatePickerPage/>
|
<Route path="/date-picker" view=DatePickerPage/>
|
||||||
|
<Route path="/input" view=InputMdPage/>
|
||||||
|
<Route path="/input-number" view=InputNumberMdPage/>
|
||||||
|
<Route path="/layout" view=LayoutMdPage/>
|
||||||
<Route path="/loading-bar" view=LoadingBarMdPage/>
|
<Route path="/loading-bar" view=LoadingBarMdPage/>
|
||||||
<Route path="/menu" view=MenuMdPage/>
|
<Route path="/menu" view=MenuMdPage/>
|
||||||
<Route path="/message" view=MessageMdPage/>
|
<Route path="/message" view=MessageMdPage/>
|
||||||
|
|
|
@ -1,300 +0,0 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
|
||||||
use leptos::*;
|
|
||||||
use prisms::highlight_str;
|
|
||||||
use thaw::*;
|
|
||||||
|
|
||||||
#[component]
|
|
||||||
pub fn InputPage() -> impl IntoView {
|
|
||||||
let value = create_rw_signal(String::from("o"));
|
|
||||||
let input_ref = create_component_ref::<InputRef>();
|
|
||||||
view! {
|
|
||||||
<div style="width: 896px; margin: 0 auto;">
|
|
||||||
<h1>"Input"</h1>
|
|
||||||
<Demo>
|
|
||||||
<Space vertical=true>
|
|
||||||
<Input value/>
|
|
||||||
<Input value variant=InputVariant::Password placeholder="Password"/>
|
|
||||||
</Space>
|
|
||||||
<DemoCode slot>
|
|
||||||
|
|
||||||
{highlight_str!(
|
|
||||||
r#"
|
|
||||||
let value = create_rw_signal(String::from("o"));
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<Space vertical=true>
|
|
||||||
<Input value/>
|
|
||||||
<Input value variant=InputVariant::Password placeholder="Password"/>
|
|
||||||
</Space>
|
|
||||||
}
|
|
||||||
"#,
|
|
||||||
"rust"
|
|
||||||
)}
|
|
||||||
|
|
||||||
</DemoCode>
|
|
||||||
</Demo>
|
|
||||||
<h3>disabled</h3>
|
|
||||||
<Demo>
|
|
||||||
<Space vertical=true>
|
|
||||||
<Input value disabled=true/>
|
|
||||||
</Space>
|
|
||||||
<DemoCode slot>
|
|
||||||
|
|
||||||
{highlight_str!(
|
|
||||||
r#"
|
|
||||||
<Input value disabled=true/>
|
|
||||||
"#,
|
|
||||||
"rust"
|
|
||||||
)}
|
|
||||||
|
|
||||||
</DemoCode>
|
|
||||||
</Demo>
|
|
||||||
<h3>invalid</h3>
|
|
||||||
<Demo>
|
|
||||||
<Space vertical=true>
|
|
||||||
<Input value invalid=true/>
|
|
||||||
</Space>
|
|
||||||
<DemoCode slot>
|
|
||||||
|
|
||||||
{highlight_str!(
|
|
||||||
r#"
|
|
||||||
<Input value invalid=true/>
|
|
||||||
"#,
|
|
||||||
"rust"
|
|
||||||
)}
|
|
||||||
|
|
||||||
</DemoCode>
|
|
||||||
</Demo>
|
|
||||||
<h3>"Imperative handle"</h3>
|
|
||||||
<Demo>
|
|
||||||
<Space vertical=true>
|
|
||||||
<Space>
|
|
||||||
<Button on_click=move |_| input_ref.get_untracked().unwrap().focus()>
|
|
||||||
"Focus"
|
|
||||||
</Button>
|
|
||||||
<Button on_click=move |_| input_ref.get_untracked().unwrap().blur()>
|
|
||||||
"Blur"
|
|
||||||
</Button>
|
|
||||||
</Space>
|
|
||||||
<Input value comp_ref=input_ref/>
|
|
||||||
</Space>
|
|
||||||
<DemoCode slot>
|
|
||||||
|
|
||||||
{highlight_str!(
|
|
||||||
r#"
|
|
||||||
let value = create_rw_signal(String::from("o"));
|
|
||||||
let input_ref = create_component_ref::<InputRef>();
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<Space vertical=true>
|
|
||||||
<Space>
|
|
||||||
<Button on_click=move |_| input_ref.get_untracked().unwrap().focus()>
|
|
||||||
"Focus"
|
|
||||||
</Button>
|
|
||||||
<Button on_click=move |_| input_ref.get_untracked().unwrap().blur()>
|
|
||||||
"Blur"
|
|
||||||
</Button>
|
|
||||||
</Space>
|
|
||||||
<Input value comp_ref=input_ref/>
|
|
||||||
</Space>
|
|
||||||
}
|
|
||||||
"#,
|
|
||||||
"rust"
|
|
||||||
)}
|
|
||||||
|
|
||||||
</DemoCode>
|
|
||||||
</Demo>
|
|
||||||
<h3>"Input attrs"</h3>
|
|
||||||
<Demo>
|
|
||||||
<Space>
|
|
||||||
<label for="demo-input-attrs">"Do you like cheese?"</label>
|
|
||||||
<Input attr:id="demo-input-attrs" />
|
|
||||||
</Space>
|
|
||||||
<DemoCode slot>
|
|
||||||
|
|
||||||
{highlight_str!(
|
|
||||||
r#"
|
|
||||||
view! {
|
|
||||||
<label for="demo-input-attrs">"Do you like cheese?"</label>
|
|
||||||
<Input attr:id="demo-input-attrs"/>
|
|
||||||
}
|
|
||||||
"#,
|
|
||||||
"rust"
|
|
||||||
)}
|
|
||||||
|
|
||||||
</DemoCode>
|
|
||||||
</Demo>
|
|
||||||
<h2>"Prefix & Suffix"</h2>
|
|
||||||
<Demo>
|
|
||||||
<Space vertical=true>
|
|
||||||
<Input value>
|
|
||||||
<InputPrefix slot>
|
|
||||||
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
|
|
||||||
</InputPrefix>
|
|
||||||
</Input>
|
|
||||||
<Input value>
|
|
||||||
<InputSuffix slot>"$"</InputSuffix>
|
|
||||||
</Input>
|
|
||||||
<Input value>
|
|
||||||
<InputSuffix slot>
|
|
||||||
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
|
|
||||||
</InputSuffix>
|
|
||||||
</Input>
|
|
||||||
</Space>
|
|
||||||
<DemoCode slot>
|
|
||||||
|
|
||||||
{highlight_str!(
|
|
||||||
r#"
|
|
||||||
let value = create_rw_signal(String::from("o"));
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<Space vertical=true>
|
|
||||||
<Input value>
|
|
||||||
<InputPrefix slot>
|
|
||||||
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
|
|
||||||
</InputPrefix>
|
|
||||||
</Input>
|
|
||||||
<Input value>
|
|
||||||
<InputSuffix slot>
|
|
||||||
"$"
|
|
||||||
</InputSuffix>
|
|
||||||
</Input>
|
|
||||||
<Input value>
|
|
||||||
<InputSuffix slot>
|
|
||||||
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
|
|
||||||
</InputSuffix>
|
|
||||||
</Input>
|
|
||||||
</Space>
|
|
||||||
}
|
|
||||||
"#,
|
|
||||||
"rust"
|
|
||||||
)}
|
|
||||||
|
|
||||||
</DemoCode>
|
|
||||||
</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>"Default::default()"</td>
|
|
||||||
<td>"Set the input value"</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"variant"</td>
|
|
||||||
<td>"MaybeSignal<InputVariant>"</td>
|
|
||||||
<td>"InputVariant::Text"</td>
|
|
||||||
<td>"Input's variant."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"placeholder"</td>
|
|
||||||
<td>"MaybeSignal<String>"</td>
|
|
||||||
<td>"Default::default()"</td>
|
|
||||||
<td>"Placeholder of input."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"disabled"</td>
|
|
||||||
<td>"MaybeSignal<bool>"</td>
|
|
||||||
<td>"false"</td>
|
|
||||||
<td>"Whether the input is disabled."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"invalid"</td>
|
|
||||||
<td>"MaybeSignal<bool>"</td>
|
|
||||||
<td>"false"</td>
|
|
||||||
<td>"Whether the input is invalid."</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>
|
|
||||||
<tr>
|
|
||||||
<td>"class"</td>
|
|
||||||
<td>"MaybeSignal<String>"</td>
|
|
||||||
<td>"Default::default()"</td>
|
|
||||||
<td>"Addtional classes for the input element."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"attr:"</td>
|
|
||||||
<td>"Vec<(&'static str, Attribute)>"</td>
|
|
||||||
<td>"Default::default()"</td>
|
|
||||||
<td>"The dom attrs of the input element inside the component."</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>"InputPrefix"</td>
|
|
||||||
<td>"None"</td>
|
|
||||||
<td>"InputPrefix content."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"InputSuffix"</td>
|
|
||||||
<td>"None"</td>
|
|
||||||
<td>"InputSuffix content."</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</Table>
|
|
||||||
<h3>"Input Ref"</h3>
|
|
||||||
<Table single_column=true>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>"Name"</th>
|
|
||||||
<th>"Type"</th>
|
|
||||||
<th>"Description"</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>"focus"</td>
|
|
||||||
<td>
|
|
||||||
<Text code=true>"Fn(&self)"</Text>
|
|
||||||
</td>
|
|
||||||
<td>"Focus the input element."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"blur"</td>
|
|
||||||
<td>
|
|
||||||
<Text code=true>"Fn(&self)"</Text>
|
|
||||||
</td>
|
|
||||||
<td>"Blur the input element."</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,131 +0,0 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
|
||||||
use leptos::*;
|
|
||||||
use prisms::highlight_str;
|
|
||||||
use thaw::*;
|
|
||||||
|
|
||||||
#[component]
|
|
||||||
pub fn InputNumberPage() -> impl IntoView {
|
|
||||||
let value = create_rw_signal(0);
|
|
||||||
let value_f64 = create_rw_signal(0.0);
|
|
||||||
view! {
|
|
||||||
<div style="width: 896px; margin: 0 auto;">
|
|
||||||
<h1>"InputNumber"</h1>
|
|
||||||
<Demo>
|
|
||||||
<Space vertical=true>
|
|
||||||
<InputNumber value step=1/>
|
|
||||||
<InputNumber value=value_f64 step=1.0/>
|
|
||||||
</Space>
|
|
||||||
<DemoCode slot>
|
|
||||||
|
|
||||||
{highlight_str!(
|
|
||||||
r#"
|
|
||||||
let value = create_rw_signal(0);
|
|
||||||
let value_f64 = create_rw_signal(0.0);
|
|
||||||
view! {
|
|
||||||
<Space vertical=true>
|
|
||||||
<InputNumber value step=1/>
|
|
||||||
<InputNumber value=value_f64 step=1.0/>
|
|
||||||
</Space>
|
|
||||||
}
|
|
||||||
"#,
|
|
||||||
"rust"
|
|
||||||
)}
|
|
||||||
|
|
||||||
</DemoCode>
|
|
||||||
</Demo>
|
|
||||||
<h3>"disabled"</h3>
|
|
||||||
<Demo>
|
|
||||||
<Space vertical=true>
|
|
||||||
<InputNumber value step=1 disabled=true/>
|
|
||||||
</Space>
|
|
||||||
<DemoCode slot>
|
|
||||||
|
|
||||||
{highlight_str!(
|
|
||||||
r#"
|
|
||||||
<InputNumber value step=1 disabled=true/>
|
|
||||||
"#,
|
|
||||||
"rust"
|
|
||||||
)}
|
|
||||||
|
|
||||||
</DemoCode>
|
|
||||||
</Demo>
|
|
||||||
<h3>"invalid"</h3>
|
|
||||||
<Demo>
|
|
||||||
<Space vertical=true>
|
|
||||||
<InputNumber value step=1 invalid=true/>
|
|
||||||
</Space>
|
|
||||||
<DemoCode slot>
|
|
||||||
|
|
||||||
{highlight_str!(
|
|
||||||
r#"
|
|
||||||
<InputNumber value step=1 invalid=true/>
|
|
||||||
"#,
|
|
||||||
"rust"
|
|
||||||
)}
|
|
||||||
|
|
||||||
</DemoCode>
|
|
||||||
</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>"Default::default()"</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>
|
|
||||||
<tr>
|
|
||||||
<td>"disabled"</td>
|
|
||||||
<td>"MaybeSignal<bool>"</td>
|
|
||||||
<td>"false"</td>
|
|
||||||
<td>"Whether the input is disabled."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"invalid"</td>
|
|
||||||
<td>"MaybeSignal<bool>"</td>
|
|
||||||
<td>"false"</td>
|
|
||||||
<td>"Whether the input is invalid."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"class"</td>
|
|
||||||
<td>"MaybeSignal<String>"</td>
|
|
||||||
<td>"Default::default()"</td>
|
|
||||||
<td>"Addtional classes for the input element."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"attr:"</td>
|
|
||||||
<td>"Vec<(&'static str, Attribute)>"</td>
|
|
||||||
<td>"Default::default()"</td>
|
|
||||||
<td>"The dom attrs of the input element inside the component."</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</Table>
|
|
||||||
<h3>"T impl"</h3>
|
|
||||||
<p>
|
|
||||||
"T: Add<Output = T> + Sub<Output = T> + Default + Clone + FromStr + ToString + 'static"
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,170 +0,0 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
|
||||||
use leptos::*;
|
|
||||||
use prisms::highlight_str;
|
|
||||||
use thaw::*;
|
|
||||||
|
|
||||||
#[component]
|
|
||||||
pub fn LayoutPage() -> impl IntoView {
|
|
||||||
view! {
|
|
||||||
<div style="width: 896px; margin: 0 auto;">
|
|
||||||
<h1>"Layout"</h1>
|
|
||||||
<Demo>
|
|
||||||
<Layout>
|
|
||||||
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">
|
|
||||||
"Header"
|
|
||||||
</LayoutHeader>
|
|
||||||
<Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
|
|
||||||
</Layout>
|
|
||||||
<DemoCode slot>
|
|
||||||
|
|
||||||
{highlight_str!(
|
|
||||||
r#"
|
|
||||||
<Layout>
|
|
||||||
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
|
|
||||||
<Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
|
|
||||||
</Layout>
|
|
||||||
"#,
|
|
||||||
"rust"
|
|
||||||
)}
|
|
||||||
|
|
||||||
</DemoCode>
|
|
||||||
</Demo>
|
|
||||||
<h3>"sider"</h3>
|
|
||||||
<Demo>
|
|
||||||
<Layout has_sider=true>
|
|
||||||
<LayoutSider style="background-color: #0078ff99; padding: 20px;">
|
|
||||||
"Sider"
|
|
||||||
</LayoutSider>
|
|
||||||
<Layout>
|
|
||||||
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">
|
|
||||||
"Header"
|
|
||||||
</LayoutHeader>
|
|
||||||
<Layout style="background-color: #0078ff88; padding: 20px;">
|
|
||||||
"Content"
|
|
||||||
</Layout>
|
|
||||||
</Layout>
|
|
||||||
</Layout>
|
|
||||||
<DemoCode slot>
|
|
||||||
|
|
||||||
{highlight_str!(
|
|
||||||
r#"
|
|
||||||
<Layout has_sider=true>
|
|
||||||
<LayoutSider style="background-color: #0078ff99; padding: 20px;">"Sider"</LayoutSider>
|
|
||||||
<Layout>
|
|
||||||
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
|
|
||||||
<Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
|
|
||||||
</Layout>
|
|
||||||
</Layout>
|
|
||||||
"#,
|
|
||||||
"rust"
|
|
||||||
)}
|
|
||||||
|
|
||||||
</DemoCode>
|
|
||||||
</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>
|
|
||||||
<Text code=true>"MaybeSignal<String>"</Text>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Text code=true>"Default::default()"</Text>
|
|
||||||
</td>
|
|
||||||
<td>"Layout's style."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"position"</td>
|
|
||||||
<td>
|
|
||||||
<Text code=true>"LayoutPosition"</Text>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Text code=true>"LayoutPosition::Static"</Text>
|
|
||||||
</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>
|
|
||||||
<Text code=true>"MaybeSignal<bool>"</Text>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Text code=true>"false"</Text>
|
|
||||||
</td>
|
|
||||||
<td>"Whether the component has sider inside. If so it must be true."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"class"</td>
|
|
||||||
<td>
|
|
||||||
<Text code=true>"MaybeSignal<String>"</Text>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Text code=true>"Default::default()"</Text>
|
|
||||||
</td>
|
|
||||||
<td>"Addtional classes for the layout element."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"children"</td>
|
|
||||||
<td>
|
|
||||||
<Text code=true>"Children"</Text>
|
|
||||||
</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>
|
|
||||||
<Text code=true>"MaybeSignal<String>"</Text>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Text code=true>"Default::default()"</Text>
|
|
||||||
</td>
|
|
||||||
<td>"LayoutHeader's style."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"class"</td>
|
|
||||||
<td>
|
|
||||||
<Text code=true>"MaybeSignal<String>"</Text>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Text code=true>"Default::default()"</Text>
|
|
||||||
</td>
|
|
||||||
<td>"Addtional classes for the layout header element."</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>"children"</td>
|
|
||||||
<td>
|
|
||||||
<Text code=true>"Children"</Text>
|
|
||||||
</td>
|
|
||||||
<td></td>
|
|
||||||
<td>"LayoutHeader's content."</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -16,9 +16,6 @@ mod guide;
|
||||||
mod home;
|
mod home;
|
||||||
mod icon;
|
mod icon;
|
||||||
mod image;
|
mod image;
|
||||||
mod input;
|
|
||||||
mod input_number;
|
|
||||||
mod layout;
|
|
||||||
mod markdown;
|
mod markdown;
|
||||||
mod mobile;
|
mod mobile;
|
||||||
mod nav_bar;
|
mod nav_bar;
|
||||||
|
@ -43,9 +40,6 @@ pub use guide::*;
|
||||||
pub use home::*;
|
pub use home::*;
|
||||||
pub use icon::*;
|
pub use icon::*;
|
||||||
pub use image::*;
|
pub use image::*;
|
||||||
pub use input::*;
|
|
||||||
pub use input_number::*;
|
|
||||||
pub use layout::*;
|
|
||||||
pub use markdown::*;
|
pub use markdown::*;
|
||||||
pub use mobile::*;
|
pub use mobile::*;
|
||||||
pub use nav_bar::*;
|
pub use nav_bar::*;
|
||||||
|
|
3
demo_markdown/.prettierrc.toml
Normal file
3
demo_markdown/.prettierrc.toml
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
[[overrides]]
|
||||||
|
files = "*.md"
|
||||||
|
options = { proseWrap = "never", printWidth = 120 }
|
121
demo_markdown/docs/input/mod.md
Normal file
121
demo_markdown/docs/input/mod.md
Normal file
|
@ -0,0 +1,121 @@
|
||||||
|
# Input
|
||||||
|
|
||||||
|
```rust demo
|
||||||
|
let value = create_rw_signal(String::from("o"));
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<Space vertical=true>
|
||||||
|
<Input value/>
|
||||||
|
<Input value variant=InputVariant::Password placeholder="Password"/>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Disabled
|
||||||
|
|
||||||
|
```rust demo
|
||||||
|
let value = create_rw_signal(String::from("o"));
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<Space vertical=true>
|
||||||
|
<Input value disabled=true/>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Invalid
|
||||||
|
|
||||||
|
```rust demo
|
||||||
|
let value = create_rw_signal(String::from("o"));
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<Space vertical=true>
|
||||||
|
<Input value invalid=true/>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Imperative handle
|
||||||
|
|
||||||
|
```rust demo
|
||||||
|
let value = create_rw_signal(String::from("o"));
|
||||||
|
let input_ref = create_component_ref::<InputRef>();
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<Space vertical=true>
|
||||||
|
<Space>
|
||||||
|
<Button on_click=move |_| input_ref.get_untracked().unwrap().focus()>
|
||||||
|
"Focus"
|
||||||
|
</Button>
|
||||||
|
<Button on_click=move |_| input_ref.get_untracked().unwrap().blur()>
|
||||||
|
"Blur"
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
<Input value comp_ref=input_ref/>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Input attrs
|
||||||
|
|
||||||
|
```rust demo
|
||||||
|
view! {
|
||||||
|
<Space>
|
||||||
|
<label for="demo-input-attrs">"Do you like cheese?"</label>
|
||||||
|
<Input attr:id="demo-input-attrs"/>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Prefix & Suffix
|
||||||
|
|
||||||
|
```rust demo
|
||||||
|
let value = create_rw_signal(String::from("o"));
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<Space vertical=true>
|
||||||
|
<Input value>
|
||||||
|
<InputPrefix slot>
|
||||||
|
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
|
||||||
|
</InputPrefix>
|
||||||
|
</Input>
|
||||||
|
<Input value>
|
||||||
|
<InputSuffix slot>"$"</InputSuffix>
|
||||||
|
</Input>
|
||||||
|
<Input value>
|
||||||
|
<InputSuffix slot>
|
||||||
|
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
|
||||||
|
</InputSuffix>
|
||||||
|
</Input>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Input Props
|
||||||
|
|
||||||
|
| Name | Type | Default | Description |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the input element. |
|
||||||
|
| value | `RwSignal<String>` | `Default::default()` | Set the input value. |
|
||||||
|
| variant | `MaybeSignal<InputVariant>` | `InputVariant::Text` | Input's variant. |
|
||||||
|
| placeholder | `MaybeSignal<String>` | `Default::default()` | Placeholder of input. |
|
||||||
|
| disabled | `MaybeSignal<bool>` | `false` | Whether the input is disabled. |
|
||||||
|
| invalid | `MaybeSignal<bool>` | `false` | Whether the input is invalid. |
|
||||||
|
| allow_value | `Option<Callback<String, bool>>` | `None` | Check the incoming value, if it returns false, input will not be accepted. |
|
||||||
|
| on_focus | `Option<Callback<ev::FocusEvent>>` | `None` | Callback triggered when the input is focussed on. |
|
||||||
|
| on_blur | `Option<Callback<ev::FocusEvent>>` | `None` | Callback triggered when the input is blurred. |
|
||||||
|
| attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. |
|
||||||
|
|
||||||
|
### Input Slots
|
||||||
|
|
||||||
|
| Name | Default | Description |
|
||||||
|
| ----------- | ------- | -------------------- |
|
||||||
|
| InputPrefix | `None` | InputPrefix content. |
|
||||||
|
| InputSuffix | `None` | InputSuffix content. |
|
||||||
|
|
||||||
|
### Input Ref
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
| ----- | ----------- | ------------------------ |
|
||||||
|
| focus | `Fn(&self)` | Focus the input element. |
|
||||||
|
| blur | `Fn(&self)` | Blur the input element. |
|
49
demo_markdown/docs/input_number/mod.md
Normal file
49
demo_markdown/docs/input_number/mod.md
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
# Input Number
|
||||||
|
|
||||||
|
```rust demo
|
||||||
|
let value = create_rw_signal(0);
|
||||||
|
let value_f64 = create_rw_signal(0.0);
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<Space vertical=true>
|
||||||
|
<InputNumber value step=1/>
|
||||||
|
<InputNumber value=value_f64 step=1.0/>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Disabled
|
||||||
|
|
||||||
|
```rust demo
|
||||||
|
let value = create_rw_signal(0);
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<InputNumber value step=1 disabled=true/>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Invalid
|
||||||
|
|
||||||
|
```rust demo
|
||||||
|
let value = create_rw_signal(0);
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<InputNumber value step=1 invalid=true/>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### InputNumber Props
|
||||||
|
|
||||||
|
| Name | Type | Default | Description |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the input element. |
|
||||||
|
| value | `RwSignal<T>` | `T::default()` | Set the input value. |
|
||||||
|
| placeholder | `MaybeSignal<String>` | `Default::default()` | Placeholder of input number. |
|
||||||
|
| step | `MaybeSignal<T>` | | The number which the current value is increased or decreased on key or button press. |
|
||||||
|
| disabled | `MaybeSignal<bool>` | `false` | Whether the input is disabled. |
|
||||||
|
| invalid | `MaybeSignal<bool>` | `false` | Whether the input is invalid. |
|
||||||
|
| attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. |
|
||||||
|
|
||||||
|
#### T impl
|
||||||
|
|
||||||
|
`T: Add<Output = T> + Sub<Output = T> + Default + Clone + FromStr + ToString + 'static`
|
49
demo_markdown/docs/layout/mod.md
Normal file
49
demo_markdown/docs/layout/mod.md
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
# Layout
|
||||||
|
|
||||||
|
```rust demo
|
||||||
|
view! {
|
||||||
|
<Layout>
|
||||||
|
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">
|
||||||
|
"Header"
|
||||||
|
</LayoutHeader>
|
||||||
|
<Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
|
||||||
|
</Layout>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Sider
|
||||||
|
|
||||||
|
```rust demo
|
||||||
|
view! {
|
||||||
|
<Layout has_sider=true>
|
||||||
|
<LayoutSider style="background-color: #0078ff99; padding: 20px;">
|
||||||
|
"Sider"
|
||||||
|
</LayoutSider>
|
||||||
|
<Layout>
|
||||||
|
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">
|
||||||
|
"Header"
|
||||||
|
</LayoutHeader>
|
||||||
|
<Layout style="background-color: #0078ff88; padding: 20px;">
|
||||||
|
"Content"
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Layout Props
|
||||||
|
|
||||||
|
| Name | Type | Default | Description |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the layout element. |
|
||||||
|
| style | `MaybeSignal<String>` | `Default::default()` | Layout's style. |
|
||||||
|
| position | `LayoutPosition` | `LayoutPosition::Static` | 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. |
|
||||||
|
| children | `Children` | | Layout's content. |
|
||||||
|
|
||||||
|
### LayoutHeader, LayoutSider Props
|
||||||
|
|
||||||
|
| Name | Type | Default | Description |
|
||||||
|
| -------- | --------------------- | -------------------- | ------------------------------------------------ |
|
||||||
|
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the layout header element. |
|
||||||
|
| style | `MaybeSignal<String>` | `Default::default()` | LayoutHeader's style. |
|
||||||
|
| children | `Children` | | LayoutHeader's content. |
|
|
@ -8,6 +8,9 @@ use syn::ItemFn;
|
||||||
#[proc_macro]
|
#[proc_macro]
|
||||||
pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenStream {
|
pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenStream {
|
||||||
let file_list = vec![
|
let file_list = vec![
|
||||||
|
("InputMdPage", include_str!("../docs/input/mod.md")),
|
||||||
|
("InputNumberMdPage", include_str!("../docs/input_number/mod.md")),
|
||||||
|
("LayoutMdPage", include_str!("../docs/layout/mod.md")),
|
||||||
("LoadingBarMdPage", include_str!("../docs/loading_bar/mod.md")),
|
("LoadingBarMdPage", include_str!("../docs/loading_bar/mod.md")),
|
||||||
("MenuMdPage", include_str!("../docs/menu/mod.md")),
|
("MenuMdPage", include_str!("../docs/menu/mod.md")),
|
||||||
("MessageMdPage", include_str!("../docs/message/mod.md")),
|
("MessageMdPage", include_str!("../docs/message/mod.md")),
|
||||||
|
|
Loading…
Add table
Reference in a new issue