Skip to content

Commit 662c19d

Browse files
rorychattrorychatt
authored
Merge branch 'main' into 2323-audio-add-samplerate-parameter-to-audiorecorder
2 parents 894d4a6 + e9d8fab commit 662c19d

File tree

19 files changed

+717
-323
lines changed

19 files changed

+717
-323
lines changed

‎src/Ivy.Docs.Shared/Docs/01_Onboarding/02_Concepts/04_Layout.md‎

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ All layout methods return a LayoutView that can be further configured:
6262

6363
### Gap
6464

65-
Control spacing between elements:
65+
Control spacing between elements with `.Gap()`:
6666

6767
```csharp demo-tabs
6868
Layout.Vertical()
@@ -74,6 +74,26 @@ Layout.Vertical()
7474
| new Badge("A") | new Badge("B") | new Badge("C"))
7575
```
7676

77+
### Independent Row & Column Gap
78+
79+
Use `.Gap(rowGap, columnGap)` to control vertical and horizontal spacing independently:
80+
81+
```csharp demo-tabs
82+
Layout.Vertical().Gap(4)
83+
| Text.Label("RowGap=8, ColumnGap=2:")
84+
| (Layout.Wrap().Gap(8, 2).Width(Size.Units(60))
85+
| new Badge("A") | new Badge("B") | new Badge("C")
86+
| new Badge("D") | new Badge("E") | new Badge("F")
87+
| new Badge("G") | new Badge("H") | new Badge("I")
88+
| new Badge("J") | new Badge("K") | new Badge("L")
89+
| new Badge("M") | new Badge("N"))
90+
| Text.Label("RowGap=2, ColumnGap=8:")
91+
| (Layout.Wrap().Gap(2, 8).Width(Size.Units(60))
92+
| new Badge("A") | new Badge("B") | new Badge("C")
93+
| new Badge("D") | new Badge("E") | new Badge("F")
94+
| new Badge("G") | new Badge("H"))
95+
```
96+
7797
### Padding and Margin
7898

7999
Add internal and external spacing:
@@ -110,6 +130,66 @@ Layout.Vertical().Gap(4)
110130
| new Badge("Right aligned"))
111131
```
112132

133+
### Space Distribution
134+
135+
Distribute space between elements using `SpaceBetween`, `SpaceAround`, or `SpaceEvenly`:
136+
137+
```csharp demo-tabs
138+
Layout.Vertical().Gap(4)
139+
| Text.Label("SpaceBetween — items pushed to edges:")
140+
| (Layout.Horizontal().Align(Align.SpaceBetween).Width(Size.Full())
141+
| new Badge("A") | new Badge("B") | new Badge("C"))
142+
| Text.Label("SpaceAround — equal space around each item:")
143+
| (Layout.Horizontal().Align(Align.SpaceAround).Width(Size.Full())
144+
| new Badge("A") | new Badge("B") | new Badge("C"))
145+
| Text.Label("SpaceEvenly — equal space between all items:")
146+
| (Layout.Horizontal().Align(Align.SpaceEvenly).Width(Size.Full())
147+
| new Badge("A") | new Badge("B") | new Badge("C"))
148+
```
149+
150+
### Wrap
151+
152+
Use `Layout.Wrap()` to create a layout where items flow and wrap to the next line when they run out of space. Try resizing the window to see the wrapping behavior:
153+
154+
```csharp demo-tabs
155+
Layout.Wrap().Gap(2)
156+
| new Badge("Tag 1").Primary()
157+
| new Badge("Tag 2").Secondary()
158+
| new Badge("Tag 3")
159+
| new Badge("Tag 4").Primary()
160+
| new Badge("Tag 5").Secondary()
161+
| new Badge("Tag 6")
162+
| new Badge("Tag 7").Primary()
163+
| new Badge("Tag 8").Secondary()
164+
| new Badge("Tag 9")
165+
| new Badge("Tag 10").Primary()
166+
| new Badge("Tag 11").Secondary()
167+
```
168+
169+
### AlignSelf
170+
171+
Override alignment for individual children using `.AlignSelf()`. In a horizontal layout, this controls vertical positioning of each child independently:
172+
173+
```csharp demo-tabs
174+
Layout.Vertical().Gap(4)
175+
| new Badge("Top").Primary().AlignSelf(Align.TopLeft)
176+
| new Badge("Center").Primary().AlignSelf(Align.Center)
177+
| new Badge("Bottom").Primary().AlignSelf(Align.BottomRight)
178+
```
179+
180+
181+
### Scroll
182+
183+
Add scrollable behavior to layouts with constrained height using `.Scroll()`:
184+
185+
```csharp demo-tabs
186+
Layout.Vertical().Height(Size.Units(30)).Scroll(Scroll.Vertical).Gap(2)
187+
| new Badge("Item 1") | new Badge("Item 2") | new Badge("Item 3")
188+
| new Badge("Item 4") | new Badge("Item 5") | new Badge("Item 6")
189+
| new Badge("Item 7") | new Badge("Item 8") | new Badge("Item 9")
190+
| new Badge("Item 10") | new Badge("Item 11") | new Badge("Item 12")
191+
```
192+
113193
## Combining with Other Layouts
114194

115195
The Layout methods integrate seamlessly with specialized layout [widgets](../../02_Widgets/02_Layouts/_Index.md) and [Card](../../02_Widgets/03_Common/04_Card.md):

‎src/Ivy.Docs.Shared/Docs/02_Widgets/02_Layouts/01_StackLayout.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,91 @@ public class StackLayoutExample : ViewBase
5656
}
5757
```
5858

59+
## Space Distribution
60+
61+
Use `SpaceBetween`, `SpaceAround`, or `SpaceEvenly` to distribute space between elements:
62+
63+
```csharp demo-tabs
64+
new StackLayout([
65+
Text.Label("SpaceBetween:"),
66+
new StackLayout([new Badge("A"), new Badge("B"), new Badge("C")], Orientation.Horizontal, align: Align.SpaceBetween),
67+
Text.Label("SpaceAround:"),
68+
new StackLayout([new Badge("A"), new Badge("B"), new Badge("C")], Orientation.Horizontal, align: Align.SpaceAround),
69+
Text.Label("SpaceEvenly:"),
70+
new StackLayout([new Badge("A"), new Badge("B"), new Badge("C")], Orientation.Horizontal, align: Align.SpaceEvenly)
71+
], gap: 4).Width(Size.Full())
72+
```
73+
74+
## Row Gap & Column Gap
75+
76+
Control vertical and horizontal spacing independently using `RowGap` and `ColumnGap` properties:
77+
78+
```csharp demo-tabs
79+
new StackLayout([
80+
Text.Label("RowGap=8, ColumnGap=2:"),
81+
new StackLayout([
82+
new Badge("A"), new Badge("B"), new Badge("C"),
83+
new Badge("D"), new Badge("E"), new Badge("F"),
84+
new Badge("G"), new Badge("H"), new Badge("I"),
85+
new Badge("J"), new Badge("K"), new Badge("L"),
86+
new Badge("M"), new Badge("N")
87+
], Orientation.Horizontal, wrap: true) { RowGap = 8, ColumnGap = 2 }
88+
.Width(Size.Units(60)),
89+
Text.Label("RowGap=2, ColumnGap=8:"),
90+
new StackLayout([
91+
new Badge("A"), new Badge("B"), new Badge("C"),
92+
new Badge("D"), new Badge("E"), new Badge("F"),
93+
new Badge("G"), new Badge("H")
94+
], Orientation.Horizontal, wrap: true) { RowGap = 2, ColumnGap = 8 }
95+
.Width(Size.Units(60))
96+
], gap: 4)
97+
```
98+
99+
## Wrap
100+
101+
Use the `wrap` parameter to allow items to flow to the next line when they run out of space. Try resizing the window to see the wrapping behavior:
102+
103+
```csharp demo-tabs
104+
new StackLayout([
105+
new Badge("Tag 1").Primary(),
106+
new Badge("Tag 2").Secondary(),
107+
new Badge("Tag 3"),
108+
new Badge("Tag 4").Primary(),
109+
new Badge("Tag 5").Secondary(),
110+
new Badge("Tag 6"),
111+
new Badge("Tag 7").Primary(),
112+
new Badge("Tag 8").Secondary(),
113+
new Badge("Tag 9"),
114+
new Badge("Tag 10").Primary(),
115+
new Badge("Tag 11").Secondary()
116+
], Orientation.Horizontal, gap: 2, wrap: true)
117+
```
118+
119+
## AlignSelf
120+
121+
Override alignment for individual children using `.AlignSelf()`:
122+
123+
```csharp demo-tabs
124+
new StackLayout([
125+
new Badge("Top").Primary().AlignSelf(Align.TopLeft),
126+
new Badge("Center").Primary().AlignSelf(Align.Center),
127+
new Badge("Bottom").Primary().AlignSelf(Align.BottomRight)
128+
], gap: 4).Width(Size.Full())
129+
```
130+
131+
## Scroll
132+
133+
Add scrollable behavior using the `Scroll` property on a height-constrained layout:
134+
135+
```csharp demo-tabs
136+
new StackLayout([
137+
new Badge("Item 1"), new Badge("Item 2"), new Badge("Item 3"),
138+
new Badge("Item 4"), new Badge("Item 5"), new Badge("Item 6"),
139+
new Badge("Item 7"), new Badge("Item 8"), new Badge("Item 9"),
140+
new Badge("Item 10"), new Badge("Item 11"), new Badge("Item 12")
141+
], gap: 2) { Scroll = Scroll.Vertical }.Height(Size.Units(30)).Width(Size.Full())
142+
```
143+
59144
## Advanced Features
60145

61146
Complete example showing padding, margins, background colors, and parent padding control. Use [Thickness](../../04_ApiReference/Ivy/Thickness.md) for padding and margin, and [Colors](../../04_ApiReference/Ivy/Colors.md) for background. Alignment options are in [Align](../../04_ApiReference/Ivy/Align.md):

‎src/Ivy.Docs.Shared/Docs/02_Widgets/02_Layouts/06_SidebarLayout.md‎

Lines changed: 40 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -79,52 +79,57 @@ The `SidebarMenu` [widget](../../01_Onboarding/02_Concepts/03_Widgets.md) is des
7979
```csharp demo-tabs
8080
public class SidebarMenuExample : ViewBase
8181
{
82+
private enum NavPage { Home, Analytics, Profile, Account, Preferences, Help }
83+
8284
public override object? Build()
8385
{
84-
var selectedPage = UseState("home");
86+
var selectedPage = UseState<NavPage?>(NavPage.Home);
8587
var client = UseService<IClientProvider>();
8688

8789
MenuItem[] menuItems = new[]
8890
{
8991
MenuItem.Default("Dashboard")
90-
.Icon(Icons.LayoutDashboard).Tag("home"),
92+
.Icon(Icons.LayoutDashboard).Tag(NavPage.Home),
9193
MenuItem.Default("Analytics")
92-
.Icon(Icons.TrendingUp).Tag("analytics"),
94+
.Icon(Icons.TrendingUp).Tag(NavPage.Analytics),
9395
MenuItem.Default("Settings")
9496
.Icon(Icons.Settings).Children(
9597
MenuItem.Default("Profile")
96-
.Icon(Icons.User).Tag("profile"),
98+
.Icon(Icons.User).Tag(NavPage.Profile),
9799
MenuItem.Default("Account")
98-
.Icon(Icons.UserCog).Tag("account"),
100+
.Icon(Icons.UserCog).Tag(NavPage.Account),
99101
MenuItem.Default("Preferences")
100-
.Icon(Icons.Settings).Tag("preferences")
102+
.Icon(Icons.Settings).Tag(NavPage.Preferences)
101103
),
102-
MenuItem.Default("Help").Icon(Icons.CircleQuestionMark).Tag("help")
104+
MenuItem.Default("Help").Icon(Icons.CircleQuestionMark).Tag(NavPage.Help)
103105
};
104106

105107
var sidebarMenu = new SidebarMenu(
106108
onSelect: evt => {
107-
selectedPage.Value = evt.Value.ToString()!;
108-
client.Toast($"Navigated to {evt.Value}");
109+
if (Enum.TryParse<NavPage>(evt.Value?.ToString(), ignoreCase: true, out var page))
110+
{
111+
selectedPage.Set(page);
112+
client.Toast($"Navigated to {page}");
113+
}
109114
},
110115
items: menuItems
111116
);
112117

113118
object RenderContent()
114119
{
115-
return selectedPage.Value switch
120+
return (selectedPage.Value ?? NavPage.Home) switch
116121
{
117-
"home" => new Card("Welcome to the Dashboard!")
122+
NavPage.Home => new Card("Welcome to the Dashboard!")
118123
.Title("Dashboard"),
119-
"analytics" => new Card("Analytics and reports go here.")
124+
NavPage.Analytics => new Card("Analytics and reports go here.")
120125
.Title("Analytics"),
121-
"profile" => new Card("User profile settings.")
126+
NavPage.Profile => new Card("User profile settings.")
122127
.Title("Profile"),
123-
"account" => new Card("Account management.")
128+
NavPage.Account => new Card("Account management.")
124129
.Title("Account"),
125-
"preferences" => new Card("User preferences.")
130+
NavPage.Preferences => new Card("User preferences.")
126131
.Title("Preferences"),
127-
"help" => new Card("Help and documentation.")
132+
NavPage.Help => new Card("Help and documentation.")
128133
.Title("Help & Support"),
129134
_ => new Card("Page not found.")
130135
.Title("404")
@@ -251,49 +256,54 @@ The `SidebarMenu` widget is specifically designed for sidebar navigation and pro
251256
```csharp demo-tabs
252257
public class SidebarMenuAdvancedExample : ViewBase
253258
{
259+
private enum DocSection { Install, Quickstart, Examples, Buttons, Forms, Charts, Tables, Hooks, State, Performance }
260+
254261
public override object? Build()
255262
{
256263
var client = UseService<IClientProvider>();
257-
var selectedItem = UseState("");
264+
var selectedItem = UseState<DocSection?>(null);
258265

259266
MenuItem[] menuItems = new[]
260267
{
261268
MenuItem.Default("Getting Started")
262269
.Icon(Icons.Play).Children(
263270
MenuItem.Default("Installation")
264-
.Icon(Icons.Download).Tag("install"),
271+
.Icon(Icons.Download).Tag(DocSection.Install),
265272
MenuItem.Default("Quick Start")
266-
.Icon(Icons.Zap).Tag("quickstart"),
273+
.Icon(Icons.Zap).Tag(DocSection.Quickstart),
267274
MenuItem.Default("Examples")
268-
.Icon(Icons.Code).Tag("examples")
275+
.Icon(Icons.Code).Tag(DocSection.Examples)
269276
),
270277
MenuItem.Default("Components")
271278
.Icon(Icons.Package).Children(
272279
MenuItem.Default("Buttons")
273-
.Icon(Icons.MousePointer).Tag("buttons"),
280+
.Icon(Icons.MousePointer).Tag(DocSection.Buttons),
274281
MenuItem.Default("Forms")
275-
.Icon(Icons.FileText).Tag("forms"),
282+
.Icon(Icons.FileText).Tag(DocSection.Forms),
276283
MenuItem.Default("Charts")
277-
.Icon(Icons.ChartBar).Tag("charts"),
284+
.Icon(Icons.ChartBar).Tag(DocSection.Charts),
278285
MenuItem.Default("Tables")
279-
.Icon(Icons.Table).Tag("tables")
286+
.Icon(Icons.Table).Tag(DocSection.Tables)
280287
),
281288
MenuItem.Default("Advanced")
282289
.Icon(Icons.Cpu).Children(
283290
MenuItem.Default("Hooks")
284-
.Icon(Icons.Link).Tag("hooks"),
291+
.Icon(Icons.Link).Tag(DocSection.Hooks),
285292
MenuItem.Default("State Management")
286-
.Icon(Icons.Database).Tag("state"),
293+
.Icon(Icons.Database).Tag(DocSection.State),
287294
MenuItem.Default("Performance")
288-
.Icon(Icons.Gauge).Tag("performance")
295+
.Icon(Icons.Gauge).Tag(DocSection.Performance)
289296
)
290297
};
291298

292299
var menu = new SidebarMenu(
293300
onSelect: evt =>
294301
{
295-
selectedItem.Value = evt.Value?.ToString() ?? "";
296-
client.Toast($"Selected: {evt.Value}");
302+
if (Enum.TryParse<DocSection>(evt.Value?.ToString(), ignoreCase: true, out var section))
303+
{
304+
selectedItem.Set(section);
305+
client.Toast($"Selected: {section}");
306+
}
297307
},
298308
items: menuItems
299309
);
@@ -302,7 +312,7 @@ public class SidebarMenuAdvancedExample : ViewBase
302312
mainContent: new Card(
303313
Layout.Vertical().Gap(2)
304314
| Text.P("Documentation").Large()
305-
| Text.P($"Currently viewing: {(string.IsNullOrEmpty(selectedItem.Value) ? "None" : selectedItem.Value)}")
315+
| Text.P($"Currently viewing: {(selectedItem.Value?.ToString() ?? "None")}")
306316
).Title("Content Area"),
307317
sidebarContent: menu,
308318
sidebarHeader: Text.Lead("Documentation Menu")

0 commit comments

Comments
 (0)