mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +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

11
docs/src/COMPONENT_API.json
View file

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

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

@ -20,6 +20,23 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
</div>
</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
<FileSource src="/framed/Tabs/TabsReactive" />