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

refactor demo docs (#64)

Browse source 
* demo: refactor docs

* demo: refactor docs

* demo: refactor docs

* demo: refactor docs
This commit is contained in:
luoxiaozero 2023-12-31 23:33:05 +08:00 • committed by GitHub
parent 9c6c5aed9b
commit 1e4832a6d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
45 changed files with 779 additions and 2194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
demo/src/app.rs
View file

@ -41,21 +41,13 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
<Route path="/server-sider-rendering" view=ServerSiderRenderingPage/>
</Route>
<Route path="/components" view=ComponentsPage>
<Route path="/menu" view=MenuPage/>
<Route path="/slider" view=SliderPage/>
<Route path="/tabbar" view=TabbarPage/>
<Route path="/nav-bar" view=NavBarPage/>
<Route path="/input" view=InputPage/>
<Route path="/image" view=ImagePage/>
<Route path="/modal" view=ModalPage/>
<Route path="/button" view=ButtonPage/>
<Route path="/checkbox" view=CheckboxPage/>
<Route path="/toast" view=ToastPage/>
<Route path="/tabs" view=TabsPage/>
<Route path="/select" view=SelectPage/>
<Route path="/space" view=SpacePage/>
<Route path="/spinner" view=SpinnerPage/>
<Route path="/table" view=TablePage/>
<Route path="/color-picker" view=ColorPickerPage/>
<Route path="/alert" view=AlertPage/>
<Route path="/grid" view=GridPage/>
@ -66,23 +58,30 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
<Route path="/divider" view=DividerPage/>
<Route path="/input-number" view=InputNumberPage/>
<Route path="/icon" view=IconPage/>
<Route path="/message" view=MessagePage/>
<Route path="/radio" view=RadioPage/>
<Route path="/skeleton" view=SkeletonPage/>
<Route path="/switch" view=SwitchPage/>
<Route path="/tag" view=TagPage/>
<Route path="/upload" view=UploadPage/>
<Route path="/upload-md" view=UploadMdPage/>
<Route path="/loading-bar" view=LoadingBarPage/>
<Route path="/breadcrumb" view=BreadcrumbPage/>
<Route path="/layout" view=LayoutPage/>
<Route path="/progress" view=ProgressPage/>
<Route path="/theme" view=ThemePage/>
<Route path="/typography" view=TypographyPage/>
<Route path="/calendar" view=CalendarPage/>
<Route path="/time-picker" view=TimePickerPage/>
<Route path="/date-picker" view=DatePickerPage/>
<Route path="/popover" view=PopoverPage/>
<Route path="/loading-bar" view=LoadingBarMdPage/>
<Route path="/menu" view=MenuMdPage/>
<Route path="/message" view=MessageMdPage/>
<Route path="/modal" view=ModalMdPage/>
<Route path="/popover" view=PopoverMdPage/>
<Route path="/progress" view=ProgressMdPage/>
<Route path="/radio" view=RadioMdPage/>
<Route path="/select" view=SelectMdPage/>
<Route path="/skeleton" view=SkeletonMdPage/>
<Route path="/slider" view=SliderMdPage/>
<Route path="/space" view=SpaceMdPage/>
<Route path="/spinner" view=SpinnerMdPage/>
<Route path="/switch" view=SwitchMdPage/>
<Route path="/table" view=TableMdPage/>
<Route path="/tabs" view=TabsMdPage/>
<Route path="/tag" view=TagMdPage/>
<Route path="/theme" view=ThemeMdPage/>
<Route path="/time-picker" view=TimePickerMdPage/>
<Route path="/typography" view=TypographyMdPage/>
<Route path="/upload" view=UploadMdPage/>
</Route>
<Route path="/mobile/tabbar" view=TabbarDemoPage/>
<Route path="/mobile/nav-bar" view=NavBarDemoPage/>

2
demo/src/components/demo.rs
View file

@ -24,7 +24,7 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
style
});
let code_style = create_memo(move |_| {
let mut style = String::from("font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;");
let mut style = String::from("font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; overflow: auto;");
theme.with(|theme| {
if theme.common.color_scheme == "dark" {
style.push_str("border: 1px solid #383f52; border-top-width: 0;");

4
demo/src/components/syntect-css.css
View file

@ -7,6 +7,7 @@
/** light */
.color-scheme--light .syntect-keyword,
.color-scheme--light .syntect-storage {
color: hsl(301, 63%, 40%);
}
@ -28,12 +29,14 @@
color: hsl(119, 34%, 47%);
}
.color-scheme--light .syntect-constant,
.color-scheme--light .syntect-placeholder {
color: hsl(41, 99%, 30%);
}
/** dark */
.color-scheme--dark .syntect-keyword,
.color-scheme--dark .syntect-storage {
color: hsl(286, 60%, 67%);
}
@ -55,6 +58,7 @@
color: hsl(95, 38%, 62%);
}
.color-scheme--dark .syntect-constant,
.color-scheme--dark .syntect-placeholder {
color: hsl(29, 54%, 61%);
}

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

@ -1,86 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn LoadingBarPage() -> impl IntoView {
let loading_bar = use_loading_bar();
let start = Callback::new(move |_| {
loading_bar.start();
});
let finish = Callback::new(move |_| {
loading_bar.finish();
});
let error = Callback::new(move |_| {
loading_bar.error();
});
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Loading Bar"</h1>
<Alert variant=AlertVariant::Warning title="Prerequisite">
"If you want to use loading bar, you need to wrap the component where you call related methods inside LoadingBarProvider and use use_loading_bar to get the API."
</Alert>
<Demo>
<Space>
<Button on_click=start>"start"</Button>
<Button on_click=finish>"finish"</Button>
<Button on_click=error>"error"</Button>
</Space>
<DemoCode slot>
{highlight_str!(
r#"
let loading_bar = use_loading_bar();
let start = move |_| {
loading_bar.start();
};
let finish = move |_| {
loading_bar.finish();
};
let error = move |_| {
loading_bar.error();
};
view! {
<Space>
<Button on_click=start>"start"</Button>
<Button on_click=finish>"finish"</Button>
<Button on_click=error>"error"</Button>
</Space>
}
"#,
"rust"
)}
</DemoCode>
</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>
<td>"fn(&self)"</td>
<td>"Callback function for loading bar to start loading."</td>
</tr>
<tr>
<td>"finish"</td>
<td>"fn(&self)"</td>
<td>"The callback function when the loading bar finishes loading."</td>
</tr>
<tr>
<td>"error"</td>
<td>"fn(&self)"</td>
<td>"Callback function for loading bar error."</td>
</tr>
</tbody>
</Table>
</div>
}
}

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

@ -1,126 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn MenuPage() -> impl IntoView {
let value = create_rw_signal(String::from("o"));
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Menu"</h1>
<Demo>
<Menu value>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
<DemoCode slot>
{highlight_str!( r#"
let value = create_rw_signal(String::from("o"));
<Menu value>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
"#,
"rust"
)}
</DemoCode>
</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>"Default::default()"</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>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the menu element."</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>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the menu group element."</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>"Default::default()"</td>
<td>"The label of the menu item."</td>
</tr>
<tr>
<td>"key"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"The indentifier of the menu item."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the menu item element."</td>
</tr>
</tbody>
</Table>
</div>
}
}

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

@ -1,94 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn MessagePage() -> impl IntoView {
let message = use_message();
let success = move |_| {
message.create(
"Success".into(),
MessageVariant::Success,
Default::default(),
);
};
let warning = move |_| {
message.create(
"Warning".into(),
MessageVariant::Warning,
Default::default(),
);
};
let error = move |_| {
message.create("Error".into(), MessageVariant::Error, Default::default());
};
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Message"</h1>
<Alert variant=AlertVariant::Warning title="Prerequisite">
"If you want to use message, you need to wrap the component where you call related methods inside MessageProvider and use use_message to get the API."
</Alert>
<Demo>
<Space>
<Button on_click=success>"Success"</Button>
<Button on_click=warning>"Warning"</Button>
<Button on_click=error>"Error"</Button>
</Space>
<DemoCode slot>
{highlight_str!(
r#"
let message = use_message();
let success = move |_| {
message.create(
"Success".into(),
MessageVariant::Success,
Default::default(),
);
};
let warning = move |_| {
message.create(
"Warning".into(),
MessageVariant::Warning,
Default::default(),
);
};
let error = move |_| {
message.create("Error".into(), MessageVariant::Error, Default::default());
};
view! {
<Space>
<Button on_click=success>"Success"</Button>
<Button on_click=warning>"Warning"</Button>
<Button on_click=error>"Error"</Button>
</Space>
}
"#,
"rust"
)}
</DemoCode>
</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>
}
}

40
demo/src/pages/mod.rs
View file

@ -19,31 +19,11 @@ mod image;
mod input;
mod input_number;
mod layout;
mod loading_bar;
mod markdown;
mod menu;
mod message;
mod mobile;
mod modal;
mod nav_bar;
mod popover;
mod progress;
mod radio;
mod select;
mod skeleton;
mod slider;
mod space;
mod spinner;
mod switch;
mod tabbar;
mod table;
mod tabs;
mod tag;
mod theme;
mod time_picker;
mod toast;
mod typography;
mod upload;
pub use alert::*;
pub use auto_complete::*;
@ -66,28 +46,8 @@ pub use image::*;
pub use input::*;
pub use input_number::*;
pub use layout::*;
pub use loading_bar::*;
pub use markdown::*;
pub use menu::*;
pub use message::*;
pub use mobile::*;
pub use modal::*;
pub use nav_bar::*;
pub use popover::*;
pub use progress::*;
pub use radio::*;
pub use select::*;
pub use skeleton::*;
pub use slider::*;
pub use space::*;
pub use spinner::*;
pub use switch::*;
pub use tabbar::*;
pub use table::*;
pub use tabs::*;
pub use tag::*;
pub use theme::*;
pub use time_picker::*;
pub use toast::*;
pub use typography::*;
pub use upload::*;

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

@ -1,86 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn ModalPage() -> impl IntoView {
let show = create_rw_signal(false);
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Modal"</h1>
<Demo>
<Button on_click=move |_| show.set(true)>"Open Modal"</Button>
<Modal title="title" show>
"hello"
</Modal>
<DemoCode slot>
{highlight_str!(
r#"
let show = create_rw_signal(false);
<Button on_click=move |_| show.set(true)>
"open modal"
</Button>
<Modal title="title" show>
"hello"
</Modal>
"#,
"rust"
)}
</DemoCode>
</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>"Default::default()"</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>
}
}

316
demo/src/pages/popover/mod.rs
View file

@ -1,316 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use leptos_meta::Style;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn PopoverPage() -> impl IntoView {
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Popover"</h1>
<Demo>
<Space>
<Popover>
<PopoverTrigger slot>
<Button>"Hover"</Button>
</PopoverTrigger>
"Content"
</Popover>
<Popover trigger_type=PopoverTriggerType::Click>
<PopoverTrigger slot>
<Button>"Click"</Button>
</PopoverTrigger>
"Content"
</Popover>
</Space>
<DemoCode slot>
{highlight_str!(
r#"
<Space>
<Popover>
<PopoverTrigger slot>
<Button>
"Hover"
</Button>
</PopoverTrigger>
"Content"
</Popover>
</Space>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Placement"</h3>
<Style>".demo-popover .thaw-button { width: 100% } .demo-popover .thaw-popover-trigger { display: block }"</Style>
<Demo>
<Grid x_gap=8 y_gap=8 cols=3 class="demo-popover">
<GridItem>
<Popover placement=PopoverPlacement::TopStart>
<PopoverTrigger slot>
<Button>"Top Start"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::Top>
<PopoverTrigger slot>
<Button>"Top"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::TopEnd>
<PopoverTrigger slot>
<Button>"Top End"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::LeftStart>
<PopoverTrigger slot>
<Button>"Left Start"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem offset=1>
<Popover placement=PopoverPlacement::RightStart>
<PopoverTrigger slot>
<Button>"Right Start"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::Left>
<PopoverTrigger slot>
<Button>"Left"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem offset=1>
<Popover placement=PopoverPlacement::Right>
<PopoverTrigger slot>
<Button>"Right"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::LeftEnd>
<PopoverTrigger slot>
<Button>"Left End"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem offset=1>
<Popover placement=PopoverPlacement::RightEnd>
<PopoverTrigger slot>
<Button>"Right End"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::BottomStart>
<PopoverTrigger slot>
<Button>"Bottom Start"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::Bottom>
<PopoverTrigger slot>
<Button>"Bottom"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::BottomEnd>
<PopoverTrigger slot>
<Button>"Bottom End"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
</Grid>
<DemoCode slot>
{highlight_str!(
r#"
<Grid x_gap=8 y_gap=8 cols=3 class="demo-popover">
<GridItem>
<Popover placement=PopoverPlacement::TopStart>
<PopoverTrigger slot>
<Button>"Top Start"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::Top>
<PopoverTrigger slot>
<Button>"Top"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::TopEnd>
<PopoverTrigger slot>
<Button>"Top End"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::LeftStart>
<PopoverTrigger slot>
<Button>"Left Start"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem offset=1>
<Popover placement=PopoverPlacement::RightStart>
<PopoverTrigger slot>
<Button>"Right Start"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::Left>
<PopoverTrigger slot>
<Button>"Left"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem offset=1>
<Popover placement=PopoverPlacement::Right>
<PopoverTrigger slot>
<Button>"Right"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::LeftEnd>
<PopoverTrigger slot>
<Button>"Left End"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem offset=1>
<Popover placement=PopoverPlacement::RightEnd>
<PopoverTrigger slot>
<Button>"Right End"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::BottomStart>
<PopoverTrigger slot>
<Button>"Bottom Start"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::Bottom>
<PopoverTrigger slot>
<Button>"Bottom"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::BottomEnd>
<PopoverTrigger slot>
<Button>"Bottom End"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
</Grid>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Popover 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>"class"</td>
<td>
<Text code=true>"MaybeSignal<String>"</Text>
</td>
<td>
<Text code=true>"Default::default()"</Text>
</td>
<td>"Content class of the popover."</td>
</tr>
<tr>
<td>"placement"</td>
<td>
<Text code=true>"PopoverPlacement"</Text>
</td>
<td>
<Text code=true>"PopoverPlacement::Top"</Text>
</td>
<td>"Popover placement."</td>
</tr>
<tr>
<td>"children"</td>
<td>
<Text code=true>"Children"</Text>
</td>
<td></td>
<td>"The content inside popover."</td>
</tr>
</tbody>
</Table>
<h3>"Popover Slots"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"PopoverTrigger"</td>
<td></td>
<td>"The element or component that triggers popover."</td>
</tr>
</tbody>
</Table>
</div>
}
}

94
demo/src/pages/progress/mod.rs
View file

@ -1,94 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn ProgressPage() -> impl IntoView {
let percentage = create_rw_signal(0.0f32);
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Progress"</h1>
<Demo>
<Space vertical=true>
<Progress percentage show_indicator=false/>
<Progress percentage/>
<Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
<Progress percentage color=ProgressColor::Success/>
<Progress percentage color=ProgressColor::Warning/>
<Progress percentage color=ProgressColor::Error/>
<Space>
<Button on_click=move |_| percentage.update(|v| *v -= 10.0)>"-10%"</Button>
<Button on_click=move |_| percentage.update(|v| *v += 10.0)>"+10%"</Button>
</Space>
</Space>
<DemoCode slot>
{highlight_str!(
r#"
let percentage = create_rw_signal(0.0f32);
view! {
<Space vertical=true>
<Progress percentage show_indicator=false/>
<Progress percentage />
<Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
<Progress percentage color=ProgressColor::Success/>
<Progress percentage color=ProgressColor::Warning/>
<Progress percentage color=ProgressColor::Error/>
<Space>
<Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
"-10%"
</Button>
<Button on_click=move |_| percentage.update(|v| *v += 10.0)>
"+10%"
</Button>
</Space>
</Space>
}
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Progress 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>"percentage"</td>
<td>"MaybeSignal<f32>"</td>
<td>"0"</td>
<td>"Percentage value."</td>
</tr>
<tr>
<td>"color"</td>
<td>"MaybeSignal<ProgressColor>"</td>
<td>"ProgressColor::Primary"</td>
<td>"Progress color."</td>
</tr>
<tr>
<td>"show_indicator"</td>
<td>"MaybeSignal<bool>"</td>
<td>"true"</td>
<td>"Whether to display indicators."</td>
</tr>
<tr>
<td>"indicator_placement"</td>
<td>"MaybeSignal<ProgressIndicatorPlacement>"</td>
<td>"ProgressIndicatorPlacement::Outside"</td>
<td>"Indicator placement."</td>
</tr>
</tbody>
</Table>
</div>
}
}

64
demo/src/pages/radio/mod.rs
View file

@ -1,64 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn RadioPage() -> impl IntoView {
let checked = create_rw_signal(false);
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Radio"</h1>
<Demo>
<Radio value=checked>"Click"</Radio>
<DemoCode slot>
{highlight_str!(
r#"
let value = create_rw_signal(false);
view! {
<Radio value>
"Click"
</Radio>
}
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Radio 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<bool>"</td>
<td>"false"</td>
<td>"Checked value."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Radio's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the radio element."</td>
</tr>
</tbody>
</Table>
</div>
}
}

69
demo/src/pages/select/mod.rs
View file

@ -1,69 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn SelectPage() -> impl IntoView {
let selected_value = create_rw_signal(Some(String::from("apple")));
let options = vec![SelectOption {
label: String::from("apple"),
value: String::from("apple"),
}];
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Select"</h1>
<Demo>
<Select value=selected_value options/>
<DemoCode slot>
{highlight_str!(
r#"
let selected_value = create_rw_signal(Some(String::from("apple")));
let options = vec![SelectOption {
label: String::from("apple"),
value: String::from("apple"),
}];
<Select value=selected_value options/>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Select 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<Option<T>>"</td>
<td>"None"</td>
<td>"Checked value."</td>
</tr>
<tr>
<td>"options"</td>
<td>"MaybeSignal<Vec<SelectOption<T>>>"</td>
<td>"vec![]"</td>
<td>"Options that can be selected."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the select element."</td>
</tr>
</tbody>
</Table>
</div>
}
}

65
demo/src/pages/skeleton/mod.rs
View file

@ -1,65 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn SkeletonPage() -> impl IntoView {
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Skeleton"</h1>
<Demo>
<Skeleton repeat=2 text=true/>
<Skeleton width="60%" text=true/>
<DemoCode slot>
{highlight_str!(
r#"
<Skeleton repeat=2 text=true />
<Skeleton width="60%" text=true />
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Skeleton 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>"repeat"</td>
<td>"MaybeSignal<u32>"</td>
<td>"1"</td>
<td>"Repeat frequency."</td>
</tr>
<tr>
<td>"text"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Text skeleton."</td>
</tr>
<tr>
<td>"width"</td>
<td>"Option<MaybeSignal<String>>"</td>
<td>"None"</td>
<td>"Skeleton width."</td>
</tr>
<tr>
<td>"height"</td>
<td>"Option<MaybeSignal<String>>"</td>
<td>"None"</td>
<td>"Text skeleton."</td>
</tr>
</tbody>
</Table>
</div>
}
}

152
demo/src/pages/slider/mod.rs
View file

@ -1,152 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn SliderPage() -> impl IntoView {
let value = create_rw_signal(0.0);
let stepped_value = create_rw_signal(0.0);
let labeled_value = create_rw_signal(0.0);
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Slider"</h1>
<Demo>
<Slider value/>
<DemoCode slot>
{highlight_str!(
r#"
let value = create_rw_signal(0.0);
<Slider value/>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"step"</h3>
<Demo>
<Slider step=10.0 value=stepped_value/>
<DemoCode slot>
{highlight_str!(
r#"
let value = create_rw_signal(0.0);
<Slider step=10.0 value/>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h2>"SliderLabel"</h2>
<Demo>
<Slider value=labeled_value max=10.0 step=1.0>
<SliderLabel value=0.0>
"0"
</SliderLabel>
<SliderLabel value=5.0>
"5"
</SliderLabel>
<SliderLabel value=10.0>
"10"
</SliderLabel>
</Slider>
<DemoCode slot>
{highlight_str!(
r#"
let value = create_rw_signal(0.0);
<Slider value max=10.0 step=1.0>
<SliderLabel value=0>
"0"
</SliderLabel>
<SliderLabel value=5>
"5"
</SliderLabel>
<SliderLabel value=10>
"10"
</SliderLabel>
</Slider>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Slider 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<f64>"</td>
<td>"0"</td>
<td>"Value of the slider."</td>
</tr>
<tr>
<td>"max"</td>
<td>"MaybeSignal<f64>"</td>
<td>"100"</td>
<td>"Max value of the slider."</td>
</tr>
<tr>
<td>"step"</td>
<td>"MaybeSignal<f64>"</td>
<td></td>
<td>"The step in which value is incremented."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Option<Children>"</td>
<td></td>
<td>"Slider labels."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the slider element."</td>
</tr>
</tbody>
</Table>
<h3>"SliderLabel 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>"ReadSignal<f64>"</td>
<td></td>
<td>"Value at which label will be placed."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Content of the lable."</td>
</tr>
</tbody>
</Table>
</div>
}
}

125
demo/src/pages/space/mod.rs
View file

@ -1,125 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn SpacePage() -> impl IntoView {
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Space"</h1>
<Demo>
<Space>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<DemoCode slot>
{highlight_str!(
r#"
<Space>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"vertical"</h3>
<Demo>
<Space vertical=true>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<DemoCode slot>
{highlight_str!(
r#"
<Space vertical=true>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"gap"</h3>
<Demo>
<Space gap=SpaceGap::Large>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<Space gap=SpaceGap::WH(36, 36)>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<DemoCode slot>
{highlight_str!(
r#"
<Space gap=SpaceGap::Large>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<Space gap=SpaceGap::WH(36, 36)>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Space 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>"gap"</td>
<td>"SpaceGap"</td>
<td>"SpaceGap::Medium"</td>
<td>"Space's gap."</td>
</tr>
<tr>
<td>"vertical"</td>
<td>"MaybeSignal<f64>"</td>
<td>"false"</td>
<td>"Whether to lay out vertically."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Space's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the space element."</td>
</tr>
</tbody>
</Table>
</div>
}
}

83
demo/src/pages/spinner/mod.rs
View file

@ -1,83 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn SpinnerPage() -> impl IntoView {
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Spinner"</h1>
<Demo>
<Space>
<Spinner/>
</Space>
<DemoCode slot>
{highlight_str!(
r#"
<Spinner/>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"size"</h3>
<Demo>
<Space>
<Spinner size=SpinnerSize::Tiny/>
<Spinner size=SpinnerSize::Small/>
<Spinner size=SpinnerSize::Medium/>
<Spinner size=SpinnerSize::Large/>
</Space>
<DemoCode slot>
{highlight_str!(
r#"
<Spinner size=SpinnerSize::Tiny/>
<Spinner size=SpinnerSize::Small/>
<Spinner size=SpinnerSize::Medium/>
<Spinner size=SpinnerSize::Large/>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Spinner 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>"class"</td>
<td>
<Text code=true>"MaybeSignal<String>"</Text>
</td>
<td>
<Text code=true>"Default::default()"</Text>
</td>
<td>"Additional classes for the spinner element."</td>
</tr>
<tr>
<td>"size"</td>
<td>
<Text code=true>"MaybeSignal<SpinnerSize>"</Text>
</td>
<td>
<Text code=true>"SpinnerSize::Medium"</Text>
</td>
<td>"Spinner size."</td>
</tr>
</tbody>
</Table>
</div>
}
}

55
demo/src/pages/switch/mod.rs
View file

@ -1,55 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn SwitchPage() -> impl IntoView {
let value = create_rw_signal(false);
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Switch"</h1>
<Demo>
<Switch value/>
<DemoCode slot>
{highlight_str!(
r#"
let value = create_rw_signal(false);
view! {
<Switch value />
}
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Swith 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<bool>"</td>
<td>"false"</td>
<td>"Swith's value."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the switch element."</td>
</tr>
</tbody>
</Table>
</div>
}
}

109
demo/src/pages/table/mod.rs
View file

@ -1,109 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn TablePage() -> impl IntoView {
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Table"</h1>
<Demo>
<Table>
<thead>
<tr>
<th>"tag"</th>
<th>"count"</th>
<th>"date"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"div"</td>
<td>"2"</td>
<td>"2023-10-08"</td>
</tr>
<tr>
<td>"span"</td>
<td>"2"</td>
<td>"2023-10-08"</td>
</tr>
</tbody>
</Table>
<DemoCode slot>
{highlight_str!(
r#"
<Table>
<thead>
<tr>
<th>"tag"</th>
<th>"count"</th>
<th>"date"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"div"</td>
<td>"2"</td>
<td>"2023-10-08"</td>
</tr>
<tr>
<td>"span"</td>
<td>"2"</td>
<td>"2023-10-08"</td>
</tr>
</tbody>
</Table>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Table 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>"single_row"</td>
<td>"MaybeSignal<bool>"</td>
<td>"true"</td>
<td>"Default::default()"</td>
</tr>
<tr>
<td>"single_column"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Default::default()"</td>
</tr>
<tr>
<td>"style"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Table's style."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Table's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the table element."</td>
</tr>
</tbody>
</Table>
</div>
}
}

125
demo/src/pages/tabs/mod.rs
View file

@ -1,125 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn TabsPage() -> impl IntoView {
let value = create_rw_signal(String::from("apple"));
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Tabs"</h1>
<Demo>
<Tabs value>
<Tab key="apple" label="Apple">
"apple"
</Tab>
<Tab key="pear" label="Pear">
"pear"
</Tab>
</Tabs>
<DemoCode slot>
{highlight_str!(
r#"
let value = create_rw_signal(String::from("apple"));
view! {
<Tabs value>
<Tab key="apple" label="Apple">
"apple"
</Tab>
<Tab key="pear" label="Pear">
"pear"
</Tab>
</Tabs>
}
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Tabs 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>
<Text code=true>"RwSignal<String>"</Text>
</td>
<td>
<Text code=true>"Default::default()"</Text>
</td>
<td>"Tabs value."</td>
</tr>
<tr>
<td>"children"</td>
<td>
<Text code=true>"Children"</Text>
</td>
<td></td>
<td>"Tabs content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the tabs element."</td>
</tr>
</tbody>
</Table>
<h3>"Tab 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>"key"</td>
<td>
<Text code=true>"String"</Text>
</td>
<td></td>
<td>"The indentifier of the tab."</td>
</tr>
<tr>
<td>"label"</td>
<td>
<Text code=true>"String"</Text>
</td>
<td></td>
<td>"The label of the tab."</td>
</tr>
<tr>
<td>"children"</td>
<td>
<Text code=true>"Children"</Text>
</td>
<td></td>
<td>"Tab's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the tab element."</td>
</tr>
</tbody>
</Table>
</div>
}
}

75
demo/src/pages/tag/mod.rs
View file

@ -1,75 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn TagPage() -> impl IntoView {
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Tag"</h1>
<Demo>
<Space>
<Tag>"default"</Tag>
<Tag variant=TagVariant::Success>"success"</Tag>
<Tag variant=TagVariant::Warning>"warning"</Tag>
<Tag variant=TagVariant::Error>"error"</Tag>
</Space>
<DemoCode slot>
{highlight_str!(
r#"
<Space>
<Tag>
"default"
</Tag>
<Tag variant=TagVariant::Success>
"success"
</Tag>
<Tag variant=TagVariant::Warning>
"warning"
</Tag>
<Tag variant=TagVariant::Error>
"error"
</Tag>
</Space>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Tag 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>"variant"</td>
<td>"MaybeSignal<TagVariant>"</td>
<td>"TagVariant::Default"</td>
<td>"Tag's variant."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Tag's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the tag element."</td>
</tr>
</tbody>
</Table>
</div>
}
}

136
demo/src/pages/theme/mod.rs
View file

@ -1,136 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn ThemePage() -> impl IntoView {
let theme = create_rw_signal(Theme::light());
let customize_theme = create_rw_signal(Theme::light());
let on_customize_theme = move |_| {
customize_theme.update(|theme| {
theme.common.color_primary = "#f5222d".to_string();
theme.common.color_primary_hover = "#ff4d4f".to_string();
theme.common.color_primary_active = "#cf1322".to_string();
});
};
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Theme"</h1>
<h3>"ThemeProvider"</h3>
<Demo>
<ThemeProvider theme>
<Card>
<Space>
<Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
<Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
</Space>
</Card>
</ThemeProvider>
<DemoCode slot>
{highlight_str!(
r#"
let theme = create_rw_signal(Theme::light());
view! {
<ThemeProvider theme>
<Card>
<Space>
<Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
<Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
</Space>
</Card>
</ThemeProvider>
}
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"GlobalStyle"</h3>
<p>"You can use GlobalStyle to sync common global style to the body element."</p>
<Demo>
""
<DemoCode slot>
{highlight_str!(
r#"
let theme = create_rw_signal(Theme::light());
view! {
<ThemeProvider theme>
<GlobalStyle />
"..."
</ThemeProvider>
}
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"CustomizeTheme"</h3>
<Demo>
<ThemeProvider theme=customize_theme>
<Card>
<Space>
<Button on_click=move |_| {
customize_theme.set(Theme::light())
}>"Light"</Button>
<Button on_click=on_customize_theme>"Customize Theme"</Button>
</Space>
</Card>
</ThemeProvider>
<DemoCode slot>
{highlight_str!(
r##"
let customize_theme = create_rw_signal(Theme::light());
let on_customize_theme = move |_| {
customize_theme.update(|theme| {
theme.common.color_primary = "#f5222d".to_string();
theme.common.color_primary_hover = "#ff4d4f".to_string();
theme.common.color_primary_active = "#cf1322".to_string();
});
};
view! {
<ThemeProvider theme=customize_theme>
<Card>
<Space>
<Button on_click=move |_| customize_theme.set(Theme::light())>"Light"</Button>
<Button on_click=on_customize_theme>"Customize Theme"</Button>
</Space>
</Card>
</ThemeProvider>
}
"##,
"rust"
)}
</DemoCode>
</Demo>
<h3>"ThemeProvider 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>"theme"</td>
<td>"RwSignal<Theme>"</td>
<td></td>
<td>"Theme."</td>
</tr>
</tbody>
</Table>
</div>
}
}

60
demo/src/pages/time_picker/mod.rs
View file

@ -1,60 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::chrono::prelude::*;
use thaw::*;
#[component]
pub fn TimePickerPage() -> impl IntoView {
let value = create_rw_signal(Some(Local::now().time()));
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Time Picker"</h1>
<Demo>
<TimePicker value/>
<DemoCode slot>
{highlight_str!(
r#"
use thaw::chrono::prelude::*;
let value = create_rw_signal(Local::now().time());
view! {
<TimePicker value />
}
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"TimePicker 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>
<Text code=true>"RwSignal<Time>"</Text>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the time picker element."</td>
</tr>
</tbody>
</Table>
</div>
}
}

73
demo/src/pages/typography/mod.rs
View file

@ -1,73 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn TypographyPage() -> impl IntoView {
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Typography"</h1>
<Demo>
<Space>
<Text>"text"</Text>
<Text code=true>"code"</Text>
</Space>
<DemoCode slot>
{highlight_str!(
r#"
<Space>
<Text>
"text"
</Text>
<Text code=true>
"code"
</Text>
</Space>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Text 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>"code"</td>
<td>
<Text code=true>"bool"</Text>
</td>
<td>
<Text code=true>"false"</Text>
</td>
<td>"Use the code tag and style."</td>
</tr>
<tr>
<td>"children"</td>
<td>
<Text code=true>"Children"</Text>
</td>
<td></td>
<td>"Text's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the text element."</td>
</tr>
</tbody>
</Table>
</div>
}
}

136
demo/src/pages/upload/mod.rs
View file

@ -1,136 +0,0 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn UploadPage() -> impl IntoView {
let message = use_message();
let custom_request = move |file_list: FileList| {
message.create(
format!("Number of uploaded files: {}", file_list.length()),
MessageVariant::Success,
Default::default(),
);
};
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Upload"</h1>
<Demo>
<Upload custom_request>
<Button>"Upload"</Button>
</Upload>
<DemoCode slot>
{highlight_str!(
r#"
let message = use_message();
let custom_request = move |file_list: FileList| {
message.create(
format!("Number of uploaded files: {}", file_list.length()),
MessageVariant::Success,
Default::default(),
);
};
view!{
<Upload>
<Button>
"upload"
</Button>
</Upload>
}
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Drag to upload"</h3>
<Demo>
<Upload custom_request>
<UploadDragger>"Click or drag a file to this area to upload"</UploadDragger>
</Upload>
<DemoCode slot>
{highlight_str!(
r#"
let message = use_message();
let custom_request = move |file_list: FileList| {
message.create(
format!("Number of uploaded files: {}", file_list.length()),
MessageVariant::Success,
Default::default(),
);
};
view! {
<Upload custom_request>
<UploadDragger>
"Click or drag a file to this area to upload"
</UploadDragger>
</Upload>
}
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"Upload 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>"accept"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"The accept type of upload."</td>
</tr>
<tr>
<td>"multiple"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Allow multiple files to be selected."</td>
</tr>
<tr>
<td>"custom_request"</td>
<td>"Option<Callback<FileList, ()>>"</td>
<td>"Default::default()"</td>
<td>"Customize upload request."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Upload's content."</td>
</tr>
</tbody>
</Table>
<h3>"UploadDragger 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>"children"</td>
<td>"Children"</td>
<td></td>
<td>"UploadDragger's content."</td>
</tr>
</tbody>
</Table>
</div>
}
}

34
demo_markdown/docs/loading_bar/mod.md Normal file
View file

@ -0,0 +1,34 @@
# Loading Bar
<Alert variant=AlertVariant::Warning title="Prerequisite">
"If you want to use loading bar, you need to wrap the component where you call related methods inside LoadingBarProvider and use use_loading_bar to get the API."
</Alert>
```rust demo
let loading_bar = use_loading_bar();
let start = Callback::new(move |_| {
loading_bar.start();
});
let finish = Callback::new(move |_| {
loading_bar.finish();
});
let error = Callback::new(move |_| {
loading_bar.error();
});
view! {
<Space>
<Button on_click=start>"start"</Button>
<Button on_click=finish>"finish"</Button>
<Button on_click=error>"error"</Button>
</Space>
}
```
### LoadingBarProvider Injection Methods
| Name | Type | Description |
| ------ | ----------- | ------------------------------------------------------------ |
| start | `fn(&self)` | Callback function for loading bar to start loading. |
| finish | `fn(&self)` | The callback function when the loading bar finishes loading. |
| error | `fn(&self)` | Callback function for loading bar error. |

36
demo_markdown/docs/menu/mod.md Normal file
View file

@ -0,0 +1,36 @@
# Menu
```rust demo
let value = create_rw_signal(String::from("o"));
view! {
<Menu value>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
}
```
### Menu Props
| Name | Type | Default | Description |
| -------- | --------------------- | -------------------- | --------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the menu element. |
| value | `MaybeSignal<String>` | `Default::default()` | The selected item key of the menu. |
| children | `Children` | | Menu's content. |
### MenuGroup Props
| Name | Type | Default | Description |
| -------- | --------------------- | -------------------- | --------------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the menu group element. |
| label | `String` | | The label of the menu group. |
| children | `Children` | | MenuGroup's content. |
### MenuItem Props
| Name | Type | Default | Description |
| ----- | --------------------- | -------------------- | -------------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the menu item element. |
| label | `MaybeSignal<String>` | `Default::default()` | The label of the menu item. |
| key | `MaybeSignal<String>` | `Default::default()` | The indentifier of the menu item. |

40
demo_markdown/docs/message/mod.md Normal file
View file

@ -0,0 +1,40 @@
# Message
<Alert variant=AlertVariant::Warning title="Prerequisite">
"If you want to use message, you need to wrap the component where you call related methods inside MessageProvider and use use_message to get the API."
</Alert>
```rust demo
let message = use_message();
let success = move |_| {
message.create(
"Success".into(),
MessageVariant::Success,
Default::default(),
);
};
let warning = move |_| {
message.create(
"Warning".into(),
MessageVariant::Warning,
Default::default(),
);
};
let error = move |_| {
message.create("Error".into(), MessageVariant::Error, Default::default());
};
view! {
<Space>
<Button on_click=success>"Success"</Button>
<Button on_click=warning>"Warning"</Button>
<Button on_click=error>"Error"</Button>
</Space>
}
```
### MessageProvider Injection Methods
| Name | Type | Description |
| ------ | ------------------------------------------------------------------------------ | ------------------------ |
| create | `fn(&self, content: String, variant: MessageVariant, options: MessageOptions)` | Use create type message. |

26
demo_markdown/docs/modal/mod.md Normal file
View file

@ -0,0 +1,26 @@
# Modal
```rust demo
let show = create_rw_signal(false);
view! {
<Button on_click=move |_| show.set(true)>"Open Modal"</Button>
<Modal title="title" show>
"hello"
</Modal>
}
```
### Modal Props
| Name | Type | Default | Description |
| -------- | --------------------- | -------------------- | ---------------------- |
| show | `MaybeSignal<bool>` | | Whether to show modal. |
| title | `MaybeSignal<String>` | `Default::default()` | Modal title. |
| children | `Children` | | Modal's content. |
### Modal Slots
| Name | Default | Description |
| ----------- | ------- | --------------- |
| ModalFooter | `None` | Footer content. |

144
demo_markdown/docs/popover/mod.md Normal file
View file

@ -0,0 +1,144 @@
# Popover
```rust demo
view! {
<Space>
<Popover>
<PopoverTrigger slot>
<Button>"Hover"</Button>
</PopoverTrigger>
"Content"
</Popover>
<Popover trigger_type=PopoverTriggerType::Click>
<PopoverTrigger slot>
<Button>"Click"</Button>
</PopoverTrigger>
"Content"
</Popover>
</Space>
}
```
### Placement
```rust demo
use leptos_meta::Style;
view! {
<Style>
".demo-popover .thaw-button { width: 100% } .demo-popover .thaw-popover-trigger { display: block }"
</Style>
<Grid x_gap=8 y_gap=8 cols=3 class="demo-popover">
<GridItem>
<Popover placement=PopoverPlacement::TopStart>
<PopoverTrigger slot>
<Button>"Top Start"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::Top>
<PopoverTrigger slot>
<Button>"Top"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::TopEnd>
<PopoverTrigger slot>
<Button>"Top End"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::LeftStart>
<PopoverTrigger slot>
<Button>"Left Start"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem offset=1>
<Popover placement=PopoverPlacement::RightStart>
<PopoverTrigger slot>
<Button>"Right Start"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::Left>
<PopoverTrigger slot>
<Button>"Left"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem offset=1>
<Popover placement=PopoverPlacement::Right>
<PopoverTrigger slot>
<Button>"Right"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::LeftEnd>
<PopoverTrigger slot>
<Button>"Left End"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem offset=1>
<Popover placement=PopoverPlacement::RightEnd>
<PopoverTrigger slot>
<Button>"Right End"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::BottomStart>
<PopoverTrigger slot>
<Button>"Bottom Start"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::Bottom>
<PopoverTrigger slot>
<Button>"Bottom"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
<GridItem>
<Popover placement=PopoverPlacement::BottomEnd>
<PopoverTrigger slot>
<Button>"Bottom End"</Button>
</PopoverTrigger>
"Content"
</Popover>
</GridItem>
</Grid>
}
```
### Popover Props
| Name | Type | Default | Description |
| --------- | --------------------- | ----------------------- | ----------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Content class of the popover. |
| placement | `PopoverPlacement` | `PopoverPlacement::Top` | Popover placement. |
| children | `Children` | | The content inside popover. |
### Popover Slots
| Name | Default | Description |
| -------------- | ------- | ----------------------------------------------- |
| PopoverTrigger | | The element or component that triggers popover. |

29
demo_markdown/docs/progress/mod.md Normal file
View file

@ -0,0 +1,29 @@
# Progress
```rust demo
let percentage = create_rw_signal(0.0f32);
view! {
<Space vertical=true>
<Progress percentage show_indicator=false/>
<Progress percentage/>
<Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
<Progress percentage color=ProgressColor::Success/>
<Progress percentage color=ProgressColor::Warning/>
<Progress percentage color=ProgressColor::Error/>
<Space>
<Button on_click=move |_| percentage.update(|v| *v -= 10.0)>"-10%"</Button>
<Button on_click=move |_| percentage.update(|v| *v += 10.0)>"+10%"</Button>
</Space>
</Space>
}
```
### Progress Props
| Name | Type | Default | Description |
| ------------------- | ----------------------------------------- | ------------------------------------- | ------------------------------ |
| percentage | `MaybeSignal<f32>` | `Default::default()` | Percentage value. |
| color | `MaybeSignal<ProgressColor>` | `ProgressColor::Primary` | Progress color. |
| show_indicator | `MaybeSignal<bool>` | `true` | Whether to display indicators. |
| indicator_placement | `MaybeSignal<ProgressIndicatorPlacement>` | `ProgressIndicatorPlacement::Outside` | Indicator placement. |

17
demo_markdown/docs/radio/mod.md Normal file
View file

@ -0,0 +1,17 @@
# Radio
```rust demo
let value = create_rw_signal(false);
view! {
<Radio value>"Click"</Radio>
}
```
### Radio Props
| Name | Type | Default | Description |
| -------- | --------------------- | -------------------- | ---------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the radio element. |
| value | `RwSignal<bool>` | `false` | Checked value. |
| children | `Children` | | Radio's content. |

28
demo_markdown/docs/select/mod.md Normal file
View file

@ -0,0 +1,28 @@
# Select
```rust demo
let value = create_rw_signal(None::<String>);
let options = vec![
SelectOption {
label: String::from("RwSignal"),
value: String::from("rw_signal"),
},
SelectOption {
label: String::from("Memo"),
value: String::from("memo"),
},
];
view! {
<Select value options/>
}
```
### Select Props
| Name | Type | Default | Description |
| ------- | ----------------------------------- | -------------------- | ----------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the select element. |
| value | `RwSignal<Option<T>>` | `None` | Checked value. |
| options | `MaybeSignal<Vec<SelectOption<T>>>` | `vec![]` | Options that can be selected. |

17
demo_markdown/docs/skeleton/mod.md Normal file
View file

@ -0,0 +1,17 @@
# Skeleton
```rust demo
view! {
<Skeleton repeat=2 text=true/>
<Skeleton width="60%" text=true/>
}
```
### Skeleton Props
| Name | Type | Default | Description |
| ------ | ----------------------------- | ------- | ----------------- |
| repeat | `MaybeSignal<u32>` | `1` | Repeat frequency. |
| text | `MaybeSignal<bool>` | `false` | Text skeleton. |
| width | `Option<MaybeSignal<String>>` | `None` | Skeleton width. |
| height | `Option<MaybeSignal<String>>` | `None` | Skeleton height. |

56
demo_markdown/docs/slider/mod.md Normal file
View file

@ -0,0 +1,56 @@
# Slider
```rust demo
let value = create_rw_signal(0.0);
view! {
<Slider value/>
}
```
### Step
```rust demo
let value = create_rw_signal(0.0);
view! {
<Slider step=10.0 value/>
}
```
## Slider Label
```rust demo
let value = create_rw_signal(0.0);
view! {
<Slider value max=10.0 step=1.0>
<SliderLabel value=0.0>
"0"
</SliderLabel>
<SliderLabel value=5.0>
"5"
</SliderLabel>
<SliderLabel value=10.0>
"10"
</SliderLabel>
</Slider>
}
```
### Slider Props
| Name | Type | Default | Description |
| -------- | --------------------- | -------------------- | ----------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the slider element. |
| value | `MaybeSignal<f64>` | `Default::default()` | Value of the slider. |
| max | `MaybeSignal<f64>` | `100` | Max value of the slider. |
| step | `MaybeSignal<f64>` | `Default::default()` | The step in which value is incremented. |
| children | `Option<Children>` | `None` | Slider's content. |
### SliderLabel props
| Name | Type | Default | Description |
| -------- | ------------------ | ------- | ------------------------------------ |
| value | `MaybeSignal<f64>` | | Value at which label will be placed. |
| children | `Children` | | Content of the lable. |

49
demo_markdown/docs/space/mod.md Normal file
View file

@ -0,0 +1,49 @@
# Space
```rust demo
view! {
<Space>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
}
```
### Vertical
```rust demo
view! {
<Space vertical=true>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
}
```
### Gap
```rust demo
view! {
<Space gap=SpaceGap::Large>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<Space gap=SpaceGap::WH(36, 36)>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
}
```
### Space Props
| Name | Type | Default | Description |
| -------- | --------------------- | -------------------- | ---------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the space element. |
| vertical | `bool` | `false` | Whether to lay out vertically. |
| gap | `SpaceGap` | `SpaceGap::Medium` | Space's gap. |
| children | `Children` | | Space's content. |

27
demo_markdown/docs/spinner/mod.md Normal file
View file

@ -0,0 +1,27 @@
# Spinner
```rust demo
view! {
<Spinner/>
}
```
### Size
```rust demo
view! {
<Space>
<Spinner size=SpinnerSize::Tiny/>
<Spinner size=SpinnerSize::Small/>
<Spinner size=SpinnerSize::Medium/>
<Spinner size=SpinnerSize::Large/>
</Space>
}
```
### Spinner Props
| Name | Type | Default | Description |
| ----- | -------------------------- | --------------------- | ------------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Additional classes for the spinner element. |
| size | `MaybeSignal<SpinnerSize>` | `SpinnerSize::Medium` | Spinner size. |

16
demo_markdown/docs/switch/mod.md Normal file
View file

@ -0,0 +1,16 @@
# Switch
```rust demo
let value = create_rw_signal(false);
view! {
<Switch value />
}
```
### Switch Props
| Name | Type | Default | Description |
| ----- | --------------------- | -------------------- | ----------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the switch element. |
| value | `RwSignal<bool>` | `Default::default()` | Switch's value. |

37
demo_markdown/docs/table/mod.md Normal file
View file

@ -0,0 +1,37 @@
# Table
```rust demo
view! {
<Table>
<thead>
<tr>
<th>"tag"</th>
<th>"count"</th>
<th>"date"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"div"</td>
<td>"2"</td>
<td>"2023-10-08"</td>
</tr>
<tr>
<td>"span"</td>
<td>"2"</td>
<td>"2023-10-08"</td>
</tr>
</tbody>
</Table>
}
```
### Table Props
| Name | Type | Default | Description |
| ------------- | --------------------- | -------------------- | ------------------------------------------------------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the table element. |
| style | `MaybeSignal<String>` | `Default::default()` | Table's style. |
| single_row | `RwSignal<bool>` | `true` | Whether columns are not divided. If the prop is true, table cell has no border-right. |
| single_column | `RwSignal<bool>` | `false` | Whether rows are not divided. If the prop is true, table cell has no border-bottom. |
| children | `Children` | | Table's content. |

33
demo_markdown/docs/tabs/mod.md Normal file
View file

@ -0,0 +1,33 @@
# Tabs
```rust demo
let value = create_rw_signal(String::from("apple"));
view! {
<Tabs value>
<Tab key="apple" label="Apple">
"apple"
</Tab>
<Tab key="pear" label="Pear">
"pear"
</Tab>
</Tabs>
}
```
### Tabs Props
| Name | Type | Default | Description |
| -------- | --------------------- | --------------------- | --------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the tabs element. |
| value | `RwSignal<String>` | `TagVariant::Default` | Tabs value. |
| children | `Children` | | Tabs content. |
### Tab Props
| Name | Type | Default | Description |
| -------- | --------------------- | -------------------- | -------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the tab element. |
| key | `String` | | The indentifier of the tab. |
| label | `String` | | The label of the tab. |
| children | `Children` | | Tabs content. |

20
demo_markdown/docs/tag/mod.md Normal file
View file

@ -0,0 +1,20 @@
# Tag
```rust demo
view! {
<Space>
<Tag>"default"</Tag>
<Tag variant=TagVariant::Success>"success"</Tag>
<Tag variant=TagVariant::Warning>"warning"</Tag>
<Tag variant=TagVariant::Error>"error"</Tag>
</Space>
}
```
### Tag Props
| Name | Type | Default | Description |
| -------- | ------------------------- | --------------------- | -------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the tag element. |
| variant | `MaybeSignal<TagVariant>` | `TagVariant::Default` | Tag's variant. |
| children | `Children` | | Tag's content. |

63
demo_markdown/docs/theme/mod.md vendored Normal file
View file

@ -0,0 +1,63 @@
# Theme
### ThemeProvider
```rust demo
let theme = create_rw_signal(Theme::light());
view! {
<ThemeProvider theme>
<Card>
<Space>
<Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
<Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
</Space>
</Card>
</ThemeProvider>
}
```
### GlobalStyle
You can use GlobalStyle to sync common global style to the body element.
```rust
let theme = create_rw_signal(Theme::light());
view! {
<ThemeProvider theme>
<GlobalStyle />
"..."
</ThemeProvider>
}
```
### Customize Theme
```rust demo
let theme = create_rw_signal(Theme::light());
let on_customize_theme = move |_| {
theme.update(|theme| {
theme.common.color_primary = "#f5222d".to_string();
theme.common.color_primary_hover = "#ff4d4f".to_string();
theme.common.color_primary_active = "#cf1322".to_string();
});
};
view! {
<ThemeProvider theme>
<Card>
<Space>
<Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
<Button on_click=on_customize_theme>"Customize Theme"</Button>
</Space>
</Card>
</ThemeProvider>
}
```
### ThemeProvider Props
| Name | Type | Default | Description |
| ----- | ------------------------- | -------------------- | ----------- |
| theme | `Option<RwSignal<Theme>>` | `Default::default()` | Theme. |

18
demo_markdown/docs/time_picker/mod.md Normal file
View file

@ -0,0 +1,18 @@
# Time Picker
```rust demo
use thaw::chrono::prelude::*;
let value = create_rw_signal(Some(Local::now().time()));
view! {
<TimePicker value />
}
```
## TimePicker Props
| Name | Type | Default | Description |
| ----- | ----------------------------- | -------------------- | ---------------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the time picker element. |
| value | `RwSignal<Option<NaiveTime>>` | `Default::default()` | Set the TimePicker value. |

18
demo_markdown/docs/typography/mod.md Normal file
View file

@ -0,0 +1,18 @@
# Typography
```rust demo
view! {
<Space>
<Text>"text"</Text>
<Text code=true>"code"</Text>
</Space>
}
```
## Text Props
| Name | Type | Default | Description |
| -------- | --------------------- | -------------------- | --------------------------------------- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the text element. |
| code | `bool` | `false` | Use the code tag and style. |
| children | `Children` | | Text's content. |

34
demo_markdown/src/lib.rs
View file

@ -7,7 +7,34 @@ use syn::ItemFn;
#[proc_macro]
pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenStream {
let file_list = vec![("UploadMdPage", include_str!("../docs/upload/mod.md"))];
let file_list = vec![
("LoadingBarMdPage", include_str!("../docs/loading_bar/mod.md")),
("MenuMdPage", include_str!("../docs/menu/mod.md")),
("MessageMdPage", include_str!("../docs/message/mod.md")),
("ModalMdPage", include_str!("../docs/modal/mod.md")),
("PopoverMdPage", include_str!("../docs/popover/mod.md")),
("ProgressMdPage", include_str!("../docs/progress/mod.md")),
("RadioMdPage", include_str!("../docs/radio/mod.md")),
("SelectMdPage", include_str!("../docs/select/mod.md")),
("SkeletonMdPage", include_str!("../docs/skeleton/mod.md")),
("SliderMdPage", include_str!("../docs/slider/mod.md")),
("SpaceMdPage", include_str!("../docs/space/mod.md")),
("SpinnerMdPage", include_str!("../docs/spinner/mod.md")),
("SwitchMdPage", include_str!("../docs/switch/mod.md")),
("TableMdPage", include_str!("../docs/table/mod.md")),
("TabsMdPage", include_str!("../docs/tabs/mod.md")),
("TagMdPage", include_str!("../docs/tag/mod.md")),
("ThemeMdPage", include_str!("../docs/theme/mod.md")),
(
"TimePickerMdPage",
include_str!("../docs/time_picker/mod.md"),
),
(
"TypographyMdPage",
include_str!("../docs/typography/mod.md"),
),
("UploadMdPage", include_str!("../docs/upload/mod.md")),
];
let mut fn_list = vec![];
@ -31,7 +58,10 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
demo
)
})
.map(|demo| syn::parse_str::<ItemFn>(&demo).unwrap())
.map(|demo| {
syn::parse_str::<ItemFn>(&demo)
.expect(&format!("Cannot be resolved as a function: \n {demo}"))
})
.collect();
fn_list.push(quote! {

15
demo_markdown/src/markdown/mod.rs
View file

@ -6,6 +6,7 @@ use comrak::{
};
use proc_macro2::{Ident, Span, TokenStream};
use quote::quote;
use syn::ItemMacro;
pub fn parse_markdown(md_text: &str) -> Result<(TokenStream, Vec<String>), String> {
let mut demos: Vec<String> = vec![];
@ -35,7 +36,19 @@ fn iter_nodes<'a>(node: &'a AstNode<'a>, demos: &mut Vec<String>) -> TokenStream
NodeValue::DescriptionTerm => quote!("DescriptionTerm todo!!!"),
NodeValue::DescriptionDetails => quote!("DescriptionDetails todo!!!"),
NodeValue::CodeBlock(node_code_block) => code_block::to_tokens(node_code_block, demos),
NodeValue::HtmlBlock(_) => quote!("HtmlBlock todo!!!"),
NodeValue::HtmlBlock(node_html_block) => {
let html =
syn::parse_str::<ItemMacro>(&format!("view! {{ {} }}", node_html_block.literal))
.expect(&format!(
"Cannot be resolved as a macro: \n {}",
node_html_block.literal
));
quote!(
{
#html
}
)
}
NodeValue::Paragraph => quote!(
<p>
#(#children)*