https://github.com/react-component/m-trigger

React Trigger Component for mobile
https://github.com/react-component/m-trigger

Last synced: 4 months ago
JSON representation

React Trigger Component for mobile

• Host: GitHub
• URL: https://github.com/react-component/m-trigger
• Owner: react-component
• License: mit
• Created: 2017-09-19T06:10:34.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2021-07-26T21:15:31.000Z (over 4 years ago)
• Last Synced: 2025-08-27T07:45:08.237Z (4 months ago)
• Language: JavaScript
• Size: 442 KB
• Stars: 6
• Watchers: 3
• Forks: 4
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# rmc-trigger

---

React Trigger Component

[![NPM version][npm-image]][npm-url]

[![build status][travis-image]][travis-url]

[![Test coverage][coveralls-image]][coveralls-url]

[![gemnasium deps][gemnasium-image]][gemnasium-url]

[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/rmc-trigger.svg?style=flat-square

[npm-url]: http://npmjs.org/package/rmc-trigger

[travis-image]: https://img.shields.io/travis/react-component/m-trigger.svg?style=flat-square

[travis-url]: https://travis-ci.org/react-component/m-trigger

[coveralls-image]: https://img.shields.io/coveralls/react-component/m-trigger.svg?style=flat-square

[coveralls-url]: https://coveralls.io/r/react-component/trigger?branch=master

[gemnasium-image]: http://img.shields.io/gemnasium/react-component/m-trigger.svg?style=flat-square

[gemnasium-url]: https://gemnasium.com/react-component/m-trigger

[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square

[node-url]: http://nodejs.org/download/

[download-image]: https://img.shields.io/npm/dm/rmc-trigger.svg?style=flat-square

[download-url]: https://npmjs.org/package/rmc-trigger

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

[![rmc-trigger](https://nodei.co/npm/rmc-trigger.png)](https://npmjs.org/package/rmc-trigger)

## Usage

Include the default [styling](https://github.com/react-component/trigger/blob/master/assets/index.less#L4:L11) and then:

```js

import React from 'react';

import ReactDOM from 'react-dom';

import Trigger from 'rmc-trigger';

ReactDOM.render((

  popup}

    popupAlign={{

      points: ['tl', 'bl'],

      offset: [0, 3]

    }}

  >

    hover

  

), 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.