DropDown |

Checkbox DataGrid Demo DropDown Default props Props Basic usage Inline Anchor MlMenu Notes Readme Select

This is a general purpose collapsible dropdown (use it for dropdown list box (select), navigation drop down list...)

Default props

Pass some content in the `box` props of DropDown

<ThemeProvider>
  <DropDown />
</ThemeProvider>

<ThemeProvider>
  <DropDown />
</ThemeProvider>

Props

inline

boolean

false

style

CSSStyleDeclaration

{}

menuStyle

CSSStyleDeclaration

{}

onChange

Function

(isOpen: bool, eventOrUndefined: Event) => {}

open

boolean

undefined

defaultOpen

boolean

undefined

anchor

'center' | 'left' | 'right'

'center'

trigger

ReactNode

'•••'

box

ReactNode

'Pass some content in the `box` props of DropDown'

light

bool

false

Basic usage

Box content

<ThemeProvider>
  <DropDown
    box={<div>Box content</div>}
    trigger={<div>trigger content</div>}
  />
</ThemeProvider>

<ThemeProvider>
  <DropDown
    box={<div>Box content</div>}
    trigger={<div>trigger content</div>}
  />
</ThemeProvider>

Inline

Lorem ipsum

Foo

Lorem ipsum

<ThemeProvider>
  <div>
    <p>Lorem ipsum</p>
    <DropDown inline={true} trigger={<div>Click me</div>} box={'Foo'} />
    <p>Lorem ipsum</p>
  </div>
</ThemeProvider>

<ThemeProvider>
  <div>
    <p>Lorem ipsum</p>
    <DropDown inline={true} trigger={<div>Click me</div>} box={'Foo'} />
    <p>Lorem ipsum</p>
  </div>
</ThemeProvider>

Anchor

not applicable when using inline

Lorem ipsum

foobar

Lorem ipsum

foobar

Lorem ipsum

<ThemeProvider>
  <Flex style={{ justifyContent: 'space-between' }}>
    <p>Lorem ipsum</p>
    <DropDown anchor={'left'} trigger={<div>Click me</div>} box={'foobar'} />
    <p>Lorem ipsum</p>
    <DropDown anchor={'right'} trigger={<div>Click me</div>} box={'foobar'} />
    <p>Lorem ipsum</p>
  </Flex>
</ThemeProvider>

<ThemeProvider>
  <Flex style={{ justifyContent: 'space-between' }}>
    <p>Lorem ipsum</p>
    <DropDown anchor={'left'} trigger={<div>Click me</div>} box={'foobar'} />
    <p>Lorem ipsum</p>
    <DropDown anchor={'right'} trigger={<div>Click me</div>} box={'foobar'} />
    <p>Lorem ipsum</p>
  </Flex>
</ThemeProvider>

DropDown

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Default props

Props

Basic usage

Inline

Anchor

Default props