Skip to content

Commit 80fb29c

Browse files
xristianstefanovxristianstefanov
authored
[3.2] docs(toolbar): Responsive Overflow Popup (#881)
* [3.2] docs(toolbar): Responsive Overflow Popup * [3.2] docs(toolbar):fixes as per suggestions
1 parent a80ce0d commit 80fb29c

File tree

3 files changed

+74
-13
lines changed

3 files changed

+74
-13
lines changed

‎components/toolbar/built-in-tools.md

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,16 @@ The nested `ToolBarButton` tag exposes parameters that allow you to customize th
3434
</style>
3535
| Parameter | Type and Default Value | Description |
3636
| ----------- | ----------- | ----------- |
37-
| `Enabled` | `bool` <br /> `true` | Specifies if the button is clickable. |
38-
| `Visible` | `bool` <br /> `true` | Specifies if the button will be visible in the toolbar. |
39-
| `Title` | `string` | Maps to the `title` HTML attribute for the `<button>`. |
4037
| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the ToolbarButton. You could use that class to cascade styles. |
38+
| `Enabled` | `bool` <br /> `true` | Specifies if the button is clickable. |
4139
| `Icon` | `string` | Adds a font icon to the button. You can find more information on adding a font icon to a Telerik Component in [Telerik Font Icons article]({%slug general-information/font-icons%}#icon-in-telerik-component). |
40+
| `IconClass` | `string` | Allows you to set a CSS class that provides the required font name, font size and content for the `::before` pseudo-element. |
4241
| `ImageURL` | `string` | Adds an image to the button. You can provide an image url to this parameter. |
4342
| `SpriteClass` | `string` | Add a sprite class image to the button. Set this attribute to `k-icon MySpriteClass` where `MySpriteClass` defines the CSS rules for the sprite. |
44-
| `IconClass` | `string` | Allows you to set a CSS class that provides the required font name, font size and content for the `::before` pseudo-element. |
43+
| `Overflow` | `ToolBarItemOverflow` enum <br /> (`Auto`) | Specifies whether the item will be hidden when the ToolBar is resized. |
44+
| `OverflowText` | `string` | If not specified, it will get the normal text of the item. (not valid for Separators) |
45+
| `Title` | `string` | Maps to the `title` HTML attribute for the `<button>`. |
46+
| `Visible` | `bool` <br /> `true` | Specifies if the button will be visible in the toolbar. |
4547

4648
>caption The Telerik ToolBar with ToolBarButtons
4749
@@ -92,15 +94,17 @@ The nested `ToolBarToggleButton` tag exposes parameters that allow you to custom
9294
</style>
9395
| Parameter | Type and Default Value | Description |
9496
| ----------- | ----------- | ----------- |
95-
| `Selected` | `bool` | Specifies whether the button is in selected state. You can use it with one and two-way data binding with the `SelectedChanged` event. For more information on how to handle the `SelectedChanged` event see the [Events]({%slug toolbar-events%}) article. |
96-
| `Enabled` | `bool` <br /> `true` | Specifies if the button is clickable. |
97-
| `Visible` | `bool` <br /> `true` | Specifies if the button will be visible in the toolbar. |
98-
| `Title` | `string` | Maps to the `title` HTML attribute for the `<button>`. |
9997
| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the ToolbarButton. You could use that class to cascade styles. |
98+
| `Enabled` | `bool` <br /> `true` | Specifies if the button is clickable. |
10099
| `Icon` | `string` | Adds a font icon to the button. You can find more information on adding a font icon to a Telerik Component in [Telerik Font Icons article]({%slug general-information/font-icons%}#icon-in-telerik-component). |
100+
| `IconClass` | `string` | Allows you to set a CSS class that provides the required font name, font size and content for the `::before` pseudo-element. |
101101
| `ImageURL` | `string` | Adds an image to the button. You can provide an image url to this parameter. |
102+
| `Selected` | `bool` | Specifies whether the button is in selected state. You can use it with one and two-way data binding with the `SelectedChanged` event. For more information on how to handle the `SelectedChanged` event see the [Events]({%slug toolbar-events%}) article. |
102103
| `SpriteClass` | `string` | Add a sprite class image to the button. Set this attribute to `k-icon MySpriteClass` where `MySpriteClass` defines the CSS rules for the sprite. |
103-
| `IconClass` | `string` | Allows you to set a CSS class that provides the required font name, font size and content for the `::before` pseudo-element. |
104+
| `Overflow` | `ToolBarItemOverflow` enum <br /> (`Auto`) | Specifies whether the item will be hidden when the ToolBar is resized. |
105+
| `OverflowText` | `string` | If not specified, it will get the normal text of the item. (not valid for Separators) |
106+
| `Title` | `string` | Maps to the `title` HTML attribute for the `<button>`. |
107+
| `Visible` | `bool` <br /> `true` | Specifies if the button will be visible in the toolbar. |
104108

105109
>caption The Telerik ToolBar with ToolBarToggleButtons
106110
@@ -154,10 +158,12 @@ The nested `ToolBarButtonGroup` tag exposes parameters that allow you to customi
154158
</style>
155159
| Parameter | Type and Default Value | Description |
156160
| ----------- | ----------- | ----------- |
157-
| `Visible` | `bool` <br /> `true` | Specifies if the group will be visible in the toolbar. |
158-
| `SelectionMode` | `ButtonGroupSelectionMode` enum <br /> `Single` | Specifies whether you can select one or multiple buttons from the group at the same time (applicable for `ToolBarToggleButton` instances inside it). |
159-
| `Enabled` | `bool` <br /> `true` | Specifies if the group is clickable. |
160161
| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the ToolBarButtonGroup. You could use that class to cascade styles. |
162+
| `Enabled` | `bool` <br /> `true` | Specifies if the group is clickable. |
163+
| `SelectionMode` | `ButtonGroupSelectionMode` enum <br /> `Single` | Specifies whether you can select one or multiple buttons from the group at the same time (applicable for `ToolBarToggleButton` instances inside it). |
164+
| `Overflow` | `ToolBarItemOverflow` enum <br /> (`Auto`) | Specifies whether the item will be hidden when the ToolBar is resized. |
165+
| `OverflowText` | `string` | If not specified, it will get the normal text of the item. (not valid for Separators) |
166+
| `Visible` | `bool` <br /> `true` | Specifies if the group will be visible in the toolbar. |
161167
| `Width` | `string` | Allows you to control the width of the group. |
162168

163169
>caption The Telerik ToolBar with grouped buttons

‎components/toolbar/overview.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,63 @@ The Blazor ToolBar provides parameters to configure the component:
8787

8888
| Parameter | Type | Description |
8989
| ----------- | ----------- | ----------- |
90+
| `Adaptive ` | `bool` | Toggles the overflow popup of the toolbar. Consistent with the chosen name for the pager. |
9091
| `Class` | `string` | The CSS class to be rendered on the main wrapping element of the ToolBar component, which is `<div class="k-toolbar">`. Use for [styling customizations]({%slug themes-override%}). |
9192

93+
## Example
94+
95+
The Blazor Toolbar has an option for adaptiveness. This option allows you to hide the items overflowing in a popup.
96+
97+
>We do **not** recommend using `ToolBarTemplateItem` with the responsive overflow popup as there is a high chance of breaking the popup.
98+
99+
>caption Responsive Overflow Popup
100+
101+
````CSHTML
102+
<TelerikButton OnClick="ChangeWidth">Change Width!</TelerikButton>
103+
104+
<br />
105+
<br />
106+
107+
<div class="toolbar-wrapper">
108+
<TelerikToolBar Adaptive="@ToolBarAdaptive">
109+
<ToolBarButton Icon="undo">Undo</ToolBarButton>
110+
<ToolBarButton Icon="redo">Redo</ToolBarButton>
111+
<ToolBarButton Icon="image" Overflow="ToolBarItemOverflow.Always">Image</ToolBarButton>
112+
<ToolBarSeparator></ToolBarSeparator>
113+
<ToolBarToggleButton Icon="apply-format"></ToolBarToggleButton>
114+
<ToolBarSeparator></ToolBarSeparator>
115+
<ToolBarButton Icon="copy" Overflow="ToolBarItemOverflow.Never">Copy</ToolBarButton>
116+
<ToolBarButton Icon="paste" Overflow="ToolBarItemOverflow.Never">Paste</ToolBarButton>
117+
<ToolBarSeparator></ToolBarSeparator>
118+
<ToolBarButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
119+
<ToolBarToggleButton Icon="align-left" OverflowText="Left"></ToolBarToggleButton>
120+
<ToolBarToggleButton Icon="align-center" OverflowText="Center"></ToolBarToggleButton>
121+
<ToolBarToggleButton Icon="align-right" OverflowText="Right"></ToolBarToggleButton>
122+
</ToolBarButtonGroup>
123+
</TelerikToolBar>
124+
</div>
125+
126+
@code {
127+
void ChangeWidth()
128+
{
129+
Width = 40;
130+
}
131+
132+
public double Width { get; set; } = 100;
133+
public bool ToolBarAdaptive { get; set; } = true;
134+
}
135+
136+
<style>
137+
.toolbar-wrapper{
138+
width: @(Width.ToString() + "%");
139+
}
140+
141+
.toolbar-slider {
142+
padding: 0px 16px;
143+
}
144+
</style>
145+
````
146+
92147
## Next Steps
93148

94149
* [Explore the ToolBar built-in tools]({%slug toolbar-built-in-tools%})

‎components/toolbar/separators.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ position: 5
1212

1313
You can visually separate the items in the Telerik ToolBar for Blazor. Depending on the needs of your application you can use of the following, or a combination of them:
1414

15-
* `ToolBarSeparator` - to separate two items with a solid line you should add the `<ToolBarSeparator>` tag between them.
15+
* `ToolBarSeparator` - to separate two items with a solid line, add the `<ToolBarSeparator>` tag between them.
1616

1717
* `ToolBarSpacer` - defines empty space in the toolbar which separates the items. The space between the items is automatically calculated to fit the width of the ToolBar. For example, one spacer in the middle of the items will push the second part of items to the right-hand side of the toolbar.
1818

0 commit comments

Comments
 (0)