Dropdown

If there are too many operations to display, you can wrap them in a Dropdown. By clicking on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions.

Install

import {Dropdown} from '@xsolla/uikit';

Examples

Large dropdown
Any element
     
     
Icon align: 'right'
Icon align: 'left'
Icon align: 'left-half'
Icon align: 'left-half-back'
Wide options
Information: right
Flatten trigger
Open onHover
Disabled

Usage

<Dropdown
  options={[
    {label: 'Edit item', description: 'Just then her head struck', value: 'edit'},
    {label: 'Delete item', color: 'red', value: 'delete'}
  ]}>
  <ButtonArrow size="sm">Dropdown Trigger</ButtonArrow>
</Dropdown>

Option fields

{
  label: React.Node
  extraLabel: string | string[]
  tag?: any
  description?: React.Node
  color?: string
  icon?: string
  customIcon?: any
  onClick?: func
  extraLabelClass?: string
  className?: string,
  dataId?: string,
  breakLabelText?: boolean
}

Content field

{
  title: string,
  description: string,
  button?: string
  buttonAppearance?:
      | 'primary'
      | 'secondary'
      | 'outline'
      | 'outline-primary'
      | 'outline-secondary'
      | 'flatten'
      | 'square'
      | 'icon'
      | 'alert',
  onClick?: func
}

API

PropertyDescriptionTypeDefault
childrentrigger elementany
positioncan be set to top, bottomstring
appearancecan be set to primary, secondary, tertiarystringprimary
sizecan be set to sm, md, lgstringmd
alignHorizontally align dropdown menu to trigger element. Can be set to left, left-half, left-half-back, right, right-half, right-half-backstringleft
optionsitems arrayarray
optionsWidthWidth of the options dropdown. If omitted, the size prop is used. Can be set to sm, md, lgstringmd
searchablesearch from listboolfalse
separatedseparated list elementboolfalse
autosizeautosize inline elementboolfalse
fullWidthfill 100% of parent's widthboolfalse
valuecurrent selected elementstring, numbernull
typecan be set inform or optionsstringoptions
contentcontent for dropdown with type='inform'object
disabledset the disabled state of dropdownboolfalse
onChangeon item change handlerfunc() => void 0
onClickon dropdown click handlerfunc
onScrollOptionson options scroll handlerfunc() => void 0
rootDataIdattribute for data identifierstring
contextreceives context and pass children props to itContextType