JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2200
  • Score
    100M100P100Q124370F
  • License MIT

Trend Micro Components: React Dropdown

Package Exports

  • @trendmicro/react-dropdown
  • @trendmicro/react-dropdown/dist/react-dropdown.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@trendmicro/react-dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-dropdown build status Coverage Status

NPM

React Dropdown

Demo: https://trendmicro-frontend.github.io/react-dropdown

Installation

  1. Install the latest version of react and react-dropdown:
npm install --save react @trendmicro/react-dropdown
  1. At this point you can import @trendmicro/react-dropdown and its styles in your application as follows:
import Dropdown, {
    DropdownToggle,
    DropdownMenu,
    DropdownSubMenu,
    MenuItem,
    DropdownButton
} from '@trendmicro/react-dropdown';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-buttons/dist/react-buttons.css';
import '@trendmicro/react-dropdown/dist/react-dropdown.css';

Usage

<Dropdown
    onSelect={(eventKey) => {
    }}
>
    <Dropdown.Toggle
        btnStyle="flat"
    >
        Toggler
    </Dropdown.Toggle>
    <Dropdown.Menu>
        <MenuItem header>Header</MenuItem>
        <MenuItem eventKey={1}>link</MenuItem>
        <MenuItem divider />
        <MenuItem header>Header</MenuItem>
        <MenuItem eventKey={2}>link</MenuItem>
        <MenuItem eventKey={3} disabled>disabled</MenuItem>
        <MenuItem
            eventKey={4}
            title="link with title"
        >
            link with title
        </MenuItem>
        <MenuItem
            eventKey={5}
            href="#someHref"
            active
            onSelect={(eventKey) => {
                alert(`Alert from menu item.\neventKey: ${eventKey}`);
            }}
        >
            link that alerts
        </MenuItem>
    </Dropdown.Menu>
</Dropdown>

Multi-Level Dropdown

<Dropdown>
    <Dropdown.Toggle title="Select an option" />
    <Dropdown.Menu>
        <MenuItem>
            Menu item one
        </MenuItem>
        <MenuItem>
            Menu item two
        </MenuItem>
        <MenuItem>
            Menu item three
        </MenuItem>
        <MenuItem divider />
        <Dropdown.SubMenu title="Menu item four">
            <MenuItem>
                Second level item one
            </MenuItem>
            <MenuItem>
                Second level item two
            </MenuItem>
            <Dropdown.SubMenu title="Second level item three">
                <MenuItem>
                    Third level item one
                </MenuItem>
            </Dropdown.SubMenu>
        </Dropdown.SubMenu>
    </Dropdown.Menu>
</Dropdown>
<DropdownButton
    btnSize="xs"
    title="More"
    onSelect={(eventKey) => {
    }}
>
    <MenuItem eventKey={1}>link</MenuItem>
    <MenuItem eventKey={2}>link</MenuItem>
</DropdownButton>

API

Properties

Name Type Default Description
componentClass element ButtonGroup A custom element for this component.
dropup boolean false The menu will open above the dropdown button, instead of below it.
disabled boolean false Whether or not component is disabled.
open boolean false Whether or not the dropdown is visible.
pullRight boolean false Align the menu to the right side of the dropdown toggle.
onClose function(event) A callback fired when the dropdown closes.
onToggle function(boolean) A callback fired when the dropdown wishes to change visibility. Called with the requested open value.
onSelect function(eventKey, event) A callback fired when a menu item is selected.
role string If 'menuitem', causes the dropdown to behave like a menu item rather than a menu button.
rootCloseEvent One of:
'click'
'mousedown'		 Which event when fired outside the component will cause it to be closed.
Name Type Default Description
componentClass element Button A custom element for this component.
btnSize One of:
'lg'
'md'
'sm'
'xs'		 'md'
btnStyle One of:
'default'
'primary'
'emphasis'
'flat'
'link'		 'flat'
noCaret boolean false Whether to prevent a caret from being rendered next to the title.
title node Title content.
disabled boolean false Whether or not component is disabled.
open boolean false Whether or not the dropdown is visible.
Name Type Default Description
componentClass element ul A custom element for this component.
scrollable boolean false Whether or not the scrollbar is visible.
maxHeight number 150 The maximum height of the dropdown menu.
open boolean false Whether or not the dropdown is visible.
pullRight boolean false Align the menu to the right side of the dropdown toggle.
onClose function(event) A callback fired when the dropdown menu closes.
onSelect function(eventKey, event) A callback fired when a menu item is selected.
rootCloseEvent One of:
'click'
'mousedown'		 Which event when fired outside the component will cause it to be closed.
Name Type Default Description
active boolean false Highlight the menu item as active.
disabled boolean false Disable the menu item, making it unselectable.
eventKey any Value passed to the onSelect handler, useful for identifying the selected menu item.
open boolean false Whether or not the dropdown submenu is visible.
title node Title content.
href string HTML href attribute corresponding to a.href.
onClick function(event) Callback fired when the menu item is clicked.
onSelect function(eventKey, event) Callback fired when the menu item is selected.
Name Type Default Description
active boolean false Highlight the menu item as active.
disabled boolean false Disable the menu item, making it unselectable.
divider boolean false Style the menu item as a horizontal rule, providing visual separation between groups of menu items.
eventKey any Value passed to the onSelect handler, useful for identifying the selected menu item.
header boolean false Style the menu item as a header label, useful for describing a group of menu items.
href string HTML href attribute corresponding to a.href.
onClick function(event) Callback fired when the menu item is clicked.
onSelect function(eventKey, event) Callback fired when the menu item is selected.
Name Type Default Description
componentClass element ButtonGroup A custom element for this component.
dropup boolean false The menu will open above the dropdown button, instead of below it.
disabled boolean false Whether or not component is disabled.
pullRight boolean false Align the menu to the right side of the dropdown toggle.
open boolean false Whether or not the dropdown is visible.
onClose function(event) A callback fired when the dropdown closes.
onToggle function(boolean) A callback fired when the dropdown wishes to change visibility. Called with the requested open value.
onSelect function(eventKey, event) A callback fired when a menu item is selected.
role string If 'menuitem', causes the dropdown to behave like a menu item rather than a menu button.
rootCloseEvent One of:
'click'
'mousedown'		 Which event when fired outside the component will cause it to be closed.
btnSize One of:
'lg'
'md'
'sm'
'xs'		 'md'
btnStyle One of:
'default'
'primary'
'emphasis'
'flat'
'link'		 'flat'
title node Title content.
noCaret boolean false Whether to prevent a caret from being rendered next to the title.

License

MIT