Skip to content

Commit a54ec27

Browse files
svdimitrmarin-bratanov
svdimitr
and
marin-bratanov
authored
Drawer docs (#67)
* docs(drawer): initial commit * docs(drawer): creation of new folders and overview article * docs(drawer): Updated overview article and added images folder * docs(drawer): minor changes on overview) * docs(drawer): Selection article initial commit * docs(drawer): Events article initial commit * docs(drawer): Fix typos * docs(drawer): Updates on overview article; initial commit of Modes article /the Overlay mode is not ready/ * chore(selection): updated selection article; i will follow up on this commit when the Overlay fix is live * chore(modes): improvements on the modes article * chore(overview): updates on the overview article based on last fixes to the component * docs(drawer): inital commit of minimode article * chore(events): updates on the events article to showcase the ExpandedChanged parameter * chore(modes): added overlay mode * chore(drawer): fix build * chore(overview): Updates on overview article * chore(overview): minor wording fixes * chore(overview): deleted the example section * docs(drawer): data binding and navigation menu example * chore(docs): updated examples to work with last changes * chore(mini-mode): improvements on minimode article * chore(drawer): typo * chore(drawer): separate navigation article * chore(common): reorder list of components * docs(drawer): updates on articles and initial templates commit * chore(templates): updated templates article * chore(drawer): improve overview article * chore(drawer): improve modes article * chore(drawer): mini mode improvements * chore(drawer): improve selection article * chore(drawer): improve templates article * chore(overview): fixed typo * chore(drawer): improve events article Co-authored-by: Marin Bratanov <m.bratanov@gmail.com>
1 parent ab35490 commit a54ec27

17 files changed

+866
-6
lines changed

‎_config.yml‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,8 @@ navigation:
164164
title: "Dialog"
165165
"*draganddrop":
166166
title: "DragAndDrop"
167+
"*drawer":
168+
title: "Drawer"
167169
"*dropdownlist":
168170
title: "DropDownList"
169171
"*dropdowntree":
@@ -280,12 +282,6 @@ intro_columns:
280282
"Scheduler": "scheduler-overview"
281283
"Calendar": "components/calendar/overview"
282284

283-
-
284-
title: "Layout"
285-
items:
286-
"Window": "components/window/overview"
287-
"Animation Container": "components/animationcontainer/overview"
288-
"Tooltip": "tooltip-overview"
289285

290286
-
291287
categories:
@@ -329,6 +325,12 @@ intro_columns:
329325
items:
330326
"File Upload": "upload-overview"
331327
-
328+
title: "Layout"
329+
items:
330+
"Window": "components/window/overview"
331+
"Animation Container": "components/animationcontainer/overview"
332+
"Tooltip": "tooltip-overview"
333+
"Drawer": "drawer-overview"
332334

333335

334336
## The application virtual path

‎components/drawer/data-bind.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: Data Binding
3+
page_title: Drawer for Blazor | Data Binding
4+
description: Data Binding in the Drawer for Blazor
5+
slug: drawer-data-binding
6+
tags: telerik,blazor,drawer,data,binding
7+
published: True
8+
position: 2
9+
---
10+
11+
# Drawer Data Binding
12+
13+
This article explains the how to provide data to a Drawer component so it renders items for you, the properties related to data binding and their results.
14+
15+
This article has the following sections:
16+
17+
* The available (bindable) [features of a drawer item](#drawer-item-features).
18+
* How to match fields in the model with the drawer item [data bindings](#data-bindings).
19+
20+
21+
## Drawer Item Features
22+
23+
The drawer items provide the following features that you control through the corresponding fields in their data binding:
24+
25+
26+
* `Text` - the text that will be shown on the item.
27+
* `Icon` / `IconClass` / `ImageUrl` - the [Telerik icon]({%slug general-information/font-icons%}), a class for a custom font icon, or the URL to a raster image that will be rendered in the item. They have the listed order of precedence in case more than one is present in the data (that is, an `Icon` will have the highest importance).
28+
* `Url` - the view the item will navigate to by generating a link.
29+
* `IsSeparator` - whether the item will be a separator line instead of a clickable item.
30+
31+
## Data Bindings
32+
33+
The properties of a drawer item match directly to a field of the model the drawer is bound to. You provide that relationship by providing the name of the field from which the corresponding information is present. To do this, use the properties in the main `TelerikDrawer` tag:
34+
35+
36+
* TextField => Text
37+
* IconClassField => IconClass
38+
* IconField => Icon
39+
* ImageUrlField => ImageUrl
40+
* UrlField => Url
41+
* IsSeparatorField => IsSeparator
42+
43+
44+
>tip There are default values for the field names. If your model names match the defaults, you don't have to define them in the bindings settings.
45+
46+
>caption Default field names for drawer item bindings. If you use these, you don't have to specify them in the `TelerikDrawer` tag explicitly.
47+
48+
````CSHTML
49+
public class DrawerItem
50+
{
51+
public string Text { get; set; }
52+
public string Icon { get; set; }
53+
public string Url { get; set; }
54+
public bool IsSeparator { get;set; }
55+
}
56+
````
57+
58+
59+
60+
61+
## See Also
62+
63+
* [Drawer Overview]({% slug drawer-overview%})
64+
* [Drawer Navigation]({% slug drawer-navigation%})
65+

‎components/drawer/events.md‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
---
2+
title: Events
3+
page_title: Drawer for Blazor | Events
4+
description: Events in the Drawer for Blazor
5+
slug: drawer-events
6+
tags: telerik,blazor,drawer,event,events
7+
published: True
8+
position: 25
9+
---
10+
11+
# Drawer Events
12+
13+
This article explains the events available in the Telerik Drawer for Blazor:
14+
15+
* [SelectedItemChanged](#selecteditemchanged)
16+
* [ExpandedChanged](#expandedchanged)
17+
18+
19+
## SelectedItemChanged
20+
21+
The `SelectedItemChanged` event fires every time the user clicks on a new item from the Drawer. You can use it with one-way data binding to respond to the user [selection]({%slug drawer-selection%}). It receives an argument of the Drawer data model type.
22+
23+
>caption Handle SelectedItemChanged event
24+
25+
````CSHTML
26+
@* This example shows how to use one-way data binding for the SelectedItem parameter *@
27+
28+
<TelerikDrawer Data="@Data" Expanded="true" MiniMode="true" Mode="DrawerMode.Push"
29+
SelectedItem="@selectedItem"
30+
SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))">
31+
<Content>
32+
<div class="text-info">
33+
Content for the @selectedItem?.Text
34+
</div>
35+
</Content>
36+
</TelerikDrawer>
37+
38+
@code {
39+
private void SelectedItemChangedHandler(DrawerItem item)
40+
{
41+
selectedItem = item;
42+
// if you don't update the view-model, the event will effectively be cancelled
43+
44+
Console.WriteLine($"The user selected {item.Text}");
45+
}
46+
47+
public DrawerItem selectedItem { get; set; }
48+
public IEnumerable<DrawerItem> Data { get; set; } =
49+
new List<DrawerItem>
50+
{
51+
new DrawerItem { Text = "Counter", Icon = IconName.Plus},
52+
new DrawerItem { Text = "FetchData", Icon = IconName.GridLayout},
53+
};
54+
55+
public class DrawerItem
56+
{
57+
public string Text { get; set; }
58+
public string Icon { get; set; }
59+
}
60+
}
61+
````
62+
63+
64+
## ExpandedChanged
65+
66+
The `ExpandedChanged` event fires every time the component's state is changed - to expanded or to collapsed. You can use it with one-way data binding for the `Expanded` parameter. It takes an argument of the `bool` type that corresponds to its new state - whether the drawer is expanded.
67+
68+
>tip If you only need conditional markup based on the expanded/collapsed state of the drawer, use two-way binding (`@bind-Expanded`) - in this example, hiding the button conditionally can be achieved either way, but two-way binding requires less code.
69+
70+
>caption Handle ExpandedChanged event
71+
72+
````CSHTML
73+
@* This example shows how to use one-way data binding for the Expanded parameter and show/hide the Expand Drawer button based on the value of Expanded *@
74+
75+
@if (!Expanded)
76+
{
77+
<TelerikButton OnClick="@(() => DrawerRef.ExpandAsync())" Icon="@IconName.Menu">Expand Drawer</TelerikButton>
78+
}
79+
80+
<TelerikDrawer Expanded="@Expanded"
81+
ExpandedChanged="((bool newValue) => ExpandedChangedHandler(newValue))"
82+
Data="@Data"
83+
MiniMode="true"
84+
Mode="@DrawerMode.Push"
85+
@bind-SelectedItem="@selectedItem"
86+
@ref="@DrawerRef">
87+
<Content>
88+
<div class="text-info">
89+
Content for the @selectedItem?.Text
90+
</div>
91+
</Content>
92+
</TelerikDrawer>
93+
94+
@code {
95+
private void ExpandedChangedHandler(bool value)
96+
{
97+
Expanded = value;
98+
// if you don't update the view-model, the event will be effectively cancelled
99+
100+
Console.WriteLine(string.Format("the user {0} the drawer.", Expanded ? "expanded" : "collapsed"));
101+
}
102+
103+
public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
104+
public DrawerItem selectedItem { get; set; }
105+
public bool Expanded { get; set; } = true;
106+
public IEnumerable<DrawerItem> Data { get; set; } =
107+
new List<DrawerItem>
108+
{
109+
new DrawerItem { Text = "Counter", Icon = IconName.Plus},
110+
new DrawerItem { Text = "FetchData", Icon = IconName.GridLayout},
111+
};
112+
113+
public class DrawerItem
114+
{
115+
public string Text { get; set; }
116+
public string Icon { get; set; }
117+
}
118+
}
119+
````
120+
>caption The result from the code snippet above
121+
122+
![drawer expandedchanged example](images/drawer-expandedchanged-example.gif)
123+
124+
@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
125+
126+
@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)

‎components/drawer/images/drawer-basic-example.gif‎

254 KB
Loading

‎components/drawer/images/drawer-expandedchanged-example.gif‎

52.4 KB
Loading

‎components/drawer/images/drawer-mini-mode-overview.jpg‎

43 KB
Loading

‎components/drawer/images/drawer-minimode-push-example.gif‎

77.8 KB
Loading

‎components/drawer/images/drawer-modes-overlay-example.gif‎

65.3 KB
Loading

‎components/drawer/images/drawer-modes-push-example.gif‎

69 KB
Loading

‎components/drawer/images/drawer-templates-itemtemplate-example.gif‎

137 KB
Loading

0 commit comments

Comments
 (0)