Defines the Dropdown-ed UI

The <DropdownButton> should have one child to be dropdown-ed. The child shoud be a native DOM element or functional/class component that implements <Generic>'s props.

<DropdownButton>
    <YourComponent />
</DropdownButton>

expanded Property

Expands/Collapses the <Dropdown> of <DropdownButton>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

<DropdownButton expanded={true}> 

Show code

defaultExpanded Property

Defines the initial expanded state when the <DropdownButton> is first loaded.

The possible values are:

  • undefined
  • true
  • false

onExpandedChange Property

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

The callback function parameters:

  • event: ExpandedChangeEvent

orientation Property

Sets the orientation and the direction of the <DropdownButton>.

The possible values are:

  • undefined
  • 'inline-start'
  • 'inline-end'
  • 'block-start'
  • 'block-end'

Here the preview:

Preview

Show code

dropdownOrientation Property

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

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

Here the preview:

Preview

Show code

lazy Property

Determines whenever the <DropdownButton>'s children should be rendered or not when the <DropdownButton expanded={false}>.

The possible values are:

  • undefined
  • false
  • true

onClick Property

Executes a JavaScript's callback function when the <DropdownButton> is clicked.

Floating Properties

Determines how the <Dropdown> of <DropdownButton> should be floating on the <ToggleButton> of <DropdownButton>.

floatingStrategy Property

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

The possible values are:

  • undefined
  • 'absolute'
  • 'fixed'

floatingAutoFlip Property

Automatically flips the floatingPlacement to opposite direction when the <Dropdown> of <DropdownButton> 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 <Dropdown> of <DropdownButton> 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 <Dropdown> of <DropdownButton> and the <ToggleButton> of <DropdownButton>.

The possible values are:

  • undefined
  • 0
  • positive number
  • negative number

Here the preview:

Preview

<DropdownButton floatingOffset={0}>

Show code

floatingShift Property

The distance (in pixel) between the <Dropdown> of <DropdownButton> and the default floatingPlacement location.

The possible values are:

  • undefined
  • 0
  • positive number
  • negative number

Here the preview:

Preview

<DropdownButton floatingShift={0}>

Show code

Variant Properties

The alternative appearances of the <DropdownButton> layout without changing the <DropdownButton>'s functionality.

size Property

Defines the alternative size of the <DropdownButton>.

The possible values are:

  • undefined
  • 'sm'
  • 'md'
  • 'lg'

Here the preview:

Preview

Show code

theme Property

Defines the contextual theme of the <DropdownButton>.

The possible values are:

  • undefined
  • 'primary'
  • 'secondary'
  • 'success'
  • 'info'
  • 'warning'
  • 'danger'
  • 'light'
  • 'dark'

Here the preview:

Preview

Show code

gradient Property

Activates a 3D mode of the <DropdownButton>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <DropdownButton>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <DropdownButton>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

State Properties

The conditions of the <DropdownButton> behavior or functionality.

enabled Property

Defines the enabled/disabled state of the <DropdownButton>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

inheritEnabled Property

Influences the <DropdownButton>'s disabled state by <ancestor enabled={false}>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

Component Properties

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

buttonComponent Property

Overwrites the internal <Button> component used as the composition of <DropdownButton> component.

<DropdownButton buttonComponent={
    <MyCustomButton />
} />

buttonRef Property

Gets the DOM reference of the internal <Button> component used as the composition of <DropdownButton> component.

<DropdownButton buttonRef={fooButtonRef} />
is equivalent to:
<DropdownButton buttonComponent={
    <Button elmRef={fooButtonRef} />
} />

buttonOrientation Property

Sets the orientation of the internal <Button> component used as the composition of <DropdownButton> component.

<DropdownButton buttonOrientation='inline' />
is equivalent to:
<DropdownButton buttonComponent={
    <Button orientation='inline' />
} />

buttonChildren Property

Defines the nested element of the internal <Button> component used as the composition of <DropdownButton> component.

<DropdownButton buttonChildren={
    <span>Hello World</span>
} />
is equivalent to:
<DropdownButton buttonComponent={
    <Button>
        <span>Hello World</span>
    </Button>
} />

toggleButtonComponent Property

Overwrites the internal <ToggleButton> component used as the composition of <DropdownButton> component.

<DropdownButton toggleButtonComponent={
    <MyCustomToggleButton />
} />

dropdownComponent Property

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

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

dropdownRef Property

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

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