diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index ad431615..3509b894 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3984,12 +3984,13 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | ------------------------------------------- | -| selected | let | Yes | number | 0 | Specify the selected tab index | -| type | let | No | "default" | "container" | "default" | Specify the type of tabs | -| iconDescription | let | No | string | "Show menu options" | Specify the ARIA label for the chevron icon | -| triggerHref | let | No | string | "#" | Specify the tab trigger href attribute | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | -------------------------------------------- | +| selected | let | Yes | number | 0 | Specify the selected tab index | +| type | let | No | "default" | "container" | "default" | Specify the type of tabs | +| autoWidth | let | No | boolean | false | Set to `true` for tabs to have an auto-width | +| iconDescription | let | No | string | "Show menu options" | Specify the ARIA label for the chevron icon | +| triggerHref | let | No | string | "#" | Specify the tab trigger href attribute | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 9176f272..e0ba6965 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -10985,6 +10985,17 @@ "constant": false, "reactive": false }, + { + "name": "autoWidth", + "kind": "let", + "description": "Set to `true` for tabs to have an auto-width", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, { "name": "iconDescription", "kind": "let", diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte index 09d84ca0..c276e17e 100644 --- a/src/Tabs/Tab.svelte +++ b/src/Tabs/Tab.svelte @@ -22,7 +22,7 @@ import { onMount, afterUpdate, getContext, tick } from "svelte"; - const { selectedTab, add, update, change } = getContext("Tabs"); + const { selectedTab, useAutoWidth, add, update, change } = getContext("Tabs"); add({ id, label, disabled }); @@ -81,6 +81,7 @@ id="{id}" href="{href}" class:bx--tabs__nav-link="{true}" + style="{$useAutoWidth ? 'width: auto' : undefined}" > {label} diff --git a/src/Tabs/Tabs.svelte b/src/Tabs/Tabs.svelte index 3b8e625d..a7b7f7b5 100644 --- a/src/Tabs/Tabs.svelte +++ b/src/Tabs/Tabs.svelte @@ -8,6 +8,9 @@ */ export let type = "default"; + /** Set to `true` for tabs to have an auto-width */ + export let autoWidth = false; + /** * Specify the ARIA label for the chevron icon * @type {string} @@ -27,6 +30,7 @@ const tabsById = derived(tabs, (_) => _.reduce((a, c) => ({ ...a, [c.id]: c }), {}) ); + const useAutoWidth = writable(autoWidth); const selectedTab = writable(undefined); const content = writable([]); const contentById = derived(content, (_) => @@ -39,6 +43,7 @@ contentById, selectedTab, selectedContent, + useAutoWidth, add: (data) => { tabs.update((_) => [..._, { ...data, index: _.length }]); }, @@ -99,6 +104,7 @@ $: if ($selectedTab) { dropdownHidden = true; } + $: useAutoWidth.set(autoWidth);