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

feat: add skeleton and switch component demo

Browse source
This commit is contained in:
luoxiao 2023-10-20 23:42:08 +08:00
parent 95edd0d4e2
commit c5ecc472cd
6 changed files with 78 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demo/src/app.rs
View file

@ -37,6 +37,8 @@ pub fn App() -> impl IntoView {
<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>
<Route path="/mobile/tabbar" view=TabbarDemoPage/>
<Route path="/mobile/nav-bar" view=NavBarDemoPage/>

8
demo/src/pages/components.rs
View file

@ -137,6 +137,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "slider".into(),
label: "Slider".into(),
},
MenuItemOption {
value: "switch".into(),
label: "Switch".into(),
},
],
},
MenuGroupOption {
@ -184,6 +188,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "modal".into(),
label: "Modal".into(),
},
MenuItemOption {
value: "skeleton".into(),
label: "Skeleton".into(),
},
],
},
MenuGroupOption {

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

@ -21,8 +21,10 @@ mod modal;
mod nav_bar;
mod radio;
mod select;
mod skeleton;
mod slider;
mod space;
mod switch;
mod tabbar;
mod table;
mod tabs;
@ -51,8 +53,10 @@ pub use modal::*;
pub use nav_bar::*;
pub use radio::*;
pub use select::*;
pub use skeleton::*;
pub use slider::*;
pub use space::*;
pub use switch::*;
pub use tabbar::*;
pub use table::*;
pub use tabs::*;

30
demo/src/pages/skeleton/mod.rs Normal file
View file

@ -0,0 +1,30 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use prisms::highlight_str;
#[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
html=highlight_str!(
r#"
<Skeleton repeat=2 text=true />
<Skeleton width="60%" text=true />
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
</div>
}
}

32
demo/src/pages/switch/mod.rs Normal file
View file

@ -0,0 +1,32 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use prisms::highlight_str;
#[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
html=highlight_str!(
r#"
let value = create_rw_signal(false);
view! {
<Switch value />
}
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
</div>
}
}

3
src/skeleton/mod.rs
View file

@ -1,6 +1,6 @@
mod theme;
use crate::{theme::use_theme, Theme};
use crate::{mount_style, theme::use_theme, Theme};
use leptos::*;
pub use theme::SkeletionTheme;
@ -11,6 +11,7 @@ pub fn Skeleton(
#[prop(optional, into)] width: Option<MaybeSignal<String>>,
#[prop(optional, into)] height: Option<MaybeSignal<String>>,
) -> impl IntoView {
mount_style("skeleton", include_str!("./skeleton.css"));
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();