adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-03-13 14:09:49 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

✨ feat: add layout component

Browse source
This commit is contained in:
luoxiao 2023-06-18 17:05:35 +08:00
parent b50acd1e55
commit d7105e6d9f
7 changed files with 89 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"rust-analyzer.check.targets": ["wasm32-unknown-unknown"],
}

2
gh-pages/index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Melt UI</title>
<link data-trunk rel="css" href="./src/assets/css/index.css" /> <link data-trunk rel="css" href="./src/assets/css/index.css" />
</head> </head>
<body> <body>

52
gh-pages/src/pages/home.rs
View file

@ -12,37 +12,27 @@ pub fn Home(cx: Scope) -> impl IntoView {
_ = navigate(&path.get_value(), Default::default()); _ = navigate(&path.get_value(), Default::default());
}); });
} }
let (theme, set_theme) = create_signal(cx, Theme::light());
provide_context(cx, theme);
let (count, set_count) = create_signal(cx, 0.0);
let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
view! { cx, view! { cx,
<Button on:click=move |_| { <Layout position=LayoutPosition::ABSOLUTE>
let navigate = use_navigate(cx); <LayoutHeader
_ = navigate("/components/menu", Default::default()); style="height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #efeff6"
}> >
"components" "Melt UI"
</Button> <Button type_=ButtonType::TEXT on:click=move |_| {
<hr /> _ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
<Space> }>
<Button "Github"
on:click=move |_| set_theme.update(move |value| *value = Theme::dark()) </Button>
type_=button_type </LayoutHeader>
> <Layout position=LayoutPosition::ABSOLUTE style="top: 54px; display: flex; align-items: center; justify-content: center; flex-direction: column;">
"theme" <p>"A Leptos UI Library"</p>
</Button> <Button on:click=move |_| {
<Button on:click=move |_| set_button_type.update(move |value| *value = ButtonType::PRIMARY)> let navigate = use_navigate(cx);
"click" _ = navigate("/components/menu", Default::default());
</Button> }>
<Button "Read the docs"
on:click=move |_| set_count.update(move |value| *value += 1.0) </Button>
type_=button_type </Layout>
> </Layout>
"click"
</Button>
{move || count.get()}
<Progress percentage=count/>
</Space>
} }
} }

11
src/layout/layout.css Normal file
View file

@ -0,0 +1,11 @@
.melt-layout {
flex: auto;
}
.melt-layout--absolute-positioned {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

14
src/layout/layout_header.rs Normal file
View file

@ -0,0 +1,14 @@
use leptos::*;
#[component]
pub fn LayoutHeader(
cx: Scope,
#[prop(optional, into)] style: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
view! { cx,
<div class="melt-layout-header" style=move || style.get()>
{ children(cx) }
</div>
}
}

37
src/layout/mod.rs Normal file
View file

@ -0,0 +1,37 @@
mod layout_header;
use crate::utils::mount_style::mount_style;
pub use layout_header::*;
use leptos::*;
use stylers::style_sheet_str;
#[derive(Default, PartialEq)]
pub enum LayoutPosition {
#[default]
STATIC,
ABSOLUTE,
}
impl LayoutPosition {
pub fn as_str(&self) -> &str {
match self {
LayoutPosition::STATIC => "static",
LayoutPosition::ABSOLUTE => "absolute",
}
}
}
#[component]
pub fn Layout(
cx: Scope,
#[prop(optional, into)] style: MaybeSignal<String>,
#[prop(optional)] position: LayoutPosition,
children: Children,
) -> impl IntoView {
let class_name = mount_style("layout", || style_sheet_str!("./src/layout/layout.css"));
view! { cx, class=class_name,
<div class="melt-layout" class=("melt-layout--absolute-positioned", position == LayoutPosition::ABSOLUTE) style=move || style.get()>
{ children(cx) }
</div>
}
}

2
src/lib.rs
View file

@ -4,6 +4,7 @@ mod checkbox;
mod components; mod components;
mod image; mod image;
mod input; mod input;
mod layout;
mod menu; mod menu;
pub mod mobile; pub mod mobile;
mod modal; mod modal;
@ -20,6 +21,7 @@ pub use button::*;
pub use checkbox::*; pub use checkbox::*;
pub use image::*; pub use image::*;
pub use input::*; pub use input::*;
pub use layout::*;
pub use menu::*; pub use menu::*;
pub use modal::*; pub use modal::*;
pub use progress::*; pub use progress::*;