diff --git a/packages/tabs/src/VTabGroup.vue b/packages/tabs/src/VTabGroup.vue index 950091b81..62c61f28d 100644 --- a/packages/tabs/src/VTabGroup.vue +++ b/packages/tabs/src/VTabGroup.vue @@ -11,6 +11,7 @@ const props = withDefaults( vertical?: boolean; centerActive?: boolean; color?: DefaultColors; + grow?: boolean; }>(), { variant: 'underline', @@ -39,6 +40,7 @@ function onTabChange(value: number) { { 'v-tabs--vertical': vertical, 'v-tabs--center-active': centerActive, + 'v-tabs--grow': grow, }, ]" as="div" diff --git a/packages/tabs/src/VTabs.stories.ts b/packages/tabs/src/VTabs.stories.ts index f6fe8c5d2..64e1ebe1e 100644 --- a/packages/tabs/src/VTabs.stories.ts +++ b/packages/tabs/src/VTabs.stories.ts @@ -588,6 +588,7 @@ export const HeadlessUI: Story = (args) => ({ return {args, tab, tabVariants}; }, template: ` +

Default

({ +

Vertical

({ Tab 3 content +

Grow

+ + + Tab 1 + Tab 2 + Tab 3 + + + Tab 1 content + Tab 2 content + Tab 3 content + + `, }); diff --git a/packages/themes/src/morpheme/_tabs.scss b/packages/themes/src/morpheme/_tabs.scss index f7fc7e79c..957298097 100644 --- a/packages/themes/src/morpheme/_tabs.scss +++ b/packages/themes/src/morpheme/_tabs.scss @@ -368,4 +368,16 @@ --v-tabs-item-active-text-color: var(--color-success-700); } } + + // grow + &--grow { + .v-tabs-items { + width: 100%; + } + .v-tabs-item { + flex-grow: 1; + justify-content: center; + text-align: center; + } + } }