TreeViewItemToggle is a semantic container for a row's expand/collapse toggle. Provides consistent styling and structure for displaying a toggle affordance within the TreeViewItemToggle component. When no children are supplied, defaults to a chevron icon that reflects the current expanded state.
import { TreeView, TreeViewNodes, TreeViewNode, TreeViewItemLabel, TreeViewItemToggle } from '@syncfusion/react-navigations';
import { ChevronDownFillIcon, ChevronRightFillIcon } from '@syncfusion/react-icons';
const data = [
{ id: '1', label: 'Documents', child: [{ id: '2', label: 'Resume.docx' }] }
];
const fields = { id: 'id', label: 'label', children: 'child' };
export default function App() {
return (
<TreeView dataSource={data} fields={fields}>
<TreeViewNodes>
{(ctx) => (
<TreeViewNode>
<TreeViewItemToggle>
{ctx.expanded ? <ChevronDownFillIcon /> : <ChevronRightFillIcon />}
</TreeViewItemToggle>
<TreeViewItemLabel />
</TreeViewNode>
)}
</TreeViewNodes>
</TreeView>
);
}
The following table outlines the props for the TreeViewItemToggleProps:
| Name | Type | Default | Description |
|---|
| children | node | - | Specifies the child content for the component. |
| className | string | - | Specifies the root element class name. |