Skip to content

Commit ac33113

Browse files
dev-javascriptdev-javascript
committed
complete examples
1 parent 062f0b6 commit ac33113

File tree

22 files changed

+3908
-19
lines changed

22 files changed

+3908
-19
lines changed

‎README.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -112,12 +112,12 @@ const initialOptions = {
112112
{
113113
id: '1',
114114
title: 'tab 1',
115-
panelComponent: (porps) => <p> panel 1 </p>,
115+
panelComponent: (props) => <p> panel 1 </p>,
116116
},
117117
{
118118
id: '2',
119119
title: 'tab 2',
120-
panelComponent: (porps) => <p> panel 2 </p>,
120+
panelComponent: (props) => <p> panel 2 </p>,
121121
},
122122
],
123123
selectedTabID: '1',
@@ -147,12 +147,12 @@ const initialOptions = {
147147
{
148148
id: '1',
149149
title: 'tab1',
150-
panelComponent: (porps) => <p> panel 1 </p>,
150+
panelComponent: (props) => <p> panel 1 </p>,
151151
},
152152
{
153153
id: '2',
154154
title: 'tab2',
155-
panelComponent: (porps) => <p> panel 2 </p>,
155+
panelComponent: (props) => <p> panel 2 </p>,
156156
},
157157
],
158158
selectedTabID: '1',
@@ -163,7 +163,7 @@ export default () => {
163163
const addTab3 = function () {
164164
ready((instance) => {
165165
// open tab 3
166-
instance.open({id: '3', title: 'Tab 3', panelComponent: (porps) => <p> panel 3 </p>}).then(() => {
166+
instance.open({id: '3', title: 'Tab 3', panelComponent: (props) => <p> panel 3 </p>}).then(() => {
167167
console.log('tab 3 is open');
168168
});
169169
// switch to tab 3
@@ -232,15 +232,15 @@ const [TabList, PanelList, ready] = useDynTabs({
232232
title: 'home',
233233
iconClass: 'fa fa-home',
234234
closable: true,
235-
panelComponent: (porps) => <p> home content </p>,
235+
panelComponent: (props) => <p> home content </p>,
236236
},
237237
{
238238
id: '2',
239239
title: 'contact',
240240
tooltip: 'contact',
241241
disable: true,
242242
closable: false,
243-
panelComponent: (porps) => <p> contact content </p>,
243+
panelComponent: (props) => <p> contact content </p>,
244244
},
245245
],
246246
});
@@ -275,15 +275,15 @@ const [TabList, PanelList, ready] = useDynTabs({
275275
title: 'home',
276276
iconClass: 'fa fa-home',
277277
closable: true,
278-
panelComponent: (porps) => <p> home content </p>,
278+
panelComponent: (props) => <p> home content </p>,
279279
},
280280
{
281281
id: '2',
282282
title: 'contact',
283283
tooltip: 'contact',
284284
disable: true,
285285
closable: false,
286-
panelComponent: (porps) => <p> contact content </p>,
286+
panelComponent: (props) => <p> contact content </p>,
287287
},
288288
],
289289
selectedTabID: '2',
@@ -1152,7 +1152,7 @@ const tabData = {
11521152
lazy: true,
11531153
iconClass: 'fa fa-home',
11541154
closable: false,
1155-
panelComponent: (porps) => <p> contact content </p>,
1155+
panelComponent: (props) => <p> contact content </p>,
11561156
};
11571157
const [TabList, PanelList, ready] = useDynTabs({tabs: [tabData]});
11581158
// or
@@ -1169,10 +1169,10 @@ Example 1
11691169

11701170
```js
11711171
const Panel3 = React.lazy(() => import('./components/panel3.js'));
1172-
function LazyLoadingPanel3(porps) {
1172+
function LazyLoadingPanel3(props) {
11731173
return (
11741174
<Suspense fallback={<div>Loading...</div>}>
1175-
<Panel3 {...porps}></Panel3>
1175+
<Panel3 {...props}></Panel3>
11761176
</Suspense>
11771177
);
11781178
}

‎example/stories/change-options/README.md‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
### change Theme
2+
3+
```jsx
4+
import React from 'react';
5+
import 'react-dyn-tabs/style/react-dyn-tabs.css';
6+
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
7+
import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.css';
8+
import 'react-dyn-tabs/themes/react-dyn-tabs-classic.css';
9+
import 'react-dyn-tabs/themes/react-dyn-tabs-basic.css';
10+
import useDynTabs from 'react-dyn-tabs';
11+
12+
const initialOptions = {
13+
tabs: [
14+
{
15+
id: '1',
16+
title: 'tab1',
17+
iconClass: 'fa fa-home',
18+
panelComponent: (props) => <p> panel 1 </p>,
19+
},
20+
{
21+
id: '2',
22+
title: 'tab2',
23+
iconClass: 'fa fa-book',
24+
panelComponent: (props) => <p> panel 2 </p>,
25+
},
26+
],
27+
selectedTabID: '1',
28+
theme: 'card',
29+
};
30+
31+
function App() {
32+
const [TabList, PanelList, ready] = useDynTabs(initialOptions);
33+
34+
const changeTheme = function (e) {
35+
ready((instance) => {
36+
instance.setOption('theme', e.target.value);
37+
instance.refresh();
38+
});
39+
};
40+
41+
return (
42+
<div>
43+
<select onChange={changeTheme} style={{marginBottom: '15px'}}>
44+
<option value="card">card theme</option>
45+
<option value="bootstrap">bootstrap theme</option>
46+
<option value="classic">classic theme</option>
47+
<option value="basic">basic theme</option>
48+
</select>
49+
<TabList></TabList>
50+
<PanelList></PanelList>
51+
</div>
52+
);
53+
}
54+
<App />;
55+
```
56+
57+
### change direction
58+
59+
```jsx
60+
import React from 'react';
61+
import 'react-dyn-tabs/style/react-dyn-tabs.css';
62+
import 'react-dyn-tabs/style/react-dyn-tabs-rtl.css';
63+
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
64+
import useDynTabs from 'react-dyn-tabs';
65+
66+
const initialOptions = {
67+
tabs: [
68+
{
69+
id: '1',
70+
title: 'tab1',
71+
panelComponent: (props) => <p> panel 1 </p>,
72+
},
73+
{
74+
id: '2',
75+
title: 'tab2',
76+
panelComponent: (props) => <p> panel 2 </p>,
77+
},
78+
],
79+
selectedTabID: '1',
80+
theme: 'card',
81+
};
82+
83+
function App() {
84+
const [TabList, PanelList, ready] = useDynTabs(initialOptions);
85+
const rightToLeft = function () {
86+
ready((instance) => {
87+
instance.setOption('direction', 'rtl');
88+
instance.refresh();
89+
});
90+
};
91+
92+
return (
93+
<div>
94+
<button onClick={rightToLeft}>right to left</button>
95+
<TabList></TabList>
96+
<PanelList></PanelList>
97+
</div>
98+
);
99+
}
100+
<App />;
101+
```
102+
103+
### change isVertical
104+
105+
```jsx
106+
import React from 'react';
107+
import 'react-dyn-tabs/style/react-dyn-tabs.css';
108+
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
109+
import useDynTabs from 'react-dyn-tabs';
110+
111+
const initialOptions = {
112+
tabs: [
113+
{
114+
id: '1',
115+
title: 'tab1',
116+
panelComponent: (props) => <p> panel 1 </p>,
117+
},
118+
{
119+
id: '2',
120+
title: 'tab2',
121+
panelComponent: (props) => <p> panel 2 </p>,
122+
},
123+
],
124+
selectedTabID: '1',
125+
theme: 'card',
126+
};
127+
128+
function App() {
129+
const [TabList, PanelList, ready] = useDynTabs(initialOptions);
130+
const setVertical = function () {
131+
ready((instance) => {
132+
instance.setOption('isVertical', true);
133+
instance.refresh();
134+
});
135+
};
136+
137+
return (
138+
<div>
139+
<div>
140+
<button onClick={setVertical}>vertical</button>
141+
</div>
142+
<TabList></TabList>
143+
<PanelList></PanelList>
144+
</div>
145+
);
146+
}
147+
<App />;
148+
```
149+
150+
### change Tab component
151+
152+
```jsx
153+
import React from 'react';
154+
import 'react-dyn-tabs/style/react-dyn-tabs.css';
155+
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
156+
import useDynTabs from 'react-dyn-tabs';
157+
158+
const initialOptions = {
159+
tabs: [
160+
{
161+
id: '1',
162+
title: 'tab1',
163+
iconClass: 'fa fa-home',
164+
panelComponent: (props) => <p> panel 1 </p>,
165+
},
166+
{
167+
id: '2',
168+
title: 'tab2',
169+
iconClass: 'fa fa-book',
170+
panelComponent: (props) => <p> panel 2 </p>,
171+
},
172+
],
173+
selectedTabID: '1',
174+
theme: 'card',
175+
};
176+
177+
function App() {
178+
const [TabList, PanelList, ready] = useDynTabs(initialOptions);
179+
180+
const customizeTabComponent = function () {
181+
ready((instance) => {
182+
instance.setOption('tabComponent', (props) => (
183+
<button {...props.tabProps} style={{display: 'flex', flexDirection: 'column'}}>
184+
{props.iconProps && <span {...props.iconProps}></span>}
185+
<span>{props.children}</span>
186+
</button>
187+
));
188+
instance.refresh();
189+
});
190+
};
191+
192+
return (
193+
<div>
194+
<button onClick={customizeTabComponent}>Customize Tab Component</button>
195+
<TabList></TabList>
196+
<PanelList></PanelList>
197+
</div>
198+
);
199+
}
200+
<App />;
201+
```

0 commit comments

Comments
 (0)