File tree Expand file tree Collapse file tree 1 file changed +22
-1
lines changed
docs/src/pages/components Expand file tree Collapse file tree 1 file changed +22
-1
lines changed Original file line number Diff line number Diff 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
203224Show a loading state with the default skeleton variant.
@@ -208,4 +229,4 @@ Show a loading state with the default skeleton variant.
208229
209230Show a loading state with the container skeleton variant.
210231
211- <TabsSkeleton type="container" count={3} />
232+ <TabsSkeleton type="container" count={3} />
You can’t perform that action at this time.
0 commit comments