building-ui.md

 1# Building UI with GPUI
 2
 3## Common patterns
 4
 5### Method ordering
 6
 7- id
 8- Flex properties
 9- Position properties
10- Size properties
11- Style properties
12- Handlers
13- State properties
14
15### Using the Label Component to Create UI Text
16
17The `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.
18
19Firstly, to create a `Label` instance, use the `Label::new()` function. This function takes a string that will be displayed as text in the interface.
20
21```rust
22Label::new("Hello, world!");
23```
24
25Now let's dive a bit deeper into how to customize `Label` instances:
26
27- **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:
28
29    ```rust
30    Label::new("Hello, world!").color(LabelColor::Default);
31    ```
32
33- **Setting Line Height Style:** To set the line height style, the `line_height_style()` function is utilized:
34
35    ```rust
36    Label::new("Hello, world!").line_height_style(LineHeightStyle::TextLabel);
37    ```
38
39- **Adding a Strikethrough:** To add a strikethrough in a `Label`, the  `set_strikethrough()` function is used:
40
41    ```rust
42    Label::new("Hello, world!").set_strikethrough(true);
43    ```
44
45That's it! Now you can use the `Label` component to create and customize text on your application's interface.
46
47## Building a new component
48
49TODO