VerticalBar

yarn add @clayui/core

A vertical bar is a flexible container that organizes items vertically.

Beta 3.91.0 CHANGELOG

VerticalBar

Property	Description
`absolute` `boolean`	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'
`children` `React.ReactNode`	The VerticalBar content.
`className` `string`	Sets the CSS className for the component.
`defaultPanelWidth` `number`	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'
`active` `React.Key \| null`	Sets the current active panel (controlled).
`defaultActive` `React.Key \| null`	Sets the default active panel (uncontrolled). The default value is null
`onActiveChange` `InternalDispatch<React.Key \| null>`	Callback is called when the active state changes (controlled).
`onPanelWidthChange` `InternalDispatch<number>`	Callback called when panel width changes (controlled).
`panelWidth` `number`	Sets a custom width on the sidebar panel (controlled).
`panelWidthMax` `number`	Sets a maximum width on the sidebar panel. The default value is 500
`panelWidthMin` `number`	Sets a minimum width on the sidebar panel. The default value is 280
`resize` `boolean`	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
`children` `React.ReactElement`	Item content.
`divider` `boolean`	Sets the divider between items. The default value is false
`expand` `boolean`	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
`children` `React.ReactNode`	The panel content.
`tabIndex` `number`	Indicates whether the panel can be focused.