Skip to content

Commit f072fae

Browse files
committed
Simplify styles example with centering layout builder
1 parent b195e97 commit f072fae

File tree

1 file changed

+7
-29
lines changed

1 file changed

+7
-29
lines changed

examples/styles.raku

Lines changed: 7 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -79,36 +79,14 @@ class StyleUI is TopLevel {
7979
)
8080
};
8181

82-
# Center the style table on the screen using a simple centering trick:
83-
# an outer node (horizontal or vertical) containing just 3 children --
84-
# two empty space-filling nodes surrounding a minimized inner node
82+
# Center the style table and a divider and quit button on the screen
8583
with $builder {
86-
# Outer container node; centers middle node horizontally using
87-
# default horizontal layout direction for all three children
88-
.node(
89-
# Empty for left space
90-
.node(),
91-
# Width-minimized center content node; centers its own content
92-
# vertically by specifying vertical layout and using same trick
93-
.node(:vertical, style => %(:minimize-w),
94-
# Empty for top space
95-
.node(),
96-
# Height-minimized node containing content
97-
.node(:vertical, style => %(:minimize-h),
98-
# Show the style table
99-
$table,
100-
101-
# Add a horizontal divider and a quit button
102-
.divider(line-style => 'light1', style => %(set-h => 1)),
103-
.button(label => 'Quit',
104-
process-input => { $.terminal.quit }),
105-
),
106-
# Empty for bottom space
107-
.node(),
108-
),
109-
# Empty for right space
110-
.node(),
111-
)
84+
.center(:vertical, style => %( :minimize-w, :minimize-h ),
85+
$table,
86+
.divider(line-style => 'light1', style => %(set-h => 1)),
87+
.button(label => 'Quit',
88+
process-input => { $.terminal.quit }),
89+
)
11290
}
11391
}
11492
}

0 commit comments

Comments
 (0)