adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: divider

Browse source
This commit is contained in:
luoxiao 2024-05-10 23:26:09 +08:00
parent d00e970a6a
commit c6f83aa01d
4 changed files with 106 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
demo_markdown/docs/divider/mod.md
View file

@ -2,9 +2,29 @@
```rust demo
view! {
"top"
<Divider/>
"bottom"
<Space vertical=true>
<div style="padding: 30px 0; background-color: var(--colorNeutralBackground1);">
<Divider />
</div>
<div style="padding: 30px 0; background-color: var(--colorNeutralBackground1);">
<Divider>"Text"</Divider>
</div>
</Space>
}
```
### Vertical
```rust demo
view! {
<Space vertical=true gap=SpaceGap::Large>
<div style="height: 100px; background-color: var(--colorNeutralBackground1);">
<Divider vertical=true/>
</div>
<div style="height: 100px; background-color: var(--colorNeutralBackground1);">
<Divider vertical=true>"Text"</Divider>
</div>
</Space>
}
```

69
thaw/src/divider/divider.css
View file

@ -2,12 +2,71 @@
.thaw-divider {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
width: 100%;
margin: 1.5rem 0;
font-family: var(--fontFamilyBase);
font-size: var(--fontSizeBase200);
font-weight: var(--fontWeightRegular);
color: var(--colorNeutralForeground2);
line-height: var(--lineHeightBase200);
box-sizing: border-box;
text-align: center;
}
.thaw-divider__line {
background-color: #efeff5;
height: 1px;
width: 100%;
.thaw-divider--vertical {
flex-direction: column;
width: auto;
height: 100%;
min-height: 20px;
}
.thaw-divider::before {
content: "";
display: flex;
flex-grow: 1;
min-width: 8px;
border-top-width: var(--strokeWidthThin);
border-top-style: solid;
border-color: var(--colorNeutralStroke2);
box-sizing: border-box;
}
.thaw-divider--vertical::before {
min-width: auto;
min-height: 8px;
border-top-width: medium;
border-top-style: none;
border-right-width: var(--strokeWidthThin);
border-right-style: solid;
}
.thaw-divider::after {
content: "";
display: flex;
flex-grow: 1;
min-width: 8px;
border-top-width: var(--strokeWidthThin);
border-top-style: solid;
border-color: var(--colorNeutralStroke2);
box-sizing: border-box;
}
.thaw-divider--vertical::after {
min-width: auto;
min-height: 8px;
border-top-width: medium;
border-top-style: none;
border-right-width: var(--strokeWidthThin);
border-right-style: solid;
}
.thaw-divider__wrapper {
margin: 0 12px;
}
.thaw-divider--vertical > .thaw-divider__wrapper {
margin: 12px 0;
}

19
thaw/src/divider/mod.rs
View file

@ -1,13 +1,26 @@
use leptos::*;
use thaw_components::OptionComp;
use thaw_utils::{class_list, mount_style, OptionalProp};
#[component]
pub fn Divider(#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>) -> impl IntoView {
pub fn Divider(
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(optional, into)] vertical: MaybeSignal<bool>,
#[prop(optional)] children: Option<Children>,
) -> impl IntoView {
mount_style("divider", include_str!("./divider.css"));
view! {
<div class=class_list!["thaw-divider", class.map(| c | move || c.get())]>
<div class="thaw-divider__line"></div>
<div
class=class_list!["thaw-divider", ("thaw-divider--vertical", move || vertical.get()), class.map(| c | move || c.get())]
aria-orientation=move || if vertical.get() { "vertical" } else { "horizontal" }
role="separator"
>
<OptionComp value=children let:children>
<div class="thaw-divider__wrapper">
{children()}
</div>
</OptionComp>
</div>
}
}

3
thaw/src/theme/color.rs
View file

@ -25,6 +25,7 @@ pub struct ColorTheme {
pub color_neutral_stroke_1: String,
pub color_neutral_stroke_1_hover: String,
pub color_neutral_stroke_1_pressed: String,
pub color_neutral_stroke_2: String,
pub color_neutral_stroke_accessible: String,
pub color_neutral_stroke_accessible_hover: String,
pub color_neutral_stroke_accessible_pressed: String,
@ -68,6 +69,7 @@ impl ColorTheme {
color_neutral_stroke_1: "#d1d1d1".into(),
color_neutral_stroke_1_hover: "#c7c7c7".into(),
color_neutral_stroke_1_pressed: "#b3b3b3".into(),
color_neutral_stroke_2: "#e0e0e0".into(),
color_neutral_stroke_accessible: "#616161".into(),
color_neutral_stroke_accessible_hover: "#575757".into(),
color_neutral_stroke_accessible_pressed: "#4d4d4d".into(),
@ -111,6 +113,7 @@ impl ColorTheme {
color_neutral_stroke_1: "#666666".into(),
color_neutral_stroke_1_hover: "#757575".into(),
color_neutral_stroke_1_pressed: "#6b6b6b".into(),
color_neutral_stroke_2: "#525252".into(),
color_neutral_stroke_accessible: "#adadad".into(),
color_neutral_stroke_accessible_hover: "#bdbdbd".into(),
color_neutral_stroke_accessible_pressed: "#b3b3b3".into(),