Add more example to Label.
This commit is contained in:
Jason Lee
parent
c538a231c1
commit
ed132ad55e
2 changed files with 89 additions and 43 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
use gpui::{
|
use gpui::{
|
||||||
IntoElement, ParentElement, Render, Styled, View, ViewContext, VisualContext as _,
|
px, rems, IntoElement, ParentElement, Render, Styled, View, ViewContext, VisualContext as _,
|
||||||
WindowContext,
|
WindowContext,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -9,9 +9,11 @@ use ui::{
|
||||||
h_flex,
|
h_flex,
|
||||||
label::Label,
|
label::Label,
|
||||||
radio::Radio,
|
radio::Radio,
|
||||||
v_flex, Clickable, Disableable as _, IconName, Selection,
|
v_flex, Clickable, Disableable as _, IconName, Selection, StyledExt,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
use crate::section;
|
||||||
|
|
||||||
pub struct CheckboxStory {
|
pub struct CheckboxStory {
|
||||||
check1: Selection,
|
check1: Selection,
|
||||||
check2: Selection,
|
check2: Selection,
|
||||||
|
|
@ -46,30 +48,55 @@ impl CheckboxStory {
|
||||||
impl Render for CheckboxStory {
|
impl Render for CheckboxStory {
|
||||||
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
|
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
|
||||||
v_flex()
|
v_flex()
|
||||||
.p_4()
|
|
||||||
.gap_6()
|
.gap_6()
|
||||||
.child(
|
.child(
|
||||||
h_flex()
|
section("Label", cx)
|
||||||
.items_center()
|
|
||||||
.gap_1()
|
|
||||||
.child(Label::new("9,182,1 USD").text_2xl().masked(self.masked))
|
|
||||||
.child(
|
.child(
|
||||||
Button::new("btn-mask", cx)
|
h_flex()
|
||||||
.style(ButtonStyle::Ghost)
|
.w_full()
|
||||||
.icon(if self.masked {
|
.justify_between()
|
||||||
IconName::EyeOff
|
.gap_4()
|
||||||
} else {
|
.child(Label::new("Text align left"))
|
||||||
IconName::Eye
|
.child(Label::new("Text align center").text_center())
|
||||||
})
|
.child(Label::new("Text align right").text_right()),
|
||||||
.on_click(cx.listener(|this, _, _| {
|
)
|
||||||
this.masked = !this.masked;
|
.child(Label::new("Color Label").text_color(ui::red_500()))
|
||||||
})),
|
.child(
|
||||||
|
Label::new("Font Size Label")
|
||||||
|
.text_size(px(20.))
|
||||||
|
.text_left()
|
||||||
|
.font_semibold()
|
||||||
|
.line_height(rems(1.8)),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.child(Label::new("500 USD").text_xl().masked(self.masked))
|
|
||||||
.child(
|
.child(
|
||||||
v_flex().items_start().justify_start().gap_6().child(
|
section("Maksed Label", cx).child(
|
||||||
|
v_flex()
|
||||||
|
.w_full()
|
||||||
|
.gap_4()
|
||||||
|
.child(
|
||||||
|
h_flex()
|
||||||
|
.child(Label::new("9,182,1 USD").text_2xl().masked(self.masked))
|
||||||
|
.child(
|
||||||
|
Button::new("btn-mask", cx)
|
||||||
|
.style(ButtonStyle::Ghost)
|
||||||
|
.icon(if self.masked {
|
||||||
|
IconName::EyeOff
|
||||||
|
} else {
|
||||||
|
IconName::Eye
|
||||||
|
})
|
||||||
|
.on_click(cx.listener(|this, _, _| {
|
||||||
|
this.masked = !this.masked;
|
||||||
|
})),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.child(Label::new("500 USD").text_xl().masked(self.masked)),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.child(
|
||||||
|
section("Checkbox", cx).child(
|
||||||
h_flex()
|
h_flex()
|
||||||
|
.w_full()
|
||||||
.items_center()
|
.items_center()
|
||||||
.gap_6()
|
.gap_6()
|
||||||
.child(
|
.child(
|
||||||
|
|
@ -98,8 +125,9 @@ impl Render for CheckboxStory {
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.child(
|
.child(
|
||||||
h_flex().items_center().gap_4().child(
|
section("Disabled Checkbox", cx).child(
|
||||||
h_flex()
|
h_flex()
|
||||||
|
.w_full()
|
||||||
.items_center()
|
.items_center()
|
||||||
.gap_6()
|
.gap_6()
|
||||||
.child(
|
.child(
|
||||||
|
|
@ -123,29 +151,32 @@ impl Render for CheckboxStory {
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.child(
|
.child(
|
||||||
h_flex()
|
section("Radio", cx).child(
|
||||||
.gap_4()
|
h_flex()
|
||||||
.child(
|
.w_full()
|
||||||
Radio::new("radio1")
|
.gap_4()
|
||||||
.selected(self.select1)
|
.child(
|
||||||
.on_click(cx.listener(|this, v, _cx| {
|
Radio::new("radio1")
|
||||||
this.select1 = *v;
|
.selected(self.select1)
|
||||||
})),
|
.on_click(cx.listener(|this, v, _cx| {
|
||||||
)
|
this.select1 = *v;
|
||||||
.child(
|
})),
|
||||||
Radio::new("radio2")
|
)
|
||||||
.label("Radio")
|
.child(
|
||||||
.selected(self.select2)
|
Radio::new("radio2")
|
||||||
.on_click(cx.listener(|this, v, _cx| {
|
.label("Radio")
|
||||||
this.select2 = *v;
|
.selected(self.select2)
|
||||||
})),
|
.on_click(cx.listener(|this, v, _cx| {
|
||||||
)
|
this.select2 = *v;
|
||||||
.child(
|
})),
|
||||||
Radio::new("radio3")
|
)
|
||||||
.label("Disabled Radio")
|
.child(
|
||||||
.selected(true)
|
Radio::new("radio3")
|
||||||
.disabled(true),
|
.label("Disabled Radio")
|
||||||
),
|
.selected(true)
|
||||||
|
.disabled(true),
|
||||||
|
),
|
||||||
|
),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -43,6 +43,21 @@ impl Label {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pub fn text_left(mut self) -> Self {
|
||||||
|
self.align = TextAlign::Left;
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn text_center(mut self) -> Self {
|
||||||
|
self.align = TextAlign::Center;
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn text_right(mut self) -> Self {
|
||||||
|
self.align = TextAlign::Right;
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
pub fn masked(mut self, masked: bool) -> Self {
|
pub fn masked(mut self, masked: bool) -> Self {
|
||||||
self.marked = masked;
|
self.marked = masked;
|
||||||
self
|
self
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue