From ccdd8af25b7d82d93f95cf151f74fd4dcf28f04c Mon Sep 17 00:00:00 2001
From: "AzureAD\\OlaBarecka"
Date: Wed, 30 Aug 2023 20:55:00 +0100
Subject: [PATCH] feat: add slot to gain control over tabs switching buttons
---
src/components/CvTabs/CvTabs.stories.mdx | 87 +++++++++++++++++++++++-
src/components/CvTabs/CvTabs.vue | 4 +-
2 files changed, 87 insertions(+), 4 deletions(-)
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
+
+ House
+
+
+ {{tab.label}} (*)
+
+
+ {{tab.label}} (!)
+
`;
const skeletonTemplate = ``;
@@ -173,3 +212,45 @@ screens, and so I suggest using a different component for mobile cases.
{Template.bind({})}
+
+# Tabs slotted
+
+
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 }}
+