expanded Property

Expands/Collapses the <DropdownList>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

<DropdownList expanded={true}> 

Show code

onExpandedChange Property

Sets a callback function to be called when the user closes the <DropdownList>.

The callback function parameters:

  • event: ExpandedChangeEvent

orientation Property

Sets the orientation of the <DropdownList>.

The possible values are:

  • undefined
  • 'inline'
  • 'block'

Here the preview:

Preview

Show code

dropdownOrientation Property

Sets the orientation of the internal <Dropdown> component used as the composition of <DropdownList> component.

<DropdownList dropdownOrientation='inline' />
is equivalent to:
<DropdownList dropdownComponent={
    <Dropdown orientation='inline' />
} />

Here the preview:

Preview

Show code

lazy Property

Determines whenever the <List> should be rendered or not when the <DropdownList expanded={false}>.

The possible values are:

  • undefined
  • false
  • true

Floating Properties

Determines how the <DropdownList> should be floating on the target DOM reference.

floatingOn Property

Determines the target DOM reference where the <DropdownList> should be floating on.
If not set (undefined), the <DropdownList> becomes a normal element flow.

Here the preview:

Preview

Show code

floatingPlacement Property

Determines the location where the <DropdownList> should be floating on the target DOM reference.

Here the preview:

floatingPlacement='top'

floatingStrategy Property

Determines the technical strategy how the <DropdownList> can float.
In most cases, you should not worry about the detail mechanism how the <DropdownList> can float.

The possible values are:

  • undefined
  • 'absolute'
  • 'fixed'

floatingAutoFlip Property

Automatically flips the floatingPlacement to opposite direction when the <DropdownList> is about to be clipped.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

floatingAutoShift Property

Automatically shifts the floatingPlacement to nearest safe position when the <DropdownList> is about to be clipped.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

floatingOffset Property

The distance (in pixel) between the <DropdownList> and the target DOM reference.

The possible values are:

  • undefined
  • 0
  • positive number
  • negative number

Here the preview:

Preview

<DropdownList floatingOffset={0}>

Show code

floatingShift Property

The distance (in pixel) between the <DropdownList> and the default floatingPlacement location.

The possible values are:

  • undefined
  • 0
  • positive number
  • negative number

Here the preview:

Preview

<DropdownList floatingShift={0}>

Show code

onFloatingUpdate Property

Sets a callback function to be called when the <DropdownList> updates the position relative to the target DOM reference.

The callback function parameters:

  • event: FloatingPosition

Component Properties

Overwrites the internal (sub) components used as the composition of <DropdownList> component.

listComponent Property

Overwrites the internal <List> component used as the composition of <DropdownList> component.

<DropdownList listComponent={
    <MyCustomList />
} />

dropdownComponent Property

Overwrites the internal <Dropdown> component used as the composition of <DropdownList> component.

<DropdownList dropdownComponent={
    <MyCustomDropdown />
} />

dropdownRef Property

Gets the DOM reference of the internal <Dropdown> component used as the composition of <DropdownList> component.

<DropdownList dropdownRef={fooDropdownRef} />
is equivalent to:
<DropdownList dropdownComponent={
    <Dropdown elmRef={fooDropdownRef} />
} />