React ButtonGroup - items
The items array can contain:
- Objects with fields described in this section
- Objects with any other fields. In this case, specify the buttonTemplate.
If you need to update the UI component items, reassign the entire items[] array as shown in the following example:
- buttonGroupInstance.option('items', newItems);
See Also
component
An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
elementAttr
Specifies the global attributes to be attached to the button group item's container element.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import ButtonGroup from 'devextreme-react/button-group';
- const buttonGroupItems = [{
- // ...
- elementAttr: {
- class: "class-name"
- }
- }, // ...
- ];
- export default function App() {
- return (
- <ButtonGroup ...
- items={buttonGroupItems}
- />
- );
- }
icon
This property accepts one of the following:
- The icon's URL
- The icon's name if the icon is from the DevExtreme icon library
- The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
- The icon in the Base64 format
- The icon in the SVG format. Ensure that the source is reliable.
render
An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
template
The following types of the specified value are available.
- Assign a string containing the name of the required template.
- Assign a DOM Node of the template's container.
The following example adds a custom item to the component. In React, specify the render or component properties.
- import React from 'react';
- import ButtonGroup, {
- Item
- } from 'devextreme-react/button-group';
- const renderCustomItem = () => {
- return <div>Custom Item</div>;
- }
- const App() = () => {
- return (
- <ButtonGroup ... >
- <Item ...
- render={renderCustomItem}
- >
- </Item>
- </ButtonGroup>
- );
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.