File tree Expand file tree Collapse file tree 1 file changed +43
-0
lines changed
example/stories/change-options Expand file tree Collapse file tree 1 file changed +43
-0
lines changed Original file line number Diff line number Diff line change @@ -199,3 +199,46 @@ function App() {
199
199
}
200
200
< App / > ;
201
201
```
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
+ ```
You can’t perform that action at this time.
0 commit comments