ui: Add inline_code method to label (#29306)

This makes it easy to have a label that looks like Markdown inline code
via the `inline_code(cx)` method.

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-04-23 19:27:56 -03:00 committed by GitHub
parent ecc600a68f
commit ba3d82629e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 33 additions and 2 deletions

View file

@ -73,6 +73,11 @@ impl LabelCommon for AnimatedLabel {
self.base = self.base.buffer_font(cx);
self
}
fn inline_code(mut self, cx: &App) -> Self {
self.base = self.base.inline_code(cx);
self
}
}
impl RenderOnce for AnimatedLabel {

View file

@ -78,6 +78,11 @@ impl LabelCommon for HighlightedLabel {
self.base = self.base.buffer_font(cx);
self
}
fn inline_code(mut self, cx: &App) -> Self {
self.base = self.base.inline_code(cx);
self
}
}
pub fn highlight_ranges(

View file

@ -189,6 +189,12 @@ impl LabelCommon for Label {
self.base = self.base.buffer_font(cx);
self
}
/// Styles the label to look like inline code.
fn inline_code(mut self, cx: &App) -> Self {
self.base = self.base.inline_code(cx);
self
}
}
impl RenderOnce for Label {
@ -206,7 +212,7 @@ impl Component for Label {
Some("A text label component that supports various styles, sizes, and formatting options.")
}
fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
fn preview(_window: &mut Window, cx: &mut App) -> Option<AnyElement> {
Some(
v_flex()
.gap_6()
@ -235,6 +241,7 @@ impl Component for Label {
single_example("Italic", Label::new("Code Comment").italic().into_any_element()),
single_example("Strikethrough", Label::new("Deprecated Feature").strikethrough().into_any_element()),
single_example("Underline", Label::new("Clickable Link").underline().into_any_element()),
single_example("Inline Code", Label::new("fn main() {}").inline_code(cx).into_any_element()),
],
),
example_group_with_title(

View file

@ -64,6 +64,9 @@ pub trait LabelCommon {
/// Sets the font to the buffer's
fn buffer_font(self, cx: &App) -> Self;
/// Styles the label to look like inline code.
fn inline_code(self, cx: &App) -> Self;
}
/// A label-like element that can be used to create a custom label when
@ -183,6 +186,16 @@ impl LabelCommon for LabelLike {
.font(theme::ThemeSettings::get_global(cx).buffer_font.clone());
self
}
fn inline_code(mut self, cx: &App) -> Self {
self.base = self
.base
.font(theme::ThemeSettings::get_global(cx).buffer_font.clone())
.bg(cx.theme().colors().element_background)
.rounded_sm()
.px_0p5();
self
}
}
impl ParentElement for LabelLike {
@ -248,7 +261,7 @@ impl Component for LabelLike {
)
}
fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
fn preview(_window: &mut Window, cx: &mut App) -> Option<AnyElement> {
Some(
v_flex()
.gap_6()
@ -269,6 +282,7 @@ impl Component for LabelLike {
single_example("Italic", LabelLike::new().italic().child("Italic text").into_any_element()),
single_example("Underline", LabelLike::new().underline().child("Underlined text").into_any_element()),
single_example("Strikethrough", LabelLike::new().strikethrough().child("Strikethrough text").into_any_element()),
single_example("Inline Code", LabelLike::new().inline_code(cx).child("const value = 42;").into_any_element()),
],
),
example_group_with_title(