Gpui Layout And Style

 1use gpui::*;
 2
 3div()
 4    .w(px(200.))
 5    .h(px(100.))
 6    .bg(rgb(0x2196F3))
 7    .text_color(rgb(0xFFFFFF))
 8    .rounded(px(8.))
 9    .p(px(16.))
10    .child("Styled content")

 1div()
 2    .flex()
 3    .flex_row()  // or flex_col() for column
 4    .gap(px(8.))
 5    .items_center()
 6    .justify_between()
 7    .children([
 8        div().child("Item 1"),
 9        div().child("Item 2"),
10        div().child("Item 3"),
11    ])

1div()
2    .w(px(200.))           // Pixels
3    .h(rems(10.))          // Relative to font size
4    .w(relative(0.5))      // 50% of parent
5    .min_w(px(100.))
6    .max_w(px(400.))

1div()
2    .flex()
3    .items_center()
4    .justify_center()
5    .size_full()
6    .child("Centered")

 1div()
 2    .w(px(300.))
 3    .bg(cx.theme().surface)
 4    .rounded(px(8.))
 5    .shadow_md()
 6    .p(px(16.))
 7    .gap(px(12.))
 8    .flex()
 9    .flex_col()
10    .child(heading())
11    .child(content())

1div()
2    .p(px(16.))           // Padding all sides
3    .px(px(20.))          // Padding horizontal
4    .py(px(12.))          // Padding vertical
5    .pt(px(8.))           // Padding top
6    .gap(px(8.))          // Gap between children

1.w(px(200.))              // Width
2.h(px(100.))              // Height
3.size(px(200.))           // Width and height
4.min_w(px(100.))          // Min width
5.max_w(px(400.))          // Max width

1.bg(rgb(0x2196F3))        // Background
2.text_color(rgb(0xFFFFFF)) // Text color
3.border_color(rgb(0x000000)) // Border color

1.border(px(1.))           // Border width
2.rounded(px(8.))          // Border radius
3.rounded_t(px(8.))        // Top corners
4.border_color(rgb(0x000000))

1.p(px(16.))               // Padding
2.m(px(8.))                // Margin
3.gap(px(8.))              // Gap between flex children

1.flex()                   // Enable flexbox
2.flex_row()               // Row direction
3.flex_col()               // Column direction
4.items_center()           // Align items center
5.justify_between()        // Space between items
6.flex_grow()              // Grow to fill space

1div()
2    .bg(cx.theme().surface)
3    .text_color(cx.theme().foreground)
4    .border_color(cx.theme().border)
5    .when(is_hovered, |el| {
6        el.bg(cx.theme().hover)
7    })

1div()
2    .when(is_active, |el| {
3        el.bg(cx.theme().primary)
4    })
5    .when_some(optional_color, |el, color| {
6        el.bg(color)
7    })