You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/stacklayout/overview.md
+31-60Lines changed: 31 additions & 60 deletions
Original file line number
Diff line number
Diff line change
@@ -10,24 +10,19 @@ position: 0
10
10
11
11
# Blazor StackLayout Overview
12
12
13
-
The <ahref="https://www.telerik.com/blazor-ui/stacklayout"target="_blank">Blazor StackLayout component</a> allows you to easily align multiple elements in a vertical or horizontal order.
13
+
The <ahref="https://www.telerik.com/blazor-ui/stacklayout"target="_blank">StackLayout for Blazor</a> is a component that easily aligns multiple elements in a vertical or horizontal order.
14
14
15
-
#### In This Article:
15
+
##Creating Blazor StackLayout
16
16
17
+
1. Use the `<TelerikStackLayout>` tag to add the component to your razor page.
17
18
18
-
*[Basics](#basics)
19
-
*[Features](#features)
20
-
*[Nested StackLayouts](#nested-stacklayouts)
19
+
2. Inside the `<TelerikStackLayout>` tag, add the desired HTML containers (e.g. `<div>`) or components. Each immediate child element will represent one stack layout item.
21
20
22
-
## Basics
21
+
3. Set `Width` and `Height`.
23
22
24
-
#### To use a Telerik StackLayout for Blazor
23
+
4. (optional) Set the `Orientation` parameter to determine the layouts direction.
25
24
26
-
1. Declare the `<TelerikStackLayout>` tag
27
-
28
-
1. Inside the `<TelerikStackLayout>` tag, add the desired elements.
29
-
30
-
>caption StackLayout with its most common features
25
+
>caption StackLayout basic configuration.
31
26
32
27
````CSHTML
33
28
@* This example showcases how the StackLayout fills the entire parent container and some of its core features. *@
@@ -57,58 +52,35 @@ The <a href="https://www.telerik.com/blazor-ui/stacklayout" target="_blank">Blaz
57
52
</div>
58
53
````
59
54
60
-
>caption The result from the code snippet above
61
-
62
-
*`Class` - the CSS class that renders on the main wrapping element of the component.
55
+
## Layout
94
56
95
-
*`Height` - takes a CSS unit that determines how tall the StackLayout is. See the [Dimensions]({%slug common-features/dimensions%}) article for more details on what units you can use and how dimensions in percent work.
57
+
The layout is the building block of the StackLayout component. Control its appearance via different parameters. [Read more about the Blazor StackLayout layout]({%slug stacklayout-layout%}).
96
58
97
-
*`Width`- takes a CSS unit that determines how wide the StackLayout is. See the [Dimensions]({%slug common-features/dimensions%}) article for more details on what units you can use and how dimensions in percent work.
59
+
## StackLayout Parameters
98
60
99
-
*`Orientation` - whether the content will be aligned horizontally or vertically. Takes a member of the `StackLayoutOrientation` enum and defaults to `Horizontal`. See the [Layout]({%slug stacklayout-layout%}) article for more information.
61
+
The Blazor StackLayout provides various parameters that allow you to configure the component:
100
62
101
-
*`Spacing` - the space between the elements in the StackLayout. See the [Layout]({%slug stacklayout-layout%}) article for more information.
102
-
103
-
*`HorizontalAlign` - controls the alignment of the items in the StackLayout based on the X axis. Takes a member of the `StackLayoutHorizontalAlign` enum. See the [Layout]({%slug stacklayout-layout%}) article for more information.
104
-
105
-
*`VerticalAlign` - controls the alignment of the items in the StackLayout based on the Y axis. Takes a member of the `StackLayoutVerticalAlign` enum. See the [Layout]({%slug stacklayout-layout%}) article for more information.
63
+
<style>
64
+
articlestyle+table {
65
+
table-layout: auto;
66
+
word-break: normal;
67
+
}
68
+
</style>
69
+
| Parameter | Type and Default Value | Description |
70
+
| ----------- | ----------- | ----------- |
71
+
|`Class`|`string`| The CSS class to be rendered on the main wrapping element of the StackLayout component, which is `<div class="k-stack-layout">`. Use for [styling customizations]({%slug themes-override%}). |
72
+
|`Height`|`string`| The StackLayout height as a CSS unit. See the [Dimensions]({%slug common-features/dimensions%}) article for more details on what units you can use and how percentage dimensions work. |
73
+
|`Width`|`string`| The StackLayout width as a CSS unit. See the [Dimensions]({%slug common-features/dimensions%}) article for more details on what units you can use and how percentage dimensions work. |
74
+
|`Orientation`|`StackLayoutOrientation` enum <br/> (`StackLayoutOrientation.Horizontal`) | Whether the content will be aligned horizontally or vertically. See the [Layout Orientation]({%slug stacklayout-layout%}#orientation) article for more information. |
75
+
|`Spacing`|`string`| The space between the elements in the StackLayout. See the [Layout Spacing]({%slug stacklayout-layout%}#spacing) article for more information. |
76
+
|`HorizontalAlign`|`StackLayoutHorizontalAlign` enum <br/> (`StackLayoutHorizontalAlign.Stretch`) | The StackLayout items alignment based on the X axis. See the [Layout HorizontalAlign]({%slug stacklayout-layout%}#horizontalalign) article for more information. |
77
+
|`VerticalAlign`|`StackLayoutVerticalAlign` enum <br/> (`StackLayoutVerticalAlign.Stretch`) | The StackLayout items alignment based on the Y axis. See the [Layout VerticalAlign]({%slug stacklayout-layout%}#verticalalign) article for more information. |
106
78
107
79
## Nested StackLayouts
108
80
109
-
Sometimes you need to create a more complex layout that includes both horizontal and vertical items. To do that, you can nest TelerikStackLayout components inside one another.
81
+
Sometimes you may need to create a more complex layout that includes both horizontal and vertical items. To do that, nest `TelerikStackLayout` components inside one another.
110
82
111
-
>caption Use nested StackLayout to create a page layout
83
+
>caption Use nested StackLayout to create a page layout.
0 commit comments