zed/crates/ui2/docs/building-ui.md

Building UI with GPUI

Common patterns

Method ordering

• id
• Flex properties
• Position properties
• Size properties
• Style properties
• Handlers
• State properties

Using the Label Component to Create UI Text

The Label component helps in displaying text on user interfaces. It creates an interface where specific parameters such as label color, line height style, and strikethrough can be set.

Firstly, to create a Label instance, use the Label::new() function. This function takes a string that will be displayed as text in the interface.

Label::new("Hello, world!");

Now let's dive a bit deeper into how to customize Label instances:

• Setting Color: To set the color of the label using various predefined color options such as Default, Muted, Created, Modified, Deleted, etc, the color() function is called on the Label instance:

  Label::new("Hello, world!").color(LabelColor::Default);
  

• Setting Line Height Style: To set the line height style, the line_height_style() function is utilized:

  Label::new("Hello, world!").line_height_style(LineHeightStyle::TextLabel);
  

• Adding a Strikethrough: To add a strikethrough in a Label, the set_strikethrough() function is used:

  Label::new("Hello, world!").set_strikethrough(true);
  

That's it! Now you can use the Label component to create and customize text on your application's interface.

Building a new component

TODO