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

feat: mobile demo

Browse source
This commit is contained in:
luoxiao 2023-09-21 22:32:20 +08:00
parent 1f27e44014
commit 3be21b4e03
4 changed files with 46 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
gh-pages/src/app.rs
View file

@ -11,9 +11,7 @@ pub fn App() -> impl IntoView {
<Route path="/components" view=ComponentsPage> <Route path="/components" view=ComponentsPage>
<Route path="/menu" view=MenuPage /> <Route path="/menu" view=MenuPage />
<Route path="/slider" view=SliderPage /> <Route path="/slider" view=SliderPage />
<Route path="/tabbar" view=|| view! { <Route path="/tabbar" view=TabbarPage />
<MobilePage path="/melt-ui?path=/mobile/tabbar" />
} />
<Route path="/nav-bar" view=|| view! { <Route path="/nav-bar" view=|| view! {
<MobilePage path="/melt-ui?path=/mobile/nav-bar" /> <MobilePage path="/melt-ui?path=/mobile/nav-bar" />
} /> } />
@ -28,7 +26,7 @@ pub fn App() -> impl IntoView {
<Route path="/tabs" view=TabsPage /> <Route path="/tabs" view=TabsPage />
<Route path="/select" view=SelectPage /> <Route path="/select" view=SelectPage />
</Route> </Route>
<Route path="/mobile/tabbar" view=TabbarPage /> <Route path="/mobile/tabbar" view=TabbarDemoPage />
<Route path="/mobile/nav-bar" view=NavBarPage /> <Route path="/mobile/nav-bar" view=NavBarPage />
<Route path="/mobile/toast" view=ToastPage /> <Route path="/mobile/toast" view=ToastPage />
</Routes> </Routes>

2
gh-pages/src/components/site_header.rs
View file

@ -6,7 +6,7 @@ use melt_ui::*;
pub fn SiteHeader() -> impl IntoView { pub fn SiteHeader() -> impl IntoView {
view! { view! {
<LayoutHeader <LayoutHeader
style="height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #efeff6" style="height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #e5e8eb"
> >
<span style="cursor: pointer" on:click=move |_| { <span style="cursor: pointer" on:click=move |_| {
let navigate = use_navigate(); let navigate = use_navigate();

4
gh-pages/src/pages/mobile.rs
View file

@ -3,8 +3,8 @@ use leptos::*;
#[component] #[component]
pub fn MobilePage(path: &'static str) -> impl IntoView { pub fn MobilePage(path: &'static str) -> impl IntoView {
view! { view! {
<div style="height: 100vh; display: flex; align-items: center; justify-content: center; background: #eff2f5"> <div style="height: 100vh; width: 400px; text-align: center">
<iframe src=path style="width: 360px; height: 640px; background-color: #fff; border: none; border-radius: 16px; border: 1px solid #e1e1e1"/> <iframe src=path style="margin-top: 5vh; width: 350px; height: 680px; border-radius: 16px; border: 1px solid #eee; box-shadow: #ebedf0 0 4px 12px;"/>
</div> </div>
} }
} }

41
gh-pages/src/pages/tabbar/mod.rs
View file

@ -1,8 +1,49 @@
use crate::{
components::{Demo, DemoCode},
pages::MobilePage,
};
use indoc::indoc;
use leptos::*; use leptos::*;
use melt_ui::mobile::*; use melt_ui::mobile::*;
#[component] #[component]
pub fn TabbarPage() -> impl IntoView { pub fn TabbarPage() -> impl IntoView {
view! {
<div style="display: flex">
<div style="width: 896px; margin: 0 auto;">
<h1>"Tabbar"</h1>
<Demo>
""
<DemoCode slot>
{
indoc!(r#"
let selected = create_rw_signal(String::from("o"));
<Tabbar selected>
<TabbarItem name="a">
"and"
</TabbarItem>
<TabbarItem name="i">
"if"
</TabbarItem>
<TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
"or"
</TabbarItem>
</Tabbar>
"#)
}
</DemoCode>
</Demo>
</div>
<div>
<MobilePage path="/melt-ui?path=/mobile/nav-bar" />
</div>
</div>
}
}
#[component]
pub fn TabbarDemoPage() -> impl IntoView {
let selected = create_rw_signal(String::from("o")); let selected = create_rw_signal(String::from("o"));
view! { view! {
<div style="height: 100vh; background: #f5f5f5"> <div style="height: 100vh; background: #f5f5f5">