xl vision
  • Component
  • React Hooks
  • Playground
  • Overview
  • Color
  • Getting Start
    • Installation
  • General
    • Icon
    • Button
  • Layout
    • Grid
  • Form
    • Input
    • InputNumber
    • Textarea
  • Navigation
    • Dropdown
    • Affix
    • BackTop
    • Anchor
  • Data Display
    • Tooltip
    • Popover
    • Avatar
  • Faceback
    • Popconfirm
    • Dialog
    • Message
    • Notication
  • Animation
    • Transition
    • TransitionGroup
    • CollapseTransition
    • Ripple
  • Styles
    • Theme
    • CssBaseline
  • Basic Component
    • BaseButton
    • Portal
    • Popper
    • Modal
    • ResizeObserver

Dropdown

A list that pops down.

Examples

Basic

Basic

Multi-level menu

Multi-level menu

Use with tooltip

Since the tooltip does not pass the parent component props to the child components, a layer of encapsulation is needed to ensure that related events can be correctly delivered. Similar components include Popover, Popconfirm and Popper.

Properties

Dropdown

For more parameters, please refer to Popper properties.

PropertyDescriptionTypeDefaultRequire
childrenChild nodeReact.ReactElement-true
menusDrop-down menuReact.ReactNode-true
transitionClassNameAnimation class, will override default animation, see CssTransitionstringxl-dropdownfalse

DropdownSubmenu

For more parameters, please refer to Popper properties.

PropertyDescriptionTypeDefaultRequire
childrenChild nodeReact.ReactElement-true
titleTitleReact.ReactNode-true
transitionClassNameAnimation class, see CssTransitionstringxl-dropdown-submenufalse
disabledDisabled stateboolean-false

DropdownItem

PropertyDescriptionTypeDefaultRequire
childrenChild nodeReact.ReactElement-true
disabledDisabled stateboolean-false
onClickClick eventfunction-false
Examples
Basic
Multi-level menu
Use with tooltip
Properties
Dropdown
DropdownSubmenu
DropdownItem
Copyright © 2020-2021 Rhys Xia