dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add label support to horizontal Divider.

Browse source
This commit is contained in:
Jason Lee 2024-07-17 14:11:17 +08:00
parent ac3d6760ed
commit 3aaa348fbb
2 changed files with 33 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
crates/story/src/lib.rs
View file

@ -221,7 +221,7 @@ impl Render for StoryContainer {
.p_4()
.child(Label::new(self.name.clone()).text_size(px(24.0)))
.child(Label::new(self.description.clone()).text_size(px(16.0)))
.child(Divider::horizontal()),
.child(Divider::horizontal().label("This is a divider")),
)
.when_some(self.story.clone(), |this, story| {
this.child(

48
crates/ui/src/divider.rs
View file

@ -1,34 +1,37 @@
use gpui::{div, prelude::FluentBuilder as _, RenderOnce};
use gpui::{Div, IntoElement, ParentElement, Styled};
use gpui::{Axis, Div, IntoElement, ParentElement, SharedString, Styled};
use crate::theme::ActiveTheme;
use crate::StyledExt as _;
enum Orientation {
Vertical,
Horizontal,
}
#[derive(IntoElement)]
pub struct Divider {
base: Div,
orientation: Orientation,
label: Option<SharedString>,
axis: Axis,
}
impl Divider {
pub fn vertical() -> Self {
Self {
base: div(),
orientation: Orientation::Vertical,
axis: Axis::Vertical,
label: None,
}
}
pub fn horizontal() -> Self {
Self {
base: div(),
orientation: Orientation::Horizontal,
axis: Axis::Horizontal,
label: None,
}
}
pub fn label(mut self, label: impl Into<SharedString>) -> Self {
self.label = Some(label.into());
self
}
}
impl Styled for Divider {
@ -42,17 +45,30 @@ impl RenderOnce for Divider {
let theme = cx.theme();
self.base
.map(|this| match self.orientation {
Orientation::Vertical => this.v_flex().h_full(),
Orientation::Horizontal => this.h_flex().w_full(),
.map(|this| match self.axis {
Axis::Vertical => this.v_flex().h_full(),
Axis::Horizontal => this.h_flex().w_full(),
})
.child(
div()
.map(|this| match self.orientation {
Orientation::Vertical => this.v_flex().w_0().h_full().border_l_1(),
Orientation::Horizontal => this.h_flex().h_0().w_full().border_b_1(),
.absolute()
.map(|this| match self.axis {
Axis::Vertical => this.v_flex().w_0().h_full().border_l_1(),
Axis::Horizontal => this.h_flex().h_0().w_full().border_b_1(),
})
.border_color(theme.border),
.border_color(cx.theme().border),
)
.when_some(self.label, |this, label| {
this.child(
div()
.px_2()
.py_1()
.mx_auto()
.text_xs()
.bg(cx.theme().background)
.text_color(theme.muted_foreground)
.child(label),
)
})
}
}