Skip to content

Commit 51a5a04

Browse files
dimodidimodi
authored
kb(ToolBar): Add KB for vertical display (#3106)
1 parent e9ffa29 commit 51a5a04

File tree

2 files changed

+135
-1
lines changed

2 files changed

+135
-1
lines changed

‎components/toolbar/appearance.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,4 +84,5 @@ You can increase or decrease the size of the ToolBar by setting the `Size` param
8484

8585
## See Also
8686

87-
* [Live Demo: ToolBar Appearance](https://demos.telerik.com/blazor-ui/toolbar/appearance)
87+
* [Live Demo: ToolBar Appearance](https://demos.telerik.com/blazor-ui/toolbar/appearance)
88+
* [Vertical ToolBar](slug:toolbar-kb-vertical-orientation-display)

‎knowledge-base/toolbar-vertical-orientation-display.md

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
title: Display Vertical ToolBar
3+
description: Learn how to display the Telerik ToolBar for Blazor vertically.
4+
type: how-to
5+
page_title: How to Display Vertical ToolBar
6+
slug: toolbar-kb-vertical-orientation-display
7+
tags: telerik, blazor, toolbar
8+
ticketid: 1693045
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>ToolBar for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
This KB answers the following questions:
26+
27+
* How to display the TelerikToolBar vertically?
28+
* How to render the Telerik ToolBar for Blazor with vertical orientation?
29+
* How to arrange the ToolBar buttons one below the other?
30+
31+
## Solution
32+
33+
1. Disable the automatic tool overflowing with `OverflowMode="@ToolBarOverflowMode.None"` or `Adaptive="false"` in older versions.
34+
1. Set a custom CSS class to the ToolBar with the `Class` parameter.
35+
1. Use the custom CSS class to [override the ToolBar CSS styles](slug:themes-override):
36+
* Set `column` `flex-flow` for the ToolBar and any nested [ButtonGroups](slug:toolbar-built-in-tools#toolbarbuttongroup). See [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for more information.
37+
* Reduce the component `width`.
38+
* Adjust the `border-radius` values of buttons inside nested ButtonGroups.
39+
40+
>caption Configure a vertical Telerik ToolBar for Blazor
41+
42+
````RAZOR
43+
<h4>Block ToolBar</h4>
44+
45+
before
46+
47+
<TelerikToolBar Class="vertical-toolbar" Adaptive="false">
48+
<ToolBarButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
49+
<ToolBarToggleButton Icon="@SvgIcon.Bold" @bind-Selected="@BoldSelected" />
50+
<ToolBarToggleButton Icon="@SvgIcon.Italic" @bind-Selected="@ItalicSelected" />
51+
<ToolBarToggleButton Icon="@SvgIcon.Underline" @bind-Selected="@UnderlineSelected" />
52+
</ToolBarButtonGroup>
53+
54+
<ToolBarButton Icon="@SvgIcon.Save"></ToolBarButton>
55+
<ToolBarButton Icon="@SvgIcon.Cancel"></ToolBarButton>
56+
<ToolBarButton Icon="@SvgIcon.Trash"></ToolBarButton>
57+
58+
<ToolBarButton Icon="@SvgIcon.Undo"></ToolBarButton>
59+
</TelerikToolBar>
60+
61+
after
62+
63+
<h4>Inline ToolBar</h4>
64+
65+
before
66+
67+
<TelerikToolBar Class="vertical-toolbar inline-toolbar" Adaptive="false">
68+
<ToolBarButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
69+
<ToolBarToggleButton Icon="@SvgIcon.Bold" @bind-Selected="@BoldSelected" />
70+
<ToolBarToggleButton Icon="@SvgIcon.Italic" @bind-Selected="@ItalicSelected" />
71+
<ToolBarToggleButton Icon="@SvgIcon.Underline" @bind-Selected="@UnderlineSelected" />
72+
</ToolBarButtonGroup>
73+
74+
<ToolBarButton Icon="@SvgIcon.Save"></ToolBarButton>
75+
<ToolBarButton Icon="@SvgIcon.Cancel"></ToolBarButton>
76+
<ToolBarButton Icon="@SvgIcon.Trash"></ToolBarButton>
77+
78+
<ToolBarButton Icon="@SvgIcon.Undo"></ToolBarButton>
79+
</TelerikToolBar>
80+
81+
after
82+
83+
<style>
84+
85+
/* Optional inline display */
86+
87+
.vertical-toolbar.inline-toolbar {
88+
display: inline-flex;
89+
}
90+
91+
/* Apply vertical orientation */
92+
.vertical-toolbar,
93+
.vertical-toolbar .k-button-group {
94+
flex-flow: column wrap;
95+
}
96+
97+
/* Reduce width */
98+
.vertical-toolbar {
99+
width: min-content;
100+
}
101+
102+
/* Remove unnecessary empty space at the top */
103+
.vertical-toolbar::before {
104+
content: none;
105+
}
106+
107+
/* Adjust rounded corners in Button Groups */
108+
.vertical-toolbar .k-button-group > .k-button:first-child {
109+
border-start-end-radius: 4px;
110+
border-end-start-radius: 0;
111+
}
112+
113+
.vertical-toolbar .k-button-group > .k-button:last-child {
114+
border-start-end-radius: 0;
115+
border-end-start-radius: 4px;
116+
}
117+
118+
.vertical-toolbar .k-button-group > .k-button + .k-button {
119+
margin-inline-start: 0;
120+
margin-block-start: -1px;
121+
}
122+
</style>
123+
124+
@code {
125+
private bool BoldSelected { get; set; }
126+
private bool ItalicSelected { get; set; }
127+
private bool UnderlineSelected { get; set; }
128+
}
129+
````
130+
131+
## See Also
132+
133+
* [ToolBar Overview](slug:toolbar-overview)

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy