chip.rs

  1use crate::prelude::*;
  2use gpui::{AnyElement, Hsla, IntoElement, ParentElement, Styled};
  3
  4/// Chips provide a container for an informative label.
  5///
  6/// # Usage Example
  7///
  8/// ```
  9/// use ui::Chip;
 10///
 11/// let chip = Chip::new("This Chip");
 12/// ```
 13#[derive(IntoElement, RegisterComponent)]
 14pub struct Chip {
 15    label: SharedString,
 16    label_color: Color,
 17    label_size: LabelSize,
 18    bg_color: Option<Hsla>,
 19}
 20
 21impl Chip {
 22    /// Creates a new `Chip` component with the specified label.
 23    pub fn new(label: impl Into<SharedString>) -> Self {
 24        Self {
 25            label: label.into(),
 26            label_color: Color::Default,
 27            label_size: LabelSize::XSmall,
 28            bg_color: None,
 29        }
 30    }
 31
 32    /// Sets the color of the label.
 33    pub const fn label_color(mut self, color: Color) -> Self {
 34        self.label_color = color;
 35        self
 36    }
 37
 38    /// Sets the size of the label.
 39    pub const fn label_size(mut self, size: LabelSize) -> Self {
 40        self.label_size = size;
 41        self
 42    }
 43
 44    /// Sets a custom background color for the callout content.
 45    pub const fn bg_color(mut self, color: Hsla) -> Self {
 46        self.bg_color = Some(color);
 47        self
 48    }
 49}
 50
 51impl RenderOnce for Chip {
 52    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
 53        let bg_color = self
 54            .bg_color
 55            .unwrap_or(cx.theme().colors().element_background);
 56
 57        h_flex()
 58            .min_w_0()
 59            .flex_initial()
 60            .px_1()
 61            .border_1()
 62            .rounded_sm()
 63            .border_color(cx.theme().colors().border)
 64            .bg(bg_color)
 65            .overflow_hidden()
 66            .child(
 67                Label::new(self.label)
 68                    .size(self.label_size)
 69                    .color(self.label_color)
 70                    .buffer_font(cx),
 71            )
 72    }
 73}
 74
 75impl Component for Chip {
 76    fn scope() -> ComponentScope {
 77        ComponentScope::DataDisplay
 78    }
 79
 80    fn preview(_window: &mut Window, cx: &mut App) -> Option<AnyElement> {
 81        let chip_examples = vec![
 82            single_example("Default", Chip::new("Chip Example").into_any_element()),
 83            single_example(
 84                "Customized Label Color",
 85                Chip::new("Chip Example")
 86                    .label_color(Color::Accent)
 87                    .into_any_element(),
 88            ),
 89            single_example(
 90                "Customized Label Size",
 91                Chip::new("Chip Example")
 92                    .label_size(LabelSize::Large)
 93                    .label_color(Color::Accent)
 94                    .into_any_element(),
 95            ),
 96            single_example(
 97                "Customized Background Color",
 98                Chip::new("Chip Example")
 99                    .bg_color(cx.theme().colors().text_accent.opacity(0.1))
100                    .into_any_element(),
101            ),
102        ];
103
104        Some(example_group(chip_examples).vertical().into_any_element())
105    }
106}