You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
5 years ago | |
|---|---|---|
| .. | ||
| assets | 5 years ago | |
| dist | 5 years ago | |
| es | 5 years ago | |
| lib | 5 years ago | |
| node_modules | 5 years ago | |
| HISTORY.md | 5 years ago | |
| LICENSE | 5 years ago | |
| README.md | 5 years ago | |
| package.json | 5 years ago | |
README.md
rmc-trigger
React Trigger Component
Development
npm install
npm start
Example
http://localhost:8200/examples/
online example: http://react-component.github.io/trigger/examples/
Feature
- supported on IE 8+, Chrome, Firefox, and Safari
install
Usage
Include the default styling and then:
import React from 'react';
import ReactDOM from 'react-dom';
import Trigger from 'rmc-trigger';
ReactDOM.render((
<Trigger
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 | |
| popupStyle | Object | additional style of popup | |
| prefixCls | String | rmc-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 | |
| getDocument | getDocument(): HTMLElement | function returning document node which will be attached click event to close trigger | |
| 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
rmc-trigger is released under the MIT license.
