React Trigger Component
IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
npm install
npm start
http://localhost:8200/examples/
online example: http://react-component.github.io/trigger/examples/
- support ie8,ie8+,chrome,firefox,safari
import React from 'react';
import ReactDOM from 'react-dom';
import Trigger from 'rc-trigger';
ReactDOM.render((
<Trigger
action={['click']}
popup={<span>popup</span>}
popupAlign={{
points: ['tl', 'bl'],
offset: [0, 3]
}}
>
<a href='#'>hover</a>
</Trigger>
), container);
name | type | default | description |
---|---|---|---|
popupClassName | string | additional className added to popup | |
destroyPopupOnHide | boolean | false | whether destroy popup when hide |
getPopupClassNameFromAlign | getPopupClassNameFromAlign(align: Object):String | additional className added to popup according to align | |
action | string[] | ['hover'] | which actions cause popup shown. enum of 'hover','click','focus' |
mouseEnterDelay | number | 0 | delay time to show when mouse enter. unit: s. |
mouseLeaveDelay | number | 0.1 | delay time to hide when mouse leave. unit: s. |
popupStyle | Object | additional style of popup | |
prefixCls | String | rc-trigger-popup | prefix class name |
popupTransitionName | String | https://github.com/react-component/animate | |
maskTransitionName | String | https://github.com/react-component/animate | |
onPopupVisibleChange | Function | call when popup visible is changed | |
mask | boolean | whether to support mask | |
popupVisible | boolean | whether popup is visible | |
zIndex | number | popup's zIndex | |
defaultPopupVisible | boolean | whether popup is visible initially | |
popupAlign | Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align) | popup 's align config | |
onPopupAlign | function(popupDomNode, align) | callback when popup node is aligned | |
popup | React.Element | function() => React.Element | popup content | |
getPopupContainer | getPopupContainer(): HTMLElement | function returning html node which will act as popup container | |
popupPlacement | string | use preset popup align config from builtinPlacements, can be merged by popupAlign prop | |
builtinPlacements | object | builtin placement align map. used by placement prop |
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
rc-trigger is released under the MIT license.