Skip to content

Commit 3665a0a

Browse files
adding demo of changing moreButtonPlugin_iconComponent option
1 parent cdba541 commit 3665a0a

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed

example/stories/change-options/README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,3 +199,46 @@ function App() {
199199
}
200200
<App />;
201201
```
202+
203+
### change moreButtonPlugin_iconComponent
204+
205+
```jsx
206+
import React from 'react';
207+
import 'react-dyn-tabs/style/react-dyn-tabs.css';
208+
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
209+
import useDynTabs from 'react-dyn-tabs';
210+
import MoreButtonPlugin from 'react-dyn-tabs/plugins/moreButtonPlugin';
211+
212+
const initialOptions = {
213+
tabs: Array.from({length: 20}).map((value, i) => ({
214+
id: `${i + 1}`,
215+
title: `tab ${i + 1}`,
216+
panelComponent: <p> {`panel ${i + 1}`} </p>,
217+
})),
218+
selectedTabID: '2',
219+
theme: 'card',
220+
};
221+
222+
function App() {
223+
const [TabList, PanelList, ready] = useDynTabs(initialOptions, [MoreButtonPlugin]);
224+
225+
function handler() {
226+
ready((instance) => {
227+
instance
228+
.setOption('moreButtonPlugin_iconComponent', ({instance}) => {
229+
return <span style={{padding: '0.5rem 1rem', textTransform: 'none'}}>More</span>;
230+
})
231+
.refresh();
232+
});
233+
}
234+
235+
return (
236+
<div>
237+
<button onClick={handler}>customize icon component of more button</button>
238+
<TabList></TabList>
239+
<PanelList></PanelList>
240+
</div>
241+
);
242+
}
243+
<App />;
244+
```

0 commit comments

Comments
 (0)