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

Add autoWidth prop to Tabs (#901)

Browse source 
* feat(tabs): support auto width tabs

Closes #899

* docs(tabs): add auto width example
This commit is contained in:
Eric Liu 2021-11-10 19:46:20 -08:00 • committed by GitHub
commit ea6757d020
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 49 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

13
COMPONENT_INDEX.md
View file

@ -3986,12 +3986,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

@ -10997,6 +10997,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",

17
docs/src/pages/components/Tabs.svx
View file

@ -20,6 +20,23 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
</div> </div>
</Tabs> </Tabs>
### Auto width
By default, the width of each tab is set to `10rem`.
Set `autoWidth` to `true` for tabs to have an automatically set width.
<Tabs autoWidth>
<Tab label="Tab label 1" />
<Tab label="Tab label 2" />
<Tab label="Tab label 3" />
<div slot="content">
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
</div>
</Tabs>
### Reactive example ### Reactive example
<FileSource src="/framed/Tabs/TabsReactive" /> <FileSource src="/framed/Tabs/TabsReactive" />

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"