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

feat(tabs): proof of concept for keyed tabs

Browse source
This commit is contained in:
Eric Liu 2020-11-29 15:00:22 -08:00
commit 43f06f2be3
8 changed files with 466 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

41
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index
> 155 components exported from carbon-components-svelte@0.25.1.
> 156 components exported from carbon-components-svelte@0.25.1.
## Components
@ -134,6 +134,7 @@
- [`TableRow`](#tablerow)
- [`Tabs`](#tabs)
- [`TabsSkeleton`](#tabsskeleton)
- [`TabsV2`](#tabsv2)
- [`Tag`](#tag)
- [`TagSkeleton`](#tagskeleton)
- [`TextArea`](#textarea)
@ -3582,6 +3583,44 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `TabsV2`
### Types
```ts
export type TabsV2ItemId = number | string;
export interface TabsV2Item {
id: TabsV2ItemId;
label?: string;
disabled?: boolean;
}
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | ------------------------------------------- |
| selectedId | <code>let</code> | Yes | <code>TabsV2ItemId</code> | -- | Specify the selected tab id |
| selectedIndex | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the selected tab index |
| items | <code>let</code> | No | <code>TabsV2Item[]</code> | <code>[]</code> | Provide the tab items |
| 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 |
| triggerHref | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the tab trigger href attribute |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------------------------- | :------------------------ |
| -- | Yes | <code>{ id: TabsV2ItemId; index: number; item: TabsV2Item; } </code> | -- |
| tab | No | -- | <code>{item.label}</code> |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :---------------------------------------------------------------------------------------- |
| change | dispatched | <code>{ selectedIndex: number; selectedId: TabsV2ItemId; currentItem: TabsV2Item }</code> |
## `Tag`
### Props