diff --git a/src/components/CvTabs/CvTabs.stories.mdx b/src/components/CvTabs/CvTabs.stories.mdx index 9060fc455..3810ca238 100644 --- a/src/components/CvTabs/CvTabs.stories.mdx +++ b/src/components/CvTabs/CvTabs.stories.mdx @@ -5,6 +5,7 @@ import CvTab from './CvTab.vue'; import CvTabsSkeleton from './CvTabsSkeleton.vue'; import SbContainer from './_SbContainer.vue'; import { action } from '@storybook/addon-actions'; +import { IbmSecurity20 as SampleIcon } from '@carbon/icons-vue'; ({ CvTabs, CvTab, CvTabsSkeleton, + SampleIcon, }, // The story's `args` need to be mapped into the template through the `setup()` method setup() { @@ -31,6 +33,7 @@ export const Template = args => ({ noDefaultToFirst: args.noDefaultToFirst, selectedId: args.selectedId, disabledIds: args.disabledIds, + slottedTabs: args.slottedTabs, onTabSelected: action('tab-selected'), onTabSelectedId: action('tab-selected-id'), }; @@ -46,20 +49,47 @@ const defaultTemplate = ` @tab-selected-id="onTabSelectedId" aria-label="navigation tab label"> -

+

+ To customise tab look, in CvTabs component use scoped slot named with tab's label. + Example: current tab has label "House", so the code for customising tab looks like: +

+ <template #House="tab"> + { { tab.label } } <IbmSecurity20 /> + <template> +
+

+

29 Arlington Avenue is a house in Islington, London. Douglas Adams shared the house for a time with Jonny Brock and Clare Gorst. It is mentioned in the dedication of The Hitchhiker's Guide to the Galaxy, which is dedicated to the "Arlingtonians for tea, sympathy, and a sofa."

-

+

+ To customise tab look, in CvTabs component use scoped slot named with tab's label. + Example: current tab has label "Bar", so the code for customising tab looks like: +

+ <template #Bar="tab"> + { { tab.label } } <strong style="color: red;">(*)</strong> + <template> +
+

+

The Old Pink Dog Bar was the bar in Han Dold City that Ford Prefect was in when he discovered that his Guide had his full entry on Earth on it.

-

+

+ To customise tab look, in CvTabs component use scoped slot named with tab's label. + Example: current tab has label "Reach", so the code for customising tab looks like: +

+ <template #Reach="tab"> + { { tab.label } } <strong style="color: orange;">(!)</strong> + <template> +
+

+

The Third Reach of the Unknown is what might be loosely described as a "place" which exists only under high improbability conditions and was created on the starship Heart of Gold due to the Infinite Improbability Drive. During Arthur Dent and Ford Prefect's first trip on board the Heart @@ -81,6 +111,15 @@ const defaultTemplate = ` credits

+ + + `; const skeletonTemplate = ``; @@ -173,3 +212,45 @@ screens, and so I suggest using a different component for mobile cases. {Template.bind({})} + +# Tabs slotted + + + + {Template.bind({})} + + diff --git a/src/components/CvTabs/CvTabs.vue b/src/components/CvTabs/CvTabs.vue index c194e8ce7..0498fd1fe 100644 --- a/src/components/CvTabs/CvTabs.vue +++ b/src/components/CvTabs/CvTabs.vue @@ -76,7 +76,9 @@ :tabindex="selectedId === tab.uid ? 0 : -1" type="button" > - {{ tab.label }} + + {{ tab.label }} +