|
1 | 1 | # Poppy |
2 | 2 |
|
3 | | -Popups constructor and provider: tooltips, dropdowns, overlays, notifiers, etc. [Demo](http://dfcreative.github.io/poppy), [tests](https://rawgit.com/dfcreative/poppy/master/test/index.html). |
| 3 | +[](http://github.com/badges/stability-badges) |
4 | 4 |
|
5 | | -[](https://nodei.co/npm/poppy/) |
6 | | - |
7 | | - |
8 | | -## Getting started |
9 | | - |
10 | | -### Install |
11 | | - |
12 | | -Grab the [latest version](todo) or [CDN](todo). Insert it in the page: |
13 | | - |
14 | | -```html |
15 | | -<script src="cdn_url/poppy.js"></script> |
16 | | -``` |
17 | | - |
18 | | -Poppy is also available as a component for browserify, component or duo: |
19 | | - |
20 | | -`$ npm install poppy` |
21 | | - |
22 | | -```js |
23 | | -var Poppy = require('poppy'); |
24 | | -var Dropdown = require('poppy/dropdown'); |
25 | | -var Tooltip = require('poppy/tooltip'); |
26 | | -``` |
27 | | - |
28 | | -### Use |
29 | | - |
30 | | -#### In document: |
31 | | - |
32 | | -```html |
33 | | -<div data-poppy="dropdown" data-content="#menu">Dropdown</div> |
34 | | - |
35 | | -<ul id="menu" hidden> |
36 | | - <li>Item 1</li> |
37 | | - <li>Item 2</li> |
38 | | - <li>Item 3</li> |
39 | | -</ul> |
40 | | -``` |
41 | | - |
42 | | -#### In code: |
43 | | - |
44 | | -```js |
45 | | -var dropdown = new Dropdown({ |
46 | | - target: document.querySelector('#menu'), |
47 | | - content: '<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>', |
48 | | - contentType: 'html' |
49 | | -}); |
50 | | -``` |
51 | | - |
52 | | - |
53 | | -## Options |
54 | | - |
55 | | -| Parameter | Type | Default | Description | |
56 | | -|----|----|----|----| |
57 | | -| `target` | _selector_, _element_, _element list_ (optional) | `undefined` | A target or list of targets which by click show the popup container. Can vary depending on poppy type. | |
58 | | -| `content` | _string_, _element_, _function_ | `undefined` | Content to show in the container. If a function defined—it’s result will be taken as content. | |
59 | | -| `contentType` | _string_ | `'element'` | `'element'`—show other element in the container.<br/>`'text'`—show content as plain text.<br/>`'html'`—show content as inner html. | |
60 | | -| `containerClass` | _string_ | `undefined` | A class to add to the popup container | |
61 | | -| `holder` | _selector_, _element_ | `<body>` | A holder of container | |
62 | | -| `tip` | _string_ (optional) | `false` | A little triangle on the edge of the container. Possible values: `'top'`, `'left'`, `'bottom'`, `'right'`, `undefined`. | |
63 | | -| `tipAlign` | _string_, _number_ | `'center'` | Tip alignment relative to the container. | |
64 | | -| `single` | _boolean_ | `false` | Hide other containers when this one becomes visible | |
65 | | - |
66 | | - |
67 | | -## API |
68 | | - |
69 | | -| Property/method | Description | |
70 | | -|----|----| |
71 | | -| `show(target)` | Make the container visible. | |
72 | | -| `hide()` | Make container disappear. | |
73 | | -| `enable()` | Make container active. | |
74 | | -| `disable()` | Disable any interactions. | |
75 | | -| `container` | Visible poppy container. | |
76 | | -| `state` | Current state of poppy: `closed`, `opened`, `opening`, `closing`, `disabled`. | |
77 | | - |
78 | | - |
79 | | -## Events |
80 | | - |
81 | | -| Name | Called when | |
82 | | -|----|----|----|----| |
83 | | -| `beforeShow` | Container is going to show | |
84 | | -| `show` | Container became visible | |
85 | | -| `beforeHide` | Container is going to hide | |
86 | | -| `hide` | Container became invisible | |
87 | | -| `enable` | Entered active state | |
88 | | -| `disable` | Became inactive | |
89 | | - |
90 | | - |
91 | | -## License |
92 | | - |
93 | | -<a href="http://unlicense.org/UNLICENSE"><img src="http://upload.wikimedia.org/wikipedia/commons/6/62/PD-icon.svg" width="40"/></a> |
| 5 | +Poppy is no more going to be supported, use [tip](https://github.com/component/tip) or [popover](https://github.com/component/popover) components instead. They’re well supported and better structured. |
0 commit comments