VerticalBar
A vertical bar is a flexible container that organizes items vertically.
| install | yarn add @clayui/core |
|---|---|
| version | 3.123.0 |
VerticalBar
| Property | Description |
|---|---|
absoluteboolean | Flag to position the component using absolute rather than a
fixed position. The default value is false |
activation'manual' | 'automatic' | Flag to indicate the navigation behavior in the tab.
- manual - it will just move the focus and tab activation is done just
by pressing space or enter.
- automatic - moves the focus to the tab and activates the tab. The default value is 'manual' |
childrenReact.ReactNode | The VerticalBar content. |
classNamestring | Sets the CSS className for the component. |
defaultPanelWidthnumber | Panel width initial value (uncontrolled). The default value is 320 |
position'left' | 'right' | Sets the position of the vertical bar. The default value is 'right' |
activeReact.Key | null | Sets the current active panel (controlled). |
defaultActiveReact.Key | null | Sets the default active panel (uncontrolled). The default value is null |
onActiveChangeInternalDispatch<React.Key | null> | Callback is called when the active state changes (controlled). |
onPanelWidthChangeInternalDispatch<number> | Callback called when panel width changes (controlled). |
panelWidthnumber | Sets a custom width on the sidebar panel (controlled). |
panelWidthMaxnumber | Sets a maximum width on the sidebar panel. The default value is 500 |
panelWidthMinnumber | Sets a minimum width on the sidebar panel. The default value is 280 |
resizeboolean | Flag to enable resizing the sidebar panel. The default value is false |
VerticalBar.Content
| Property | Description |
|---|---|
displayType'light' | 'dark' | Flag to determine which style the VerticalBar will display. The default value is 'light' |
VerticalBar.Bar
| Property | Description |
|---|---|
displayType'light' | 'dark' | Flag to determine which style the Bar will display. The default value is 'dark' |
VerticalBar.Item
| Property | Description |
|---|---|
childrenReact.ReactElement | Item content. |
dividerboolean | Sets the divider between items. The default value is false |
expandboolean | Flag to expand the item, the next one will be aligned at the bottom of
the bar. The default value is false |
VerticalBar.Panel
| Property | Description |
|---|---|
childrenReact.ReactNode | The panel content. |
tabIndexnumber | Indicates whether the panel can be focused. |