Skip to content

Commit c7eb3f2

Browse files
complete theme option
1 parent ea512bf commit c7eb3f2

16 files changed

+548
-106
lines changed

README.md

Lines changed: 105 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ React Dynamic Tabs with full API
3535
- [defaultPanelComponent](#defaultpanelcomponent)
3636
- [accessibility](#accessibility)
3737
- [isVertical](#isvertical)
38+
- [theme](#theme)
3839
- [onLoad](#onload)
3940
- [onInit](#oninit)
4041
- [onChange](#onchange)
@@ -67,7 +68,7 @@ React Dynamic Tabs with full API
6768
- [Plugins](#plugins)
6869
- [More Button Plugin](#more-button-plugin)
6970
- [Render custom components at the end of the Tablist](#render-custom-components-at-the-end-of-the-tablist)
70-
- [Styling](#styling)
71+
- [Themes And Style](#themes-and-style)
7172
- [Caveats](#caveats)
7273
- [Test](#test)
7374
- [License](#license)
@@ -76,11 +77,15 @@ React Dynamic Tabs with full API
7677

7778
## Installation
7879

79-
> $ npm install react-dyn-tabs --save
80+
```js
81+
$ npm install react-dyn-tabs --save
82+
```
8083

8184
or
8285

83-
> $ yarn add react-dyn-tabs
86+
```js
87+
$ yarn add react-dyn-tabs
88+
```
8489

8590
If you need to directly include script in your html, use the following link :
8691

@@ -98,8 +103,8 @@ If you need to directly include script in your html, use the following link :
98103

99104
```js
100105
import React from 'react';
101-
import 'react-dyn-tabs/style/react-dyn-tabs.css';
102-
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
106+
import 'react-dyn-tabs/style/react-dyn-tabs.css'; // Mandatory CSS required by the react-dyn-tabs
107+
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css'; // Optional Theme applied to the react-dyn-tabs
103108
import useDynTabs from 'react-dyn-tabs';
104109

105110
const initialOptions = {
@@ -427,6 +432,47 @@ When `accessibility` option is `true`, it sets the id attribute of `panel` and `
427432
const [TabList, PanelList, ready] = useDynTabs({isVertical: true});
428433
```
429434

435+
### theme
436+
437+
<table>
438+
<tbody>
439+
<tr>
440+
<th>type</th>
441+
<th>required</th>
442+
<th>description</th>
443+
</tr>
444+
<tr>
445+
<td>string</td>
446+
<td>no</td>
447+
<td>the chosen theme name when you have multiple themes CSS.</td>
448+
</tr>
449+
</tbody>
450+
</table>
451+
452+
**Examples**
453+
454+
- in this exmaple, only `bootstrap` theme is applied to the `Tablist`, because value of `theme` option is `bootstrap`
455+
456+
```js
457+
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
458+
import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.css';
459+
import 'react-dyn-tabs/themes/react-dyn-tabs-classic.css';
460+
import 'react-dyn-tabs/themes/react-dyn-tabs-basic.css';
461+
...
462+
useDynTabs({theme:'bootstrap'});
463+
```
464+
465+
- in this exmaple, only `classic` theme is applied to the `Tablist`, because value of `theme` option is `classic`
466+
467+
```js
468+
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
469+
import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.css';
470+
import 'react-dyn-tabs/themes/react-dyn-tabs-classic.css';
471+
import 'react-dyn-tabs/themes/react-dyn-tabs-basic.css';
472+
...
473+
useDynTabs({theme:'classic'});
474+
```
475+
430476
### onLoad
431477

432478
<table>
@@ -1283,22 +1329,69 @@ useDynamicTabs(
12831329

12841330
```
12851331

1286-
## Styling
1332+
## Themes And Style
12871333

12881334
`react-dyn-tabs` does not include any style loading by default. Default stylesheets and themes are provided and can be included in your application if desired.
12891335

1336+
### Import the Style
1337+
12901338
```js
1291-
import 'react-dyn-tabs/style/react-dyn-tabs.min.css';
1339+
import 'react-dyn-tabs/style/react-dyn-tabs.css';
1340+
// or import 'react-dyn-tabs/style/react-dyn-tabs.min.css';
12921341
// or import 'react-dyn-tabs/style/scss/react-dyn-tabs.scss';
1293-
import 'react-dyn-tabs/themes/react-dyn-tabs-card.min.css';
1294-
// or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-card.scss';
12951342
```
12961343

1297-
**NOTE :**
1344+
For `rtl` mode you should also import following file
12981345

1299-
You can find other themes at themes folder and multiple themes example at example/multi-themes-example folder.
1346+
```js
1347+
import 'react-dyn-tabs/style/react-dyn-tabs-rtl.css';
1348+
// or import 'react-dyn-tabs/style/react-dyn-tabs-rtl.min.css';
1349+
// or import 'react-dyn-tabs/style/scss/react-dyn-tabs-rtl.scss';
1350+
```
1351+
1352+
### Themes
1353+
1354+
Themes define how the Tabs looks. The library comes with Provided Themes such as `card` and `bootstrap`. To use a theme you need to 1) import the themes CSS and 2) apply the chosen theme name to the `theme` option of the `react-dyn-tabs`.
13001355

1301-
Include `react-dyn-tabs/style/react-dyn-tabs-rtl.min.css` for `rtl` mode
1356+
- card theme
1357+
1358+
```js
1359+
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
1360+
// or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-card.scss';
1361+
// or import 'react-dyn-tabs/themes/react-dyn-tabs-card.min.css';
1362+
...
1363+
useDynTabs({theme:'card'});
1364+
```
1365+
1366+
- bootstrap theme
1367+
1368+
```js
1369+
import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.css';
1370+
// or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-bootstrap.scss';
1371+
// or import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.min.css';
1372+
...
1373+
useDynTabs({theme:'bootstrap'});
1374+
```
1375+
1376+
- basic theme
1377+
1378+
```js
1379+
import 'react-dyn-tabs/themes/react-dyn-tabs-basic.css';
1380+
// or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-basic.scss';
1381+
// or import 'react-dyn-tabs/themes/react-dyn-tabs-basic.min.css';
1382+
...
1383+
useDynTabs({theme:'basic'});
1384+
```
1385+
1386+
- classic theme
1387+
1388+
```js
1389+
import 'react-dyn-tabs/themes/react-dyn-tabs-classic.css';
1390+
// or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-classic.scss';
1391+
// or import 'react-dyn-tabs/themes/react-dyn-tabs-classic.min.css';
1392+
...
1393+
useDynTabs({theme:'classic'});
1394+
```
13021395

13031396
## Caveats
13041397

src/tablistView/__snapshots__/tablistView.test.js.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`TabListView structure : children props 1`] = `
44
<div>
55
<div
6-
className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr"
6+
className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr all-themes"
77
>
88
<div
99
className="rc-dyn-tabs-tablist-container"
@@ -15,23 +15,23 @@ exports[`TabListView structure : children props 1`] = `
1515
exports[`TabListView structure : default options 1`] = `
1616
<div>
1717
<div
18-
className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr"
18+
className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr all-themes"
1919
/>
2020
</div>
2121
`;
2222

2323
exports[`TabListView structure : isVertical option 1`] = `
2424
<div>
2525
<div
26-
className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr rc-dyn-tabs-vertical"
26+
className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr rc-dyn-tabs-vertical all-themes"
2727
/>
2828
</div>
2929
`;
3030

3131
exports[`TabListView structure : rtl option 1`] = `
3232
<div>
3333
<div
34-
className="rc-dyn-tabs-tablist-view rc-dyn-tabs-rtl"
34+
className="rc-dyn-tabs-tablist-view rc-dyn-tabs-rtl all-themes"
3535
/>
3636
</div>
3737
`;

src/utils/api/optionManager/defaultOptions.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default Helper.module(
1515
const _options = {
1616
tabs: [],
1717
selectedTabID: '',
18-
theme: '',
18+
theme: 'all-themes',
1919
beforeSelect: function () {
2020
return true;
2121
},

src/utils/api/optionManager/defaultOptions.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ describe('DefaultOptions.prototype.getOptions : ', () => {
55
const expected = {
66
tabs: [],
77
selectedTabID: '',
8-
theme: '',
8+
theme: 'all-themes',
99
beforeSelect: expect.any(Function),
1010
beforeClose: expect.any(Function),
1111
onOpen: expect.any(Function),

themes/react-dyn-tabs-basic.css

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,63 @@
1-
.rc-dyn-tabs-tablist-view {
1+
.all-themes.rc-dyn-tabs-tablist-view {
22
border: 1px solid #ccc;
33
background-color: #f1f1f1;
44
}
5-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
5+
.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
66
background-color: inherit;
77
border: none;
88
padding: 0.8em 1.5em;
99
min-width: 160px;
1010
min-height: 40px;
1111
color: gray;
1212
}
13-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
13+
.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
1414
color: gray;
1515
}
16-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title {
16+
.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title {
1717
background-color: #ddd;
1818
}
19-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title:active {
19+
.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title:active {
2020
background-color: #ddd;
2121
}
22-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected {
22+
.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected {
2323
color: black;
2424
}
25-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected .rc-dyn-tabs-title {
25+
.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected .rc-dyn-tabs-title {
2626
background-color: #ccc;
2727
color: black;
2828
}
29+
.all-themes.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-close {
30+
left: 10px;
31+
}
2932

30-
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-close {
33+
.basic.rc-dyn-tabs-tablist-view {
34+
border: 1px solid #ccc;
35+
background-color: #f1f1f1;
36+
}
37+
.basic.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
38+
background-color: inherit;
39+
border: none;
40+
padding: 0.8em 1.5em;
41+
min-width: 160px;
42+
min-height: 40px;
43+
color: gray;
44+
}
45+
.basic.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
46+
color: gray;
47+
}
48+
.basic.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title {
49+
background-color: #ddd;
50+
}
51+
.basic.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title:active {
52+
background-color: #ddd;
53+
}
54+
.basic.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected {
55+
color: black;
56+
}
57+
.basic.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected .rc-dyn-tabs-title {
58+
background-color: #ccc;
59+
color: black;
60+
}
61+
.basic.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-close {
3162
left: 10px;
3263
}

themes/react-dyn-tabs-basic.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)