From d7105e6d9f7a14785521b730584cc6c14117aa3c Mon Sep 17 00:00:00 2001 From: luoxiao Date: Sun, 18 Jun 2023 17:05:35 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20layout=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 3 +++ gh-pages/index.html | 2 +- gh-pages/src/pages/home.rs | 52 +++++++++++++++---------------------- src/layout/layout.css | 11 ++++++++ src/layout/layout_header.rs | 14 ++++++++++ src/layout/mod.rs | 37 ++++++++++++++++++++++++++ src/lib.rs | 2 ++ 7 files changed, 89 insertions(+), 32 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/layout/layout.css create mode 100644 src/layout/layout_header.rs create mode 100644 src/layout/mod.rs diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..7561e19 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "rust-analyzer.check.targets": ["wasm32-unknown-unknown"], +} \ No newline at end of file diff --git a/gh-pages/index.html b/gh-pages/index.html index 7dd8246..7640165 100644 --- a/gh-pages/index.html +++ b/gh-pages/index.html @@ -4,7 +4,7 @@ - Document + Melt UI diff --git a/gh-pages/src/pages/home.rs b/gh-pages/src/pages/home.rs index 4022cce..7e7cdab 100644 --- a/gh-pages/src/pages/home.rs +++ b/gh-pages/src/pages/home.rs @@ -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, - -
- - - - - {move || count.get()} - - - + + + "Melt UI" + + + +

"A Leptos UI Library"

+ + + } } diff --git a/src/layout/layout.css b/src/layout/layout.css new file mode 100644 index 0000000..214a701 --- /dev/null +++ b/src/layout/layout.css @@ -0,0 +1,11 @@ +.melt-layout { + flex: auto; +} + +.melt-layout--absolute-positioned { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} diff --git a/src/layout/layout_header.rs b/src/layout/layout_header.rs new file mode 100644 index 0000000..eafa6f9 --- /dev/null +++ b/src/layout/layout_header.rs @@ -0,0 +1,14 @@ +use leptos::*; + +#[component] +pub fn LayoutHeader( + cx: Scope, + #[prop(optional, into)] style: MaybeSignal, + children: Children, +) -> impl IntoView { + view! { cx, +
+ { children(cx) } +
+ } +} diff --git a/src/layout/mod.rs b/src/layout/mod.rs new file mode 100644 index 0000000..a04215d --- /dev/null +++ b/src/layout/mod.rs @@ -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, + #[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, +
+ { children(cx) } +
+ } +} diff --git a/src/lib.rs b/src/lib.rs index 620cc65..e8bf91d 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -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::*;