Skip to content

Commit abf99a9

Browse files
committed
docs(tabs): add "Container type (secondaryChildren slot)" example
1 parent d901765 commit abf99a9

File tree

1 file changed

+22
-1
lines changed

1 file changed

+22
-1
lines changed

docs/src/pages/components/Tabs.svx

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,27 @@ When only some tabs use `secondaryLabel`, the container still applies the taller
198198
</svelte:fragment>
199199
</Tabs>
200200

201+
## Container type (`secondaryChildren` slot)
202+
203+
Use the `secondaryChildren` slot to customize the secondary label with custom markup (e.g. `<strong>` for emphasis).
204+
205+
<Tabs type="container">
206+
<Tab label="Engage">
207+
<strong slot="secondaryChildren">(21/25)</strong>
208+
</Tab>
209+
<Tab label="Analyze">
210+
<strong slot="secondaryChildren">(12/16)</strong>
211+
</Tab>
212+
<Tab label="Remediate">
213+
<strong slot="secondaryChildren">(0/7)</strong>
214+
</Tab>
215+
<svelte:fragment slot="content">
216+
<TabContent>Engage content</TabContent>
217+
<TabContent>Analyze content</TabContent>
218+
<TabContent>Remediate content</TabContent>
219+
</svelte:fragment>
220+
</Tabs>
221+
201222
## Skeleton (default)
202223

203224
Show a loading state with the default skeleton variant.
@@ -208,4 +229,4 @@ Show a loading state with the default skeleton variant.
208229

209230
Show a loading state with the container skeleton variant.
210231

211-
<TabsSkeleton type="container" count={3} />
232+
<TabsSkeleton type="container" count={3} />

0 commit comments

Comments
 (0)