rc-dropdown

react dropdown component
!NPM versionnpm-imagenpm-url !build statustravis-imagetravis-url !Test coveragecoveralls-imagecoveralls-url !Dependenciesdavid-imagedavid-url !DevDependenciesdavid-dev-imagedavid-dev-url !npm downloaddownload-imagedownload-url !bundle sizebundlephobia-imagebundlephobia-url !dumidumi-imagedumi-url

Screenshot

Example

online example: http://react-component.github.io/dropdown/examples/

install

Usage

var Dropdown = require('rc-dropdown');
// use dropdown

API

props

<thead>
<tr>
    <th style="width: 100px;">name</th>
    <th style="width: 50px;">type</th>
    <th style="width: 50px;">default</th>
    <th>description</th>
</tr>
</thead>
<tbody>
    <tr>
      <td>overlayClassName</td>
      <td>String</td>
      <td></td>
      <td>additional css class of root dom node</td>
    </tr>
    <tr>
      <td>openClassName</td>
      <td>String</td>

                   

</tr>
<tr>
  <td>prefixCls</td>
  <td>String</td>
  <td>rc-dropdown</td>
  <td>prefix class name</td>
</tr>
<tr>
  <td>transitionName</td>
  <td>String</td>
  <td></td>
  <td>dropdown menu's animation css class name</td>
</tr>
<tr>
  <td>animation</td>
  <td>String</td>
  <td></td>
  <td>part of dropdown menu's animation css class name</td>
</tr>
<tr>
  <td>placement</td>
  <td>String</td>
  <td>bottomLeft</td>
  <td>Position of menu item. There are: top, topCenter, topRight, bottomLeft, bottom, bottomRight </td>
</tr>
<tr>
  <td>onVisibleChange</td>
  <td>Function</td>
  <td></td>
  <td>call when visible is changed</td>
</tr>
<tr>
  <td>visible</td>
  <td>boolean</td>
  <td></td>
  <td>whether tooltip is visible</td>
</tr>
<tr>
  <td>defaultVisible</td>
  <td>boolean</td>
  <td></td>
  <td>whether tooltip is visible initially</td>
</tr>
<tr>
  <td>overlay</td>
  <td>rc-menu</td>
  <td></td>
  <td><a href="https://github.com/react-component/menu">rc-menu</a> element</td>
</tr>
<tr>
  <td>onOverlayClick</td>
  <td>function(e)</td>
  <td></td>
  <td>call when overlay is clicked</td>
</tr>
<tr>
  <td>minOverlayWidthMatchTrigger</td>
  <td>boolean</td>

                   

</tr>
<tr>
  <td>getPopupContainer</td>
  <td>Function(menuDOMNode): HTMLElement</td>
  <th>() => document.body</th>
  <td>Where to render the DOM node of dropdown</td>
</tr>
    </tbody>

${prefixCls}-open

className of trigger when dropdown is opened

true (false when set alignPoint)

whether overlay's width must not be less than trigger's

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.

Development

npm install
npm start

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-dropdown is released under the MIT license.