thaw/gh-pages/src/pages/button/mod.rs

185 lines
5.8 KiB
Rust
Raw Normal View History

2023-09-17 22:19:54 +08:00
use crate::components::{Demo, DemoCode};
2023-06-13 12:43:15 +08:00
use leptos::*;
use melt_ui::*;
2023-10-04 00:11:38 +08:00
use prisms::highlight_str;
2023-06-13 12:43:15 +08:00
#[component]
2023-08-29 09:11:22 +08:00
pub fn ButtonPage() -> impl IntoView {
view! {
2023-09-17 22:19:54 +08:00
<div style="width: 896px; margin: 0 auto;">
<h1>"Button"</h1>
<Demo>
2023-10-04 22:25:12 +08:00
<Space>
2023-10-08 09:28:13 +08:00
<Button type_=ButtonType::PRIMARY>"PRIMARY"</Button>
<Button type_=ButtonType::SOLID>"SOLID"</Button>
<Button type_=ButtonType::TEXT>"TEXT"</Button>
<Button type_=ButtonType::LINK>"LINK"</Button>
2023-10-04 22:25:12 +08:00
</Space>
2023-10-08 09:28:13 +08:00
<DemoCode
slot
html=highlight_str!(
r#"
2023-10-04 00:11:38 +08:00
<Button type_=ButtonType::PRIMARY>
"PRIMARY"
</Button>
<Button type_=ButtonType::SOLID>
"SOLID"
</Button>
<Button type_=ButtonType::TEXT>
"TEXT"
</Button>
<Button type_=ButtonType::LINK>
"LINK"
</Button>
2023-10-08 09:28:13 +08:00
"#,
"rust"
)
>
2023-10-04 00:11:38 +08:00
""
2023-09-17 22:19:54 +08:00
</DemoCode>
</Demo>
<h3>"color"</h3>
<Demo>
2023-10-04 22:25:12 +08:00
<Space>
2023-10-08 09:28:13 +08:00
<Button color=ButtonColor::PRIMARY>"PRIMARY Color"</Button>
<Button color=ButtonColor::SUCCESS>"SUCCESS Color"</Button>
<Button color=ButtonColor::WARNING>"WARNING Color"</Button>
<Button color=ButtonColor::ERROR>"ERROR Color"</Button>
2023-10-04 22:25:12 +08:00
</Space>
2023-10-08 09:28:13 +08:00
<DemoCode
slot
html=highlight_str!(
r#"
2023-10-04 00:11:38 +08:00
<Button color=ButtonColor::PRIMARY>
"PRIMARY Color"
</Button>
<Button color=ButtonColor::SUCCESS>
"SUCCESS Color"
</Button>
<Button color=ButtonColor::WARNING>
"WARNING Color"
</Button>
<Button color=ButtonColor::ERROR>
"ERROR Color"
</Button>
2023-10-08 09:28:13 +08:00
"#,
"rust"
)
>
2023-10-04 00:11:38 +08:00
""
2023-09-17 22:19:54 +08:00
</DemoCode>
</Demo>
<h3>"icon"</h3>
<Demo>
2023-10-04 22:25:12 +08:00
<Space>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
</Button>
2023-10-08 09:28:13 +08:00
<Button
color=ButtonColor::ERROR
icon=icondata::AiIcon::AiCloseOutlined
round=true
/>
2023-10-04 22:25:12 +08:00
</Space>
2023-10-08 09:28:13 +08:00
<DemoCode
slot
html=highlight_str!(
r#"
2023-10-04 00:11:38 +08:00
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
</Button>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
2023-10-08 09:28:13 +08:00
"#,
"rust"
)
>
2023-10-04 00:11:38 +08:00
""
2023-09-17 22:19:54 +08:00
</DemoCode>
</Demo>
2023-10-08 09:28:13 +08:00
<LoadingButton/>
2023-09-17 22:19:54 +08:00
<h3>"style"</h3>
<Demo>
2023-10-04 22:25:12 +08:00
<Space>
<Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button>
</Space>
2023-10-08 09:28:13 +08:00
<DemoCode
slot
html=highlight_str!(
r#"
2023-10-04 00:11:38 +08:00
<Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button>
2023-10-08 09:28:13 +08:00
"#,
"rust"
)
>
2023-10-04 00:11:38 +08:00
""
2023-09-17 22:19:54 +08:00
</DemoCode>
</Demo>
2023-06-13 12:43:15 +08:00
</div>
}
2023-06-30 22:25:41 +08:00
}
#[component]
pub fn LoadingButton() -> impl IntoView {
let loading = create_rw_signal(false);
let on_click = move |_| {
loading.set(true);
set_timeout(
move || {
loading.set(false);
},
std::time::Duration::new(2, 0),
);
};
view! {
<h3>"Loading"</h3>
<Demo>
<Space>
<Button loading on_click icon=icondata::AiIcon::AiCloseOutlined>
"Click Me"
</Button>
<Button loading on_click>
"Click Me"
</Button>
</Space>
2023-10-08 09:28:13 +08:00
<DemoCode
slot
html=highlight_str!(
r#"
let loading = create_rw_signal(false);
let on_click = move |_| {
loading.set(true);
set_timeout(
move || {
loading.set(false);
},
std::time::Duration::new(2, 0),
);
};
view! {
<Space>
<Button loading on_click icon=icondata::AiIcon::AiCloseOutlined>
"Click Me"
</Button>
<Button loading on_click>
"Click Me"
</Button>
</Space>
}
2023-10-08 09:28:13 +08:00
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
}
}