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
|
|
|
}
|
2023-10-05 11:06:43 +08:00
|
|
|
|
|
|
|
#[component]
|
|
|
|
pub fn LoadingButton() -> impl IntoView {
|
|
|
|
let loading = create_rw_signal(false);
|
2023-10-05 11:52:18 +08:00
|
|
|
let on_click = move |_| {
|
|
|
|
loading.set(true);
|
|
|
|
set_timeout(
|
|
|
|
move || {
|
|
|
|
loading.set(false);
|
|
|
|
},
|
|
|
|
std::time::Duration::new(2, 0),
|
|
|
|
);
|
|
|
|
};
|
2023-10-05 11:06:43 +08:00
|
|
|
view! {
|
2023-10-05 11:52:18 +08:00
|
|
|
<h3>"Loading"</h3>
|
2023-10-05 11:06:43 +08:00
|
|
|
<Demo>
|
|
|
|
<Space>
|
2023-10-05 11:52:18 +08:00
|
|
|
<Button loading on_click icon=icondata::AiIcon::AiCloseOutlined>
|
|
|
|
"Click Me"
|
2023-10-05 11:06:43 +08:00
|
|
|
</Button>
|
2023-10-05 11:52:18 +08:00
|
|
|
<Button loading on_click>
|
|
|
|
"Click Me"
|
2023-10-05 11:06:43 +08:00
|
|
|
</Button>
|
|
|
|
</Space>
|
2023-10-08 09:28:13 +08:00
|
|
|
<DemoCode
|
|
|
|
slot
|
|
|
|
html=highlight_str!(
|
|
|
|
r#"
|
2023-10-05 11:06:43 +08:00
|
|
|
let loading = create_rw_signal(false);
|
2023-10-05 11:52:18 +08:00
|
|
|
let on_click = move |_| {
|
|
|
|
loading.set(true);
|
|
|
|
set_timeout(
|
|
|
|
move || {
|
|
|
|
loading.set(false);
|
|
|
|
},
|
|
|
|
std::time::Duration::new(2, 0),
|
|
|
|
);
|
|
|
|
};
|
2023-10-05 11:06:43 +08:00
|
|
|
view! {
|
2023-10-05 11:52:18 +08:00
|
|
|
<Space>
|
|
|
|
<Button loading on_click icon=icondata::AiIcon::AiCloseOutlined>
|
|
|
|
"Click Me"
|
|
|
|
</Button>
|
|
|
|
<Button loading on_click>
|
|
|
|
"Click Me"
|
|
|
|
</Button>
|
|
|
|
</Space>
|
2023-10-05 11:06:43 +08:00
|
|
|
}
|
2023-10-08 09:28:13 +08:00
|
|
|
"#,
|
|
|
|
"rust"
|
|
|
|
)
|
|
|
|
>
|
|
|
|
|
2023-10-05 11:06:43 +08:00
|
|
|
""
|
|
|
|
</DemoCode>
|
|
|
|
</Demo>
|
|
|
|
}
|
|
|
|
}
|