@@ -35,6 +35,7 @@ React Dynamic Tabs with full API
35
35
- [ defaultPanelComponent] ( #defaultpanelcomponent )
36
36
- [ accessibility] ( #accessibility )
37
37
- [ isVertical] ( #isvertical )
38
+ - [ theme] ( #theme )
38
39
- [ onLoad] ( #onload )
39
40
- [ onInit] ( #oninit )
40
41
- [ onChange] ( #onchange )
@@ -67,7 +68,7 @@ React Dynamic Tabs with full API
67
68
- [ Plugins] ( #plugins )
68
69
- [ More Button Plugin] ( #more-button-plugin )
69
70
- [ 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 )
71
72
- [ Caveats] ( #caveats )
72
73
- [ Test] ( #test )
73
74
- [ License] ( #license )
@@ -76,11 +77,15 @@ React Dynamic Tabs with full API
76
77
77
78
## Installation
78
79
79
- > $ npm install react-dyn-tabs --save
80
+ ``` js
81
+ $ npm install react- dyn- tabs -- save
82
+ ```
80
83
81
84
or
82
85
83
- > $ yarn add react-dyn-tabs
86
+ ``` js
87
+ $ yarn add react- dyn- tabs
88
+ ```
84
89
85
90
If you need to directly include script in your html, use the following link :
86
91
@@ -98,8 +103,8 @@ If you need to directly include script in your html, use the following link :
98
103
99
104
``` js
100
105
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
103
108
import useDynTabs from ' react-dyn-tabs' ;
104
109
105
110
const initialOptions = {
@@ -427,6 +432,47 @@ When `accessibility` option is `true`, it sets the id attribute of `panel` and `
427
432
const [TabList , PanelList , ready ] = useDynTabs ({isVertical: true });
428
433
```
429
434
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
+
430
476
### onLoad
431
477
432
478
<table >
@@ -1283,22 +1329,69 @@ useDynamicTabs(
1283
1329
1284
1330
```
1285
1331
1286
- ## Styling
1332
+ ## Themes And Style
1287
1333
1288
1334
` 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.
1289
1335
1336
+ ### Import the Style
1337
+
1290
1338
``` 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';
1292
1341
// 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';
1295
1342
```
1296
1343
1297
- ** NOTE : **
1344
+ For ` rtl ` mode you should also import following file
1298
1345
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 ` .
1300
1355
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
+ ```
1302
1395
1303
1396
## Caveats
1304
1397
0 commit comments