adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-23 06:19:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: avatar, badge, breadcrumb, button, divider

Browse source
This commit is contained in:
luoxiao 2023-11-14 17:17:49 +08:00
parent 3fd3e1a7ac
commit c46f8f9eac
5 changed files with 155 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode}; use crate::components::{Demo, DemoCode};
use leptos::*; use leptos::*;
use thaw::*;
use prisms::highlight_str; use prisms::highlight_str;
use thaw::*;
#[component] #[component]
pub fn AvatarPage() -> impl IntoView { pub fn AvatarPage() -> impl IntoView {
@ -11,7 +11,7 @@ pub fn AvatarPage() -> impl IntoView {
<Demo> <Demo>
<Space> <Space>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg"/> <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg"/>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" circle=true/> <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" round=true/>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/> <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/>
</Space> </Space>
<DemoCode <DemoCode
@ -20,7 +20,7 @@ pub fn AvatarPage() -> impl IntoView {
r#" r#"
<Space> <Space>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg"/> <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg"/>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" circle=true/> <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" round=true/>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/> <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/>
</Space> </Space>
"#, "#,
@ -31,6 +31,37 @@ pub fn AvatarPage() -> impl IntoView {
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Avatar 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>"src"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Avatar's image source."</td>
</tr>
<tr>
<td>"round"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether to display a rounded avatar."</td>
</tr>
<tr>
<td>"size"</td>
<td>"MaybeSignal<u16>"</td>
<td>"30"</td>
<td>"Avatar's size."</td>
</tr>
</tbody>
</Table>
</div> </div>
} }
} }

8
demo/src/pages/badge/mod.rs
View file

@ -94,7 +94,7 @@ pub fn BadgePage() -> impl IntoView {
<tr> <tr>
<td>"variant"</td> <td>"variant"</td>
<td>"MaybeSignal<BadgeVariant>"</td> <td>"MaybeSignal<BadgeVariant>"</td>
<td>"BadgeVariant::"</td> <td>"BadgeVariant::Error"</td>
<td>"Badge variant."</td> <td>"Badge variant."</td>
</tr> </tr>
<tr> <tr>
@ -103,6 +103,12 @@ pub fn BadgePage() -> impl IntoView {
<td>"false"</td> <td>"false"</td>
<td>"Show badge as dot."</td> <td>"Show badge as dot."</td>
</tr> </tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Badge's content."</td>
</tr>
</tbody> </tbody>
</Table> </Table>
</div> </div>

44
demo/src/pages/breadcrumb/mod.rs
View file

@ -67,6 +67,50 @@ pub fn BreadcrumbPage() -> impl IntoView {
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Breadcrumb 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>"separator"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""/""#</td>
<td>"Breadcrumb separator."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Breadcrumb's content."</td>
</tr>
</tbody>
</Table>
<h3>"BreadcrumbItem 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>"BreadcrumbItem's content."</td>
</tr>
</tbody>
</Table>
</div> </div>
} }
} }

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

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode}; use crate::components::{Demo, DemoCode};
use leptos::*; use leptos::*;
use thaw::*;
use prisms::highlight_str; use prisms::highlight_str;
use thaw::*;
#[component] #[component]
pub fn ButtonPage() -> impl IntoView { pub fn ButtonPage() -> impl IntoView {
@ -121,6 +121,73 @@ pub fn ButtonPage() -> impl IntoView {
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Button Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"style"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Button's style."</td>
</tr>
<tr>
<td>"variant"</td>
<td>"MaybeSignal<ButtonVariant>"</td>
<td>"ButtonVariant::Primary"</td>
<td>"Button's variant."</td>
</tr>
<tr>
<td>"color"</td>
<td>"MaybeSignal<ButtonColor>"</td>
<td>"ButtonColor::Primary"</td>
<td>"Button's color."</td>
</tr>
<tr>
<td>"round"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether the button shows rounded corners."</td>
</tr>
<tr>
<td>"icon"</td>
<td>"Option<Icon>"</td>
<td>"None"</td>
<td>"The icon of the button."</td>
</tr>
<tr>
<td>"loading"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether the button shows the loading status."</td>
</tr>
<tr>
<td>"disabled"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether the button is disabled."</td>
</tr>
<tr>
<td>"on_click"</td>
<td>"Option<Callback<ev::MouseEvent>>"</td>
<td>"None"</td>
<td>"Listen for button click events."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Button's content."</td>
</tr>
</tbody>
</Table>
</div> </div>
} }
} }

4
demo/src/pages/divider/mod.rs
View file

@ -1,13 +1,13 @@
use crate::components::{Demo, DemoCode}; use crate::components::{Demo, DemoCode};
use leptos::*; use leptos::*;
use thaw::*;
use prisms::highlight_str; use prisms::highlight_str;
use thaw::*;
#[component] #[component]
pub fn DividerPage() -> impl IntoView { pub fn DividerPage() -> impl IntoView {
view! { view! {
<div style="width: 896px; margin: 0 auto;"> <div style="width: 896px; margin: 0 auto;">
<h1>"Checkbox"</h1> <h1>"Divider"</h1>
<Demo> <Demo>
"top" "top"
<Divider /> <Divider />