No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

README.md 3.0 KiB

hace 3 años
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. # rc-align
  2. ---
  3. React Align Component. Wrapper around https://github.com/yiminghe/dom-align.
  4. [![NPM version][npm-image]][npm-url]
  5. [![build status][travis-image]][travis-url]
  6. [![Test coverage][coveralls-image]][coveralls-url]
  7. [![gemnasium deps][gemnasium-image]][gemnasium-url]
  8. [![node version][node-image]][node-url]
  9. [![npm download][download-image]][download-url]
  10. [npm-image]: http://img.shields.io/npm/v/rc-align.svg?style=flat-square
  11. [npm-url]: http://npmjs.org/package/rc-align
  12. [travis-image]: https://img.shields.io/travis/react-component/align.svg?style=flat-square
  13. [travis-url]: https://travis-ci.org/react-component/align
  14. [coveralls-image]: https://img.shields.io/coveralls/react-component/align.svg?style=flat-square
  15. [coveralls-url]: https://coveralls.io/r/react-component/align?branch=master
  16. [gemnasium-image]: http://img.shields.io/gemnasium/react-component/align.svg?style=flat-square
  17. [gemnasium-url]: https://gemnasium.com/react-component/align
  18. [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
  19. [node-url]: http://nodejs.org/download/
  20. [download-image]: https://img.shields.io/npm/dm/rc-align.svg?style=flat-square
  21. [download-url]: https://npmjs.org/package/rc-align
  22. ## Development
  23. ```
  24. npm install
  25. npm start
  26. ```
  27. ## Example
  28. http://localhost:8100/examples/
  29. online example: http://react-component.github.io/align/examples/
  30. ## Feature
  31. * support ie8,ie8+,chrome,firefox,safari
  32. ### Keyboard
  33. ## install
  34. [![rc-align](https://nodei.co/npm/rc-align.png)](https://npmjs.org/package/rc-align)
  35. ## Usage
  36. ```js
  37. var Align = require('rc-align');
  38. var ReactDOM = require('react-dom');
  39. ReactDOM.render(<Align align={{}} target={function(){}}><div></div></Align>, container);
  40. ```
  41. will align child with target when mounted or align is changed
  42. ## API
  43. ### props
  44. <table class="table table-bordered table-striped">
  45. <thead>
  46. <tr>
  47. <th style="width: 100px;">name</th>
  48. <th style="width: 50px;">type</th>
  49. <th style="width: 50px;">default</th>
  50. <th>description</th>
  51. </tr>
  52. </thead>
  53. <tbody>
  54. <tr>
  55. <td>align</td>
  56. <td>Object</td>
  57. <td></td>
  58. <td>same with alignConfig from https://github.com/yiminghe/dom-align</td>
  59. </tr>
  60. <tr>
  61. <td>onAlign</td>
  62. <td>function(source:HTMLElement, align:Object)</td>
  63. <td></td>
  64. <td>called when align</td>
  65. </tr>
  66. <tr>
  67. <td>target</td>
  68. <td>
  69. function():HTMLElement ||
  70. { pageX: number, pageY: number } ||
  71. { clientX: number, clientY: number }
  72. </td>
  73. <td>function(){return window;}</td>
  74. <td>
  75. a function which returned value or point is used for target from https://github.com/yiminghe/dom-align
  76. </td>
  77. </tr>
  78. <tr>
  79. <td>monitorWindowResize</td>
  80. <td>Boolean</td>
  81. <td>false</td>
  82. <td>whether realign when window is resized</td>
  83. </tr>
  84. </tbody>
  85. </table>
  86. ## License
  87. rc-align is released under the MIT license.