Items Appearance
The Drawer component allows you to modify its textual content and styling according to the specific project requirements.
To configure the Drawer items, use its built-in items property and bind it to an array of DrawerItem elements.
The Drawer provides various configuration options and enables you to do the following:
- Specify the text
- Set the selected items
- Disable specific items
- Change the style of the items
- Display icons
Setting the Item Text
You can set the text of the Drawer's items by utilizing the text property.
The following example demonstrates how to set the text property of the Drawer.
Setting the Selected Items
You can modify the selected state of the items in the Drawer by using the selected property.
The following example demonstrates how to set the selected property of the Drawer.
Disabling Specific Items
You can disable Drawer items by setting the disabled property to true.
The following example demonstrates how to set the disabled property of the Drawer.
Styling the Items
You can customize the styling of the Drawer's items by using either of the following approaches:
The following example demonstrates how to set the cssClass and cssStyle properties of the Drawer.
Displaying Icons
Depending on the configuration of the project, you can enhance the content of the Drawer by displaying any of the following icon types:
As of R2 2023 (
v13.0.0) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed fromfonttosvg. Set thesvgIconproperty, or Continue Using Font Icons.
Displaying SVG Icons
To display an SVG icon inside the Drawer set the svgIcon property of the Drawer to the necessary SVGIcon. For details, go to the list of SVG icons supported by Kendo UI for Angular.
The following example demonstrates how to set the svgIcon property of the Drawer.
Displaying Font Icons
To display a font icon inside the Drawer:
- Use the
ICON_SETTINGStoken of the Icons package and set the icon type tofont. For more information, go to the topic about icon settings. - Depending on the font icons library, you can set the:
iconproperty to a font icon in the Kendo UI theme. For details, go to the list of font icons supported by Kendo UI for Angular.public items: Array<DrawerItem> = [{ text: "Inbox", icon: "k-i-inbox" }];iconClassproperty to a third-party font icon (like FontAwesome).public items: Array<DrawerItem> = [{ text: "Inbox", iconClass: "fa fa-inbox" }];
The following example demonstrates how to set the icon property of the Drawer.
The following example demonstrates how to set the iconClass property of the Drawer.
