storybook/stories/
layout.rs

1use gpui::{div, prelude::*, px, rgb};
2use allui::prelude::*;
3
4pub fn render_vstack_story() -> impl IntoElement {
5    VStack::new()
6        .spacing(16.0)
7        .alignment(HorizontalAlignment::Leading)
8        .child(Text::new(
9            "VStack centers children horizontally by default:",
10        ))
11        .child(
12            VStack::new()
13                .spacing(8.0)
14                .child(Text::new("Child 1").padding(8.0).background(Color::blue()))
15                .child(
16                    Text::new("Child 2 (longer)")
17                        .padding(8.0)
18                        .background(Color::blue()),
19                )
20                .child(Text::new("3").padding(8.0).background(Color::blue()))
21                .padding(16.0)
22                .background(Color::tertiary_system_background())
23                .corner_radius(8.0),
24        )
25        .child(Text::new("VStack with leading alignment:"))
26        .child(
27            VStack::new()
28                .spacing(8.0)
29                .alignment(HorizontalAlignment::Leading)
30                .child(
31                    Text::new("Leading 1")
32                        .padding(8.0)
33                        .background(Color::green()),
34                )
35                .child(
36                    Text::new("Leading 2 (longer)")
37                        .padding(8.0)
38                        .background(Color::green()),
39                )
40                .padding(16.0)
41                .background(Color::tertiary_system_background())
42                .corner_radius(8.0),
43        )
44}
45
46pub fn render_hstack_story() -> impl IntoElement {
47    VStack::new()
48        .spacing(16.0)
49        .alignment(HorizontalAlignment::Leading)
50        .child(Text::new("HStack centers children vertically by default:"))
51        .child(
52            HStack::new()
53                .spacing(8.0)
54                .child(Text::new("A").padding(8.0).background(Color::blue()))
55                .child(
56                    Text::new("Tall")
57                        .padding_edges(8.0, 8.0, 32.0, 8.0)
58                        .background(Color::blue()),
59                )
60                .child(Text::new("C").padding(8.0).background(Color::blue()))
61                .padding(16.0)
62                .background(Color::tertiary_system_background())
63                .corner_radius(8.0),
64        )
65        .child(Text::new("HStack with top alignment:"))
66        .child(
67            HStack::new()
68                .spacing(8.0)
69                .alignment(VerticalAlignment::Top)
70                .child(Text::new("Top").padding(8.0).background(Color::green()))
71                .child(
72                    Text::new("Aligned")
73                        .padding_edges(8.0, 8.0, 32.0, 8.0)
74                        .background(Color::green()),
75                )
76                .padding(16.0)
77                .background(Color::tertiary_system_background())
78                .corner_radius(8.0),
79        )
80}
81
82pub fn render_zstack_story() -> impl IntoElement {
83    VStack::new()
84        .spacing(16.0)
85        .alignment(HorizontalAlignment::Leading)
86        .child(Text::new("ZStack overlays children, centered by default:"))
87        .child(
88            ZStack::new()
89                .child(div().size(px(150.0)).bg(rgb(0x007AFF)).rounded(px(8.0)))
90                .child(div().size(px(80.0)).bg(rgb(0xFF3B30)).rounded_full())
91                .frame_size(200.0, 200.0)
92                .background(Color::tertiary_system_background())
93                .corner_radius(8.0),
94        )
95}
96
97pub fn render_spacer_story() -> impl IntoElement {
98    VStack::new()
99        .spacing(16.0)
100        .alignment(HorizontalAlignment::Leading)
101        .child(Text::new("Spacer pushes content to edges:"))
102        .child(
103            HStack::new()
104                .child(Text::new("Left").padding(8.0).background(Color::blue()))
105                .child(Spacer::new())
106                .child(Text::new("Right").padding(8.0).background(Color::blue()))
107                .padding(16.0)
108                .background(Color::tertiary_system_background())
109                .corner_radius(8.0)
110                .frame_width(400.0),
111        )
112        .child(Text::new("Multiple spacers distribute evenly:"))
113        .child(
114            HStack::new()
115                .child(Spacer::new())
116                .child(Text::new("Center").padding(8.0).background(Color::green()))
117                .child(Spacer::new())
118                .padding(16.0)
119                .background(Color::tertiary_system_background())
120                .corner_radius(8.0)
121                .frame_width(400.0),
122        )
123}
storybook/stories/layout.rs

storybook/stories/
layout.rs
