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() .p_4()
.child(Label::new(self.name.clone()).text_size(px(24.0))) .child(Label::new(self.name.clone()).text_size(px(24.0)))
.child(Label::new(self.description.clone()).text_size(px(16.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| { .when_some(self.story.clone(), |this, story| {
this.child( this.child(

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

@ -1,34 +1,37 @@
use gpui::{div, prelude::FluentBuilder as _, RenderOnce}; 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::theme::ActiveTheme;
use crate::StyledExt as _; use crate::StyledExt as _;
enum Orientation {
Vertical,
Horizontal,
}
#[derive(IntoElement)] #[derive(IntoElement)]
pub struct Divider { pub struct Divider {
base: Div, base: Div,
orientation: Orientation, label: Option<SharedString>,
axis: Axis,
} }
impl Divider { impl Divider {
pub fn vertical() -> Self { pub fn vertical() -> Self {
Self { Self {
base: div(), base: div(),
orientation: Orientation::Vertical, axis: Axis::Vertical,
label: None,
} }
} }
pub fn horizontal() -> Self { pub fn horizontal() -> Self {
Self { Self {
base: div(), 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 { impl Styled for Divider {
@ -42,17 +45,30 @@ impl RenderOnce for Divider {
let theme = cx.theme(); let theme = cx.theme();
self.base self.base
.map(|this| match self.orientation { .map(|this| match self.axis {
Orientation::Vertical => this.v_flex().h_full(), Axis::Vertical => this.v_flex().h_full(),
Orientation::Horizontal => this.h_flex().w_full(), Axis::Horizontal => this.h_flex().w_full(),
}) })
.child( .child(
div() div()
.map(|this| match self.orientation { .absolute()
Orientation::Vertical => this.v_flex().w_0().h_full().border_l_1(), .map(|this| match self.axis {
Orientation::Horizontal => this.h_flex().h_0().w_full().border_b_1(), 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),
)
})
} }
} }