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/panelbar/overview.md
+39-31Lines changed: 39 additions & 31 deletions
Original file line number
Diff line number
Diff line change
@@ -12,24 +12,13 @@ position: 0
12
12
13
13
The <ahref="https://www.telerik.com/blazor-ui/panelbar"target="_blank">Blazor PanelBar component</a> displays [data]({%slug panelbar-data-binding-overview%}) ([flat]({%slug panelbar-data-binding-flat%}) or [hierarchical]({%slug panelbar-data-binding-hierarchical%})) in an accordion type structure. In addition to built-in [navigation capabilities]({%slug panelbar-navigation%}), you can navigate through the items and their children, define [templates]({%slug panelbar-templates%}), render text and [icons/images]({%slug panelbar-icons%}), and respond to [events]({%slug panelbar-events%}).
14
14
15
-
16
-
17
-
#### In this article:
18
-
19
-
*[Basics](#basics)
20
-
21
-
*[Elements of a PanelBar Item](#elements-of-a-panelbar-item)
22
-
23
-
24
-
## Basics
25
-
26
-
To use a Telerik PanelBar for Blazor:
15
+
16
+
## Creating Blazor PanelBar
27
17
28
18
1. Add the `TelerikPanelBar` tag
29
-
1. Provide a collection of models to its `Data` parameter (read more in the [Data Binding article]({%slug panelbar-data-binding-overview%}))
30
-
1. Match the fields in the models with the binding schema for the nodes
19
+
1. Populate the `Data` property with the collection of items that you want to appear in the PanelBar. The component will automatically recognize property names like `Id`, `ParentId`, `Text` and a few others. Otherwise, [use bindings to configure custom property names]({%slug panelbar-data-binding-overview%}#data-bindings).
31
20
32
-
>caption Basic PanelBar with flat data binding and built-in icons
21
+
>caption Basic PanelBar with hierarchical data binding
33
22
34
23
````CSHTML
35
24
@* Provide a flat collection of models to the PanelBar *@
@@ -121,32 +110,51 @@ To use a Telerik PanelBar for Blazor:
121
110
}
122
111
````
123
112
124
-
>caption The result from the snippet above
113
+
## Data Binding
125
114
126
-
115
+
To show any items, the Blazor PanelBar requires a data source that you can provide through the `Data` property. The PanelBar allows you to display the items both as flat data and hierarchically. [Read more about the Blazor PanelBar data binding...]({%slug panelbar-data-binding-overview%})
127
116
128
-
>caption Component namespace and reference
117
+
## Elements of a PanelBar Item
129
118
130
-
````CSHTML
131
-
@* Get a reference to the PanelBar *@
119
+
Each item in the PanelBar consists of a `Header` and `Content`. The image below illustrates the concept.
132
120
133
-
<TelerikPanelBar @ref="@PanelBarReference">
134
-
</TelerikPanelBar>
121
+
The `Header` contains the Text of the correponding data item (model). The `Content` represents the items in the hierarchy that do not have children.
Each item in the PanelBar consists of a `Header`and `Content`. The image below illustrates the concept.
127
+
The PanelBar allows customizing of its item elements. Use [Header Template]({%slug panelbar-templates-header%}) and [Content Template]({%slug panelbar-templates-content%}) to override the default rendering. A `ContentTemplate` displays like a child item. It is rendered only for the items, which have no children.
144
128
145
-
You can customize their rendering through the corresponding [Header Template]({%slug panelbar-templates-header%}) and [Content Template]({%slug panelbar-templates-content%}).
129
+
## Navigation
146
130
147
-
The content represents the items in the hierarchy that do not have children. If the items have children and the ContentTemplate is defined, the template will not render. The header contains the Text of the correponding data item (model).
131
+
The PanelBar can be used to navigate between different pages in the application. [Read more about the Blazor PanelBar navigation...]({%slug panelbar-navigation%})
To illustrate the purpose of each item, the Blazor PanelBar allows you to add images, icon classes, or font icons. [Read more about the Blazor PanelBar icons...]({%slug panelbar-icons%})
136
+
137
+
## Events
138
+
139
+
The Blazor PanelBar generates events that you can handle to respond to the user action. [Read more about the Blazor PanelBar events...]({%slug panelbar-events%})
140
+
141
+
## PanelBar Parameters
142
+
143
+
The following table lists PanelBar parameters, which are not related to other features on this page. Check the [PanelBar API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikPanelBar) for a full list of properties, methods and events.
| Attribute | Type and Default Value | Description |
148
+
|---|---|---|
149
+
|`Class`|`string`| The CSS class that will be rendered on the main wrapping element of the component.|
150
+
|`ExpandedItems`|`IEnumerable<Object>`| A collection of the expanded PanelBar items. Supports two-way binding. Read more in the [ExpandedItems]({%slug panelbar-expand-items%}) article. |
151
+
|`ExpandMode`|`PanelBarExpandMode` enum <br/> (`PanelBarExpandMode.Multiple`) | Whether the PanelBar will allow single or multiple items to be expanded at a time. Read more in the [ExpandMode]({%slug panelbar-expand-items%}#expandmode) section. |
152
+
153
+
154
+
## Next Steps
155
+
156
+
*[Binding PanelBar PanelBar to Data]({%slug panelbar-data-binding-overview%})
157
+
*[Using the PanelBar to Navigate between Pages]({%slug panelbar-navigation%})
0 commit comments