mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 20:33:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(tabs): support auto width tabs

Browse source 
Closes #899
This commit is contained in:
metonym 2021-11-10 14:16:11 -08:00
commit 924deee6f6
5 changed files with 32 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

13
COMPONENT_INDEX.md
View file

@ -3984,12 +3984,13 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | ------------------------------------------- | | :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | -------------------------------------------- |
| selected | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the selected tab index | | selected | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the selected tab index |
| type | <code>let</code> | No | <code>"default" &#124; "container"</code> | <code>"default"</code> | Specify the type of tabs | | type | <code>let</code> | No | <code>"default" &#124; "container"</code> | <code>"default"</code> | Specify the type of tabs |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Show menu options"</code> | Specify the ARIA label for the chevron icon | | autoWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for tabs to have an auto-width |
| triggerHref | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the tab trigger href attribute | | iconDescription | <code>let</code> | No | <code>string</code> | <code>"Show menu options"</code> | Specify the ARIA label for the chevron icon |
| triggerHref | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the tab trigger href attribute |
### Slots ### Slots

11
docs/src/COMPONENT_API.json
View file

@ -10985,6 +10985,17 @@
"constant": false, "constant": false,
"reactive": 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", "name": "iconDescription",
"kind": "let", "kind": "let",

3
src/Tabs/Tab.svelte
View file

@ -22,7 +22,7 @@
import { onMount, afterUpdate, getContext, tick } from "svelte"; 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 }); add({ id, label, disabled });
@ -81,6 +81,7 @@
id="{id}" id="{id}"
href="{href}" href="{href}"
class:bx--tabs__nav-link="{true}" class:bx--tabs__nav-link="{true}"
style="{$useAutoWidth ? 'width: auto' : undefined}"
> >
<slot>{label}</slot> <slot>{label}</slot>
</a> </a>

6
src/Tabs/Tabs.svelte
View file

@ -8,6 +8,9 @@
*/ */
export let type = "default"; 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 * Specify the ARIA label for the chevron icon
* @type {string} * @type {string}
@ -27,6 +30,7 @@
const tabsById = derived(tabs, (_) => const tabsById = derived(tabs, (_) =>
_.reduce((a, c) => ({ ...a, [c.id]: c }), {}) _.reduce((a, c) => ({ ...a, [c.id]: c }), {})
); );
const useAutoWidth = writable(autoWidth);
const selectedTab = writable(undefined); const selectedTab = writable(undefined);
const content = writable([]); const content = writable([]);
const contentById = derived(content, (_) => const contentById = derived(content, (_) =>
@ -39,6 +43,7 @@
contentById, contentById,
selectedTab, selectedTab,
selectedContent, selectedContent,
useAutoWidth,
add: (data) => { add: (data) => {
tabs.update((_) => [..._, { ...data, index: _.length }]); tabs.update((_) => [..._, { ...data, index: _.length }]);
}, },
@ -99,6 +104,7 @@
$: if ($selectedTab) { $: if ($selectedTab) {
dropdownHidden = true; dropdownHidden = true;
} }
$: useAutoWidth.set(autoWidth);
</script> </script>
<div <div

6
types/Tabs/Tabs.svelte.d.ts vendored
View file

@ -15,6 +15,12 @@ export interface TabsProps
*/ */
type?: "default" | "container"; type?: "default" | "container";
/**
* Set to `true` for tabs to have an auto-width
* @default false
*/
autoWidth?: boolean;
/** /**
* Specify the ARIA label for the chevron icon * Specify the ARIA label for the chevron icon
* @default "Show menu options" * @default "Show menu options"