New to KendoReactLearn about KendoReact Free.

PanelBarProps

Represents the props of the KendoReact PanelBar component.

NameTypeDefaultDescription

animation?

boolean

Sets the animation state of the PanelBar.

jsx
<PanelBar animation={false} />

children?

React.ReactNode

The child can be either a single PanelBarItem or a PanelBarItem array.

jsx
<PanelBar>
  <PanelBarItem title="Item 1" />
  <PanelBarItem title="Item 2" />
</PanelBar>

className?

string

The class name that is set to the PanelBar.

jsx
<PanelBar className="custom-panelbar" />

dir?

string

Sets the direction of the PanelBar component.

jsx
<PanelBar dir="rtl" />

expanded?

string[]

Sets the initial expanded state of the PanelBar. Takes the id of the item.

jsx
<PanelBar expanded={['item1', 'item2']} />

expandMode?

PanelBarExpandMode

Sets the expand mode of the PanelBar (see example).

The available modes are:

  • "single"—Allows you to expand only one item at a time. The expanding of an item collapses the item that was previously expanded.
  • "multiple" (default)—Allows you to expand two or more items at a time. Items can also be toggled.
jsx
<PanelBar expandMode="single" />

focused?

string

Sets the initial focused state of the PanelBar. Takes the id of the item.

jsx
<PanelBar focused="item1" />

isControlled?

boolean

Determines if the PanelBar is going to be used in controlled state.

jsx
<PanelBar isControlled />

keepItemsMounted?

boolean

Determines if the PanelBar items will be mounted after expand collapse. Defaults to false.

jsx
<PanelBar keepItemsMounted />

onSelect?

(event: PanelBarSelectEventArguments) => void

Fires each time the user makes a selection (see example).

jsx
<PanelBar onSelect={(event) => console.log(event.item)} />

selected?

string

If set, overrides the currently selected property in the PanelBar state. Takes the id of the item.

jsx
<PanelBar selected="item1" />

style?

React.CSSProperties

Sets additional CSS styles to the PanelBar.

jsx
<PanelBar style={{ backgroundColor: 'lightblue' }} />
Not finding the help you need?
Contact Support