UNPKG

@ui5/webcomponents-react

Version:

React Wrapper for UI5 Web Components and additional components

44 lines (43 loc) 1.9 kB
'use client'; import '@ui5/webcomponents/dist/Tree.js'; import { withWebComponent } from '../../internal/withWebComponent.js'; /** * The `Tree` component provides a tree structure for displaying data in a hierarchy. * * ### Usage * * #### When to use: * * - To display hierarchically structured items. * - To select one or more items out of a set of hierarchically structured items. * * #### When not to use: * * - To display items not hierarchically structured. In this case, use the List component. * - To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate. * - The hierarchy turns out to have only two levels. In this case, use List with group items. * * ### Keyboard Handling * * The `Tree` provides advanced keyboard handling. * The user can use the following keyboard shortcuts in order to navigate trough the tree: * * - [Up] or [Down] - Navigates up and down the tree items that are currently visible. * - [Right] - Drills down the tree by expanding the tree nodes. * - [Left] - Goes up the tree and collapses the tree nodes. * * The user can use the following keyboard shortcuts to perform selection, * when the `selectionMode` property is in use: * * - [Space] - Selects the currently focused item upon keyup. * - [Enter] - Selects the currently focused item upon keydown. * * * * `import "@ui5/webcomponents/dist/TreeItem.js";` * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) */ const Tree = withWebComponent('ui5-tree', ['accessibleName', 'accessibleNameRef', 'footerText', 'headerText', 'noDataText', 'selectionMode'], [], ['header'], ['item-click', 'item-delete', 'item-mouseout', 'item-mouseover', 'item-toggle', 'selection-change']); Tree.displayName = 'Tree'; export { Tree };