adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-03-13 05:59: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

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 http-equiv="X-UA-Compatible" content="IE=edge">
<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" />
</head>
<body>

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

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 image;
mod input;
mod layout;
mod menu;
pub mod mobile;
mod modal;
@ -20,6 +21,7 @@ pub use button::*;
pub use checkbox::*;
pub use image::*;
pub use input::*;
pub use layout::*;
pub use menu::*;
pub use modal::*;
pub use progress::*;