dropdown ui component for react
npm install @rc-component/dropdownreact dropdown component.
[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url]
[npm-image]: https://img.shields.io/npm/v/@rc-component/dropdown.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@rc-component/dropdown
[travis-image]: https://img.shields.io/travis/react-component/dropdown/master?style=flat-square
[travis-url]: https://travis-ci.com/react-component/dropdown
[github-actions-image]: https://github.com/react-component/dropdown/actions/workflows/ci.yml/badge.svg
[github-actions-url]: https://github.com/react-component/dropdown/actions/workflows/ci.yml
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/dropdown/master.svg?style=flat-square
[codecov-url]: https://app.codecov.io/gh/react-component/dropdown
[david-url]: https://david-dm.org/react-component/dropdown
[david-image]: https://david-dm.org/react-component/dropdown/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/dropdown?type=dev
[david-dev-image]: https://david-dm.org/react-component/dropdown/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@rc-component/dropdown.svg?style=flat-square
[download-url]: https://npmjs.org/package/@rc-component/dropdown
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/dropdown
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/dropdown
[dumi-url]: https://github.com/umijs/dumi
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
online example: http://react-component.github.io/dropdown/examples/
``js`
var Dropdown = require('@rc-component/dropdown');
// use dropdown
| name | type | default | description |
|---|---|---|---|
| overlayClassName | String | additional css class of root dom node | |
| openClassName | String | ${prefixCls}-open | className of trigger when dropdown is opened |
| prefixCls | String | rc-dropdown | prefix class name |
| transitionName | String | dropdown menu's animation css class name | |
| animation | String | part of dropdown menu's animation css class name | |
| placement | String | bottomLeft | Position of menu item. There are: top, topCenter, topRight, bottomLeft, bottom, bottomRight |
| onVisibleChange | Function | call when visible is changed | |
| visible | boolean | whether tooltip is visible | |
| defaultVisible | boolean | whether tooltip is visible initially | |
| overlay | rc-menu | rc-menu element | |
| onOverlayClick | function(e) | call when overlay is clicked | |
| minOverlayWidthMatchTrigger | boolean | true (false when set alignPoint) | whether overlay's width must not be less than trigger's |
| getPopupContainer | Function(menuDOMNode): HTMLElement | () => document.body | Where to render the DOM node of dropdown |
Note: Additional props are passed into the underlying rc-trigger component. This can be useful for example, to display the dropdown in a separate portal-driven window via the getDocument() rc-trigger prop.
`bash`
npm install
npm start
`bash`
npm test
npm run chrome-test
`bash``
npm run coverage
open coverage/ dir
@rc-component/dropdown is released under the MIT license.