Skip to content

Commit cf0ec91

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent b615f64 commit cf0ec91

File tree

5 files changed

+522
-829
lines changed

5 files changed

+522
-829
lines changed

‎docs/controls/actionsheet/action-buttons.md

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
title: Action Buttons
3+
page_title: Kendo UI for jQuery ActionSheet Documentation - Action Buttons
4+
description: "Get started with the Kendo UI for jQuery ActionSheet and learn about its action buttons orientation options."
5+
slug: actionbuttons_orientation_actionsheet_widget
6+
position: 4
7+
---
8+
9+
# Action Buttons
10+
11+
Starting with the 2025 Q2 release, the ActionSheet allows configuring the orientation and layout of the action buttons.
12+
13+
## Orientation
14+
15+
By default, the ActionSheet component displays the action buttons in `horizontal` orientation, but also allows you to set their visualization to `vertical`. You can control this behavior with the [`actionButtonsOrientation`](/api/javascript/ui/actionsheet/configuration/actionbuttonsorientation) configuration option.
16+
17+
To configure the orientation of the action buttons, set the `actionButtonsOrientation` option to one of the following values:
18+
19+
* `vertical`
20+
* `horizontal`
21+
22+
The example below demonstrates the action buttons appearance in both `horizontal` and `vertical` modes.
23+
24+
```dojo
25+
<div>
26+
<label for="orientation">Orientation:</label>
27+
<select id="orientation">
28+
<option value="vertical">vertical</option>
29+
<option value="horizontal">horizontal</option>
30+
</select>
31+
</div>
32+
33+
34+
<button id="open">Open Actionsheet</button>
35+
<div id="actionsheet"></div>
36+
<script>
37+
var actionsheet = $('#actionsheet').kendoActionSheet({
38+
title: 'Select item',
39+
actionButtonsOrientation: 'vertical',
40+
actionButtons: [
41+
{
42+
icon: "check",
43+
fillMode: "solid",
44+
themeColor: "primary",
45+
rounded: "full",
46+
size: "large",
47+
text: "Confirm"
48+
},
49+
{
50+
icon: "x",
51+
fillMode: "flat",
52+
size: "large",
53+
text: "Close"
54+
}
55+
]
56+
}).data('kendoActionSheet');
57+
58+
$('#open').kendoButton({
59+
themeColor: 'primary',
60+
click: function(){
61+
actionsheet.open();
62+
}
63+
})
64+
65+
$("#orientation").kendoDropDownList({
66+
change: function(e){
67+
actionsheet.setOptions({
68+
actionButtonsOrientation: $("#orientation").val()
69+
});
70+
}
71+
});
72+
</script>
73+
```
74+
75+
## Alignment
76+
77+
The ActionSheet component supports multiple types of [`actionButtonsAlignment`](/api/javascript/ui/actionsheet/configuration/actionbuttonsalignment). By default, the action buttons are rendered `stretched`. This alignment of the action buttons works only when the `actionButtonsOrientation` is set to `horizontal` mode. The supported values are:
78+
79+
* `stretched`
80+
* `justify`
81+
* `start`
82+
* `center`
83+
* `end`
84+
85+
The example below demonstrates all alignments:
86+
87+
```dojo
88+
<div>
89+
<label for="alignment">Alignment:</label>
90+
<select id="alignment">
91+
<option value="start">start</option>
92+
<option value="end" >end</option>
93+
<option value="center">center</option>
94+
<option value="stretched" selected="true">stretched</option>
95+
<option value="justify">justify</option>
96+
</select>
97+
</div>
98+
99+
<div id="actionsheet"></div>
100+
<script>
101+
var actionsheet = $('#actionsheet').kendoActionSheet({
102+
title: 'Select item',
103+
items: [
104+
{
105+
text: 'Add to Favorites',
106+
iconClass: 'k-i-heart',
107+
}
108+
],
109+
actionButtons: [
110+
{
111+
icon: "check",
112+
fillMode: "solid",
113+
themeColor: "primary",
114+
rounded: "full",
115+
size: "large",
116+
text: "Confirm"
117+
},
118+
{
119+
icon: "x",
120+
fillMode: "flat",
121+
size: "large",
122+
text: "Close"
123+
}
124+
]
125+
}).data('kendoActionSheet');
126+
127+
128+
$("#alignment").kendoDropDownList({
129+
change: function(){
130+
actionsheet.setOptions({
131+
actionButtonsAlignment: $("#alignment").val()
132+
});
133+
actionsheet.open();
134+
}
135+
});
136+
</script>
137+
```
138+
139+
## See Also
140+
141+
* [Orientation of the ActionSheet (Demo)](https://demos.telerik.com/kendo-ui/actionsheet/orientation)
142+
* [JavaScript API Reference of the ActionSheet](/api/javascript/ui/actionsheet)

‎docs/controls/menu/icons.md

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
title: Icons
3+
page_title: jQuery Menu Documentation - Icons
4+
description: "Learn how you can show icons in the Menu from a field in the dataSource."
5+
slug: icons_kendoui_menu
6+
position: 6
7+
---
8+
9+
# Icons
10+
11+
Starting with Kendo UI for jQuery R2 2025, the Menu exposes two new icon-related fields&mdash;the [`dataIconField`](/api/javascript/ui/menu/configuration/dataiconfield) and the [`dataIconClassField`](/api/javascript/ui/menu/configuration/dataiconclassfield) options. Depending on your project's needs, you can enhance the content of the Menu by displaying either an SVG or a Font Icon. To display an icon in the items of the Menu, select one from the <a href="https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/" target="_blank">list of icons supported by Kendo UI for jQuery</a>, and set the `icon` field to the necessary icon name.
12+
13+
## SVG Icon
14+
15+
The following example demonstrates how to configure an SVG icon in the Menu's `dataSource`, and how to set a custom class for the first Menu item.
16+
17+
```dojo
18+
<ul id="menu"></ul>
19+
20+
<script>
21+
var menu = $("#menu").kendoMenu({
22+
dataTextField:"text",
23+
dataIconField:"iconName",
24+
dataIconClassField:"iconClass",
25+
dataSource:[
26+
{text: "Home", iconName: "home", iconClass: "custom-icon-class"},
27+
{text: "About Us", iconName: "info-circle"},
28+
{text: "Contact", iconName: "envelope"}
29+
]
30+
}).data("kendoMenu");
31+
</script>
32+
```
33+
34+
## Font Icon
35+
36+
The following example demonstrates how to configure a font icon in the Menu's `dataSource`.
37+
38+
```dojo
39+
<ul id="menu"></ul>
40+
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
41+
<script>
42+
kendo.setDefaults("iconType", "font")
43+
$("#menu").kendoMenu({
44+
dataSource:[
45+
{text: "Home", icon: "home"},
46+
{text: "About Us", icon: "info-circle"},
47+
{text: "Contact", icon: "envelope"}
48+
]
49+
})
50+
</script>
51+
```
52+
53+
## Icon Position
54+
55+
Staring with the Kendo UI for jQuery R2 2025 release, you can choose to display the icons before (default) or after the text. The following example shows how to display the icons after the item text.
56+
57+
```dojo
58+
<ul id="menu"></ul>
59+
<script>
60+
$("#menu").kendoMenu({
61+
iconPosition: "after",
62+
dataSource:[
63+
{text: "Home", icon: "home"},
64+
{text: "About Us", icon: "info-circle"},
65+
{text: "Contact", icon: "envelope"}
66+
]
67+
})
68+
</script>
69+
```
70+
71+
## See Also
72+
73+
* [Basic Usage of the Menu (Demo)](https://demos.telerik.com/kendo-ui/menu/index)
74+
* [Using the API of the Menu (Demo)](https://demos.telerik.com/kendo-ui/menu/api)
75+
* [JavaScript API Reference of the Menu](/api/javascript/ui/menu)

‎docs/intro/installation/images/source-code.png

1.42 KB
Loading

0 commit comments

Comments
 (0)