aidos-ui 3.0.30 → 3.0.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Tabs.d.ts +3 -1
- package/dist/Tabs.js +3 -1
- package/dist/Tabs.js.map +1 -1
- package/package.json +1 -1
- package/src/Tabs.tsx +4 -2
- package/src/docs/searchIndex.ts +1 -1
- package/src/pages/Tabs.mdx +59 -0
package/src/pages/Tabs.mdx
CHANGED
|
@@ -363,4 +363,63 @@ You can customize how tab labels are rendered by providing a `labelRenderer` fun
|
|
|
363
363
|
]}
|
|
364
364
|
/>
|
|
365
365
|
</Column>
|
|
366
|
+
```
|
|
367
|
+
|
|
368
|
+
|
|
369
|
+
## Custom tab styles
|
|
370
|
+
|
|
371
|
+
You can provide custom styles to individual tabs using the `tabJSStyle` prop, which can either be a style object or a function that receives the tab's selected state.
|
|
372
|
+
|
|
373
|
+
<Column>
|
|
374
|
+
<Tabs
|
|
375
|
+
aria-controls="foo"
|
|
376
|
+
tabJSStyle={(data) => ({
|
|
377
|
+
borderBottom: data.selected ? "2px solid cyan" : "2px solid magenta",
|
|
378
|
+
})}
|
|
379
|
+
tabs={[
|
|
380
|
+
{
|
|
381
|
+
href: "/Tabs",
|
|
382
|
+
selected: true,
|
|
383
|
+
label: "Styled Tab 1",
|
|
384
|
+
},
|
|
385
|
+
{
|
|
386
|
+
href: "/Tabs",
|
|
387
|
+
selected: false,
|
|
388
|
+
label: "Styled Tab 2",
|
|
389
|
+
},
|
|
390
|
+
{
|
|
391
|
+
href: "/Tabs",
|
|
392
|
+
selected: false,
|
|
393
|
+
label: "Styled Tab 3",
|
|
394
|
+
},
|
|
395
|
+
]}
|
|
396
|
+
/>
|
|
397
|
+
</Column>
|
|
398
|
+
|
|
399
|
+
```js
|
|
400
|
+
<Column>
|
|
401
|
+
<Tabs
|
|
402
|
+
aria-controls="foo"
|
|
403
|
+
tabJSStyle={(data) => ({
|
|
404
|
+
borderBottom: data.selected ? "2px solid cyan" : "2px solid magenta",
|
|
405
|
+
})}
|
|
406
|
+
tabs={[
|
|
407
|
+
{
|
|
408
|
+
href: "/Tabs",
|
|
409
|
+
selected: true,
|
|
410
|
+
label: "Styled Tab 1",
|
|
411
|
+
},
|
|
412
|
+
{
|
|
413
|
+
href: "/Tabs",
|
|
414
|
+
selected: false,
|
|
415
|
+
label: "Styled Tab 2",
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
href: "/Tabs",
|
|
419
|
+
selected: false,
|
|
420
|
+
label: "Styled Tab 3",
|
|
421
|
+
},
|
|
422
|
+
]}
|
|
423
|
+
/>
|
|
424
|
+
</Column>
|
|
366
425
|
```
|