forked from ctxhou/react-tabtab
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcompositor.json
More file actions
147 lines (147 loc) · 9.99 KB
/
compositor.json
File metadata and controls
147 lines (147 loc) · 9.99 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
{
"name": "ctxhou/react-tabtab",
"version": "0.1.4",
"libraries": {
"xv": "^1.1.25"
},
"title": "",
"branch": "",
"style": {
"name": "Default",
"componentSet": {
"nav": "nav/BasicNav",
"header": "header/BannerHeader",
"article": "article/BasicArticle",
"footer": "footer/BasicFooter"
},
"fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif",
"fontWeight": 400,
"bold": 600,
"lineHeight": 1.5,
"typeScale": [
72,
48,
24,
20,
16,
14,
12
],
"monospace": "Menlo, monospace",
"heading": {
"fontFamily": null,
"fontStyle": null,
"fontWeight": 600,
"lineHeight": 1.25,
"textTransform": null,
"letterSpacing": null
},
"h0": {},
"h1": {},
"h2": {},
"h3": {},
"h4": {},
"h5": {},
"h6": {},
"alternativeText": {},
"space": [
0,
8,
16,
32,
48,
64,
96
],
"layout": {
"maxWidth": 1024,
"centered": false
},
"colors": {
"text": "#111",
"background": "#fff",
"primary": "#08e",
"secondary": "#059",
"highlight": "#e08",
"border": "#ddd",
"muted": "#eee"
},
"border": {
"width": 1,
"radius": 2
},
"link": {},
"button": {
"hover": {
"boxShadow": "inset 0 0 0 999px rgba(0, 0, 0, .125)"
}
},
"input": {},
"body": {
"margin": 0
},
"breakpoints": {
"xs": "@media screen and (max-width:40em)",
"sm": "@media screen and (min-width:40em)",
"md": "@media screen and (min-width:52em)",
"lg": "@media screen and (min-width:64em)"
}
},
"content": [
{
"component": "nav",
"links": [
{
"href": "http://ctxhou.github.io/react-tabtab/",
"text": "Home"
},
{
"href": "https://github.com/ctxhou/react-tabtab",
"text": "GitHub"
},
{
"href": "https://npmjs.com/package/react-tabtab",
"text": "npm"
}
]
},
{
"component": "header",
"heading": "react-tabtab",
"subhead": "An api based react tab.",
"children": [
{
"component": "ui/TweetButton",
"text": "react-tabtab: An api based react tab.",
"url": "http://ctxhou.github.io/react-tabtab/"
},
{
"component": "ui/GithubButton",
"user": "ctxhou",
"repo": "react-tabtab"
}
],
"text": "v0.8.0"
},
{
"component": "article",
"metadata": {
"source": "github.readme"
},
"html": "\n<p><img src=\"https://img.shields.io/npm/v/react-tabtab.svg?maxAge=2592000\">\n<img src=\"https://david-dm.org/ctxhou/react-tabtab.svg\">\n<img src=\"https://img.shields.io/npm/dm/react-tabtab.svg?maxAge=2592000\"></p>\n<p>react-tabtab is an api based react tab.</p>\n<p><a href=\"http://ctxhou.github.io/react-tabtab/\">Demo</a></p>\n<h2>Features</h2>\n<p><img src=\"http://i.imgur.com/r5ssaiM.png\"></p>\n<ul>\n<li>Add tab</li>\n<li>Delete tab</li>\n<li>Drag and Drop tab</li>\n</ul>\n<h2>Usage</h2>\n<p>Now only available the commonjs module.</p>\n<p>Install it with npm.</p>\n<pre>npm install react-tabtab --save</pre><p>Simple example:</p>\n<pre><span class=\"hljs-keyword\">var</span> Tabs = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'react-tabtab'</span>).Tabs;\n<span class=\"hljs-keyword\">var</span> Panel = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'react-tabtab'</span>).Panel;\n\n<span class=\"hljs-keyword\">var</span> App = React.createClass({\n <span class=\"hljs-attr\">render</span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span>(<span class=\"hljs-params\"></span>) </span>{\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">Tabs</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">Panel</span> <span class=\"hljs-attr\">title</span>=<span class=\"hljs-string\">"hi"</span>></span>\n Hi!\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">Panel</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">Panel</span> <span class=\"hljs-attr\">title</span>=<span class=\"hljs-string\">"yo"</span> <span class=\"hljs-attr\">lazy</span>=<span class=\"hljs-string\">{true}</span>></span>\n yo yo\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">Panel</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">Tabs</span>></span></span>\n )\n }\n})\n\nReact.render(<span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">App</span>/></span></span>, <span class=\"hljs-built_in\">document</span>.getElementById(<span class=\"hljs-string\">'container'</span>));</pre><h2>Advanced Usage</h2>\n<h3>Add tab</h3>\n<p><img src=\"http://i.imgur.com/55GxKoR.png\"></p>\n<p>Trigger event on the add tab. Check the <a href=\"https://github.com//ctxhou/react-tabtab/blob/master/example/addTab.jsx\">example code</a>.</p>\n<h4>props</h4>\n<ul>\n<li>addBackTab (boolean)<ul>\n<li>true : show add tab</li>\n<li>false: hide add tab</li>\n</ul>\n</li>\n<li>handleAddBackClick (function): trigger the event when user click the tab.</li>\n</ul>\n<h3>Delete tab</h3>\n<p><img src=\"http://i.imgur.com/znf3CJA.png\"></p>\n<p>Trigger event on the delete button. Check the <a href=\"https://github.com/ctxhou/react-tabtab/blob/master/example/deleteTab.jsx\">example code</a>.</p>\n<h4>props</h4>\n<ul>\n<li>tabDeleteButton (boolean)<ul>\n<li>true : show delete button</li>\n<li>false: hide delete button</li>\n</ul>\n</li>\n<li>handleTabDeleteButton (function): trigger the event when user click delete button.</li>\n</ul>\n<h3>Drag and Drop:</h3>\n<p><img src=\"http://i.imgur.com/crMwvdr.gif\"></p>\n<p>The drag and drop feature is based on <a href=\"https://github.com/gaearon/react-dnd\">react-dnd</a>. You can drag the tab to change the sequence.</p>\n<p>Because react-dnd can't have two HTML5 backends at the same time (<a href=\"https://github.com/gaearon/react-dnd/issues/186\">this issue</a>), react-tabtab doesn't wrap the HTML5 in the library.</p>\n<p>React-tabtab only wrap the <code>DragSource</code> and <code>DropTarget</code> on the tab, so if you want to use drag and drop, you need to wrap the <code>DragDropContext</code> on your top compoennt. (in case in your project you already have another html5 backend)</p>\n<p>In this way, the drag and drop feature in react-tabtab can fit with other dnd library.</p>\n<p>Check out the <a href=\"https://github.com//ctxhou/react-tabtab/blob/master/example/dragAndDrop.js\">example code</a> and the <a href=\"https://github.com//ctxhou/react-tabtab/blob/master/test/test.js#L31\">top component</a>.</p>\n<h4>props</h4>\n<ul>\n<li>draggable (boolean)<ul>\n<li>true : tab can drag</li>\n<li>false: tab can't drag</li>\n</ul>\n</li>\n<li>beginDrag (function): do something when start to drag</li>\n<li>setMoveData (function)<ul>\n<li>return value {dragIndex, hoverIndex}<ul>\n<li>dragIndex: current drag tab index</li>\n<li>hoverIndex: current hove tab index</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<h3>Advanced example</h3>\n<p>Check the <a href=\"https://github.com/\n/ctxhou/react-tabtab/blob/master/example/advanced.jsx\">advanced.jsx</a>. </p>\n<p>This example show how to add tab, delete tab, and drag and drop.</p>\n<h2>All API</h2>\n<table>\n<thead>\n<tr>\n<th>property</th>\n<th>type</th>\n<th>default</th>\n<th>required</th>\n<th>description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>activeKey</td>\n<td>int</td>\n<td>0</td>\n<td>no</td>\n<td>set the active key of the tab</td>\n</tr>\n<tr>\n<td>addBackTab</td>\n<td>boolean</td>\n<td>false</td>\n<td>no</td>\n<td>whether show a add tab at the end</td>\n</tr>\n<tr>\n<td>handleAddBackClick</td>\n<td>function</td>\n<td>n/a</td>\n<td>no</td>\n<td>callback function when user click the add tab</td>\n</tr>\n<tr>\n<td>deleteButton</td>\n<td>boolean</td>\n<td>false</td>\n<td>no</td>\n<td>whether show a delete button at each panel</td>\n</tr>\n<tr>\n<td>handleDeleteButton</td>\n<td>function</td>\n<td>false</td>\n<td>no</td>\n<td>callback function when user click the delete button</td>\n</tr>\n<tr>\n<td>handleTabClick</td>\n<td>function</td>\n<td>n/a</td>\n<td>no</td>\n<td>return the key which user clicks</td>\n</tr>\n<tr>\n<td>tabDeleteButton</td>\n<td>boolean</td>\n<td>false</td>\n<td>no</td>\n<td>whether each tab show delete button</td>\n</tr>\n<tr>\n<td>handleTabDeleteButton</td>\n<td>function</td>\n<td>n/a</td>\n<td>no</td>\n<td>callback function when click tabDeleteButton</td>\n</tr>\n<tr>\n<td>style</td>\n<td>string</td>\n<td>tabtab<strong>default</strong></td>\n<td>no</td>\n<td>the class prefix</td>\n</tr>\n<tr>\n<td>deleteAllClassname</td>\n<td>string</td>\n<td>n/a</td>\n<td>no</td>\n<td></td>\n</tr>\n<tr>\n<td>draggable</td>\n<td>boolean</td>\n<td>false</td>\n<td>no</td>\n<td>whether tab can drag and drop</td>\n</tr>\n<tr>\n<td>beginDrag</td>\n<td>function</td>\n<td>n/a</td>\n<td>no</td>\n<td>callback function when start drag</td>\n</tr>\n<tr>\n<td>setMoveData</td>\n<td>function</td>\n<td>n/a</td>\n<td>no</td>\n<td>callback function to get current index and hover index</td>\n</tr>\n</tbody>\n</table>\n<h2>Style</h2>\n<p>now only use css as style.</p>\n<p>if you want to use the same style as teh <a href=\"http://ctxhou.github.io/react-tabtab/\">demo</a>, just clone the <code>stylesheets/folder.css</code> and inlcude in you project.</p>\n<h2>Development</h2>\n<p> npm run build:watch\n node devServer.js</p>\n<h2>License</h2>\n<p>MIT <a href=\"github.com/ctxhou\">@ctxhou</a></p>\n"
},
{
"component": "footer",
"links": [
{
"href": "https://github.com/ctxhou/react-tabtab",
"text": "GitHub"
},
{
"href": "https://github.com/ctxhou",
"text": "ctxhou"
}
]
}
]
}