Package Exports
- rc-trigger
- rc-trigger/assets/index.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 (rc-trigger) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
rc-trigger
React Trigger Component
Browser Support
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
Development
npm install
npm start
Example
http://localhost:8200/examples/
online example: http://react-component.github.io/trigger/examples/
Feature
- support ie8,ie8+,chrome,firefox,safari
install
Usage
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);
API
props
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 | false | whether to support mask |
maskClosable | boolean | true | whether to support click mask to hide |
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 |
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
License
rc-trigger is released under the MIT license.