Skip to content

eternalsky/trigger

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

rc-trigger


React Trigger Component

NPM version build status Test coverage gemnasium deps npm download

Browser Support

IE Chrome Firefox Opera Safari
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

rc-trigger

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 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

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-trigger is released under the MIT license.

Packages

No packages published

Languages

  • JavaScript 92.4%
  • CSS 7.6%