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 class param to layout component (#60)

Browse source
This commit is contained in:
luoxiaozero 2023-12-25 21:28:52 +08:00 • committed by GitHub
parent 3b63be026e
commit c9db5b3dd4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 67 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
demo/src/pages/layout/mod.rs
View file

@ -74,27 +74,51 @@ pub fn LayoutPage() -> impl IntoView {
<tbody>
<tr>
<td>"style"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>
<Text code=true>"MaybeSignal<String>"</Text>
</td>
<td>
<Text code=true>"Default::default()"</Text>
</td>
<td>"Layout's style."</td>
</tr>
<tr>
<td>"position"</td>
<td>"LayoutPosition"</td>
<td>"LayoutPosition::Static"</td>
<td>
<Text code=true>"LayoutPosition"</Text>
</td>
<td>
<Text code=true>"LayoutPosition::Static"</Text>
</td>
<td>
"static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."
</td>
</tr>
<tr>
<td>"has_sider"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>
<Text code=true>"MaybeSignal<bool>"</Text>
</td>
<td>
<Text code=true>"false"</Text>
</td>
<td>"Whether the component has sider inside. If so it must be true."</td>
</tr>
<tr>
<td>"class"</td>
<td>
<Text code=true>"MaybeSignal<String>"</Text>
</td>
<td>
<Text code=true>"Default::default()"</Text>
</td>
<td>"Addtional classes for the layout element."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td>
<Text code=true>"Children"</Text>
</td>
<td></td>
<td>"Layout's content."</td>
</tr>
@ -113,13 +137,29 @@ pub fn LayoutPage() -> impl IntoView {
<tbody>
<tr>
<td>"style"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>
<Text code=true>"MaybeSignal<String>"</Text>
</td>
<td>
<Text code=true>"Default::default()"</Text>
</td>
<td>"LayoutHeader's style."</td>
</tr>
<tr>
<td>"class"</td>
<td>
<Text code=true>"MaybeSignal<String>"</Text>
</td>
<td>
<Text code=true>"Default::default()"</Text>
</td>
<td>"Addtional classes for the layout header element."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td>
<Text code=true>"Children"</Text>
</td>
<td></td>
<td>"LayoutHeader's content."</td>
</tr>

4
src/layout/layout_header.rs
View file

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

5
src/layout/layout_sider.rs
View file

@ -1,14 +1,15 @@
use crate::utils::mount_style;
use crate::utils::{class_list::class_list, mount_style};
use leptos::*;
#[component]
pub fn LayoutSider(
#[prop(optional, into)] class: MaybeSignal<String>,
#[prop(optional, into)] style: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
mount_style("layout-sider", include_str!("./layout-sider.css"));
view! {
<div class="thaw-layout-sider" style=move || style.get()>
<div class=class_list!["thaw-layout-sider", move || class.get()] style=move || style.get()>
{children()}
</div>
}

14
src/layout/mod.rs
View file

@ -1,7 +1,7 @@
mod layout_header;
mod layout_sider;
use crate::utils::mount_style;
use crate::utils::{class_list::class_list, mount_style};
pub use layout_header::*;
pub use layout_sider::*;
use leptos::*;
@ -24,6 +24,7 @@ impl LayoutPosition {
#[component]
pub fn Layout(
#[prop(optional, into)] class: MaybeSignal<String>,
#[prop(optional, into)] style: MaybeSignal<String>,
#[prop(optional)] position: LayoutPosition,
#[prop(optional, into)] has_sider: MaybeSignal<bool>,
@ -40,11 +41,18 @@ pub fn Layout(
});
view! {
<div
class="thaw-layout"
class=("thaw-layout--absolute-positioned", position == LayoutPosition::Absolute)
class=class_list![gen_class(position), move || class.get()]
style=move || style.get()
>
{children()}
</div>
}
}
fn gen_class(position: LayoutPosition) -> String {
let mut class = String::from("thaw-layout");
if position == LayoutPosition::Absolute {
class.push_str("thaw-layout--absolute-positioned");
}
class
}