Skip to content

Commit 5aa3156

Browse files
update theme document and example
1 parent ffd2f4a commit 5aa3156

File tree

2 files changed

+44
-0
lines changed

2 files changed

+44
-0
lines changed

README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -480,6 +480,14 @@ const [TabList, PanelList, ready] = useDynTabs({isVertical: true});
480480
useDynTabs({theme:'classic'});
481481
```
482482

483+
#### Notes
484+
485+
- If the `theme` option is not provided then all imported themes CSS will be applied to the `Tablist`.
486+
487+
- If the `theme` option is set to a empty string then imported themes CSS will not be applied to the `Tablist`.
488+
489+
- You can create your own theme CSS and set the `theme` option to your theme class name
490+
483491
### tablistStyle
484492

485493
<table>

example/stories/minimal-usage/README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,3 +145,39 @@ function App() {
145145
}
146146
<App />;
147147
```
148+
149+
### blank theme
150+
151+
```jsx
152+
import React from 'react';
153+
import 'react-dyn-tabs/style/react-dyn-tabs.css';
154+
import useDynTabs from 'react-dyn-tabs';
155+
156+
const initialOptions = {
157+
tabs: [
158+
{
159+
id: '1',
160+
title: 'tab 1',
161+
panelComponent: (props) => <p> panel 1 </p>,
162+
},
163+
{
164+
id: '2',
165+
title: 'tab 2',
166+
panelComponent: (props) => <p> panel 2 </p>,
167+
},
168+
],
169+
selectedTabID: '1',
170+
theme: '',
171+
};
172+
173+
function App() {
174+
const [TabList, PanelList] = useDynTabs(initialOptions);
175+
return (
176+
<div>
177+
<TabList></TabList>
178+
<PanelList></PanelList>
179+
</div>
180+
);
181+
}
182+
<App />;
183+
```

0 commit comments

Comments
 (0)