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

chore: update component docs, types

Browse source
This commit is contained in:
Eric Liu 2020-07-30 16:52:30 -07:00
commit 151252b5ee
2 changed files with 71 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

35
README.md
View file

@ -30,9 +30,9 @@ yarn add -D carbon-components-svelte
<Button>Primary</Button> <Button>Primary</Button>
``` ```
## Available Components ## Components
> 147 components in "carbon-components-svelte" > 147 components exported from "carbon-components-svelte"
- Accordion - Accordion
- [AccordionSkeleton](#accordionskeleton) - [AccordionSkeleton](#accordionskeleton)
@ -1592,11 +1592,11 @@ import { ListBoxField } from "carbon-components-svelte";
**API** **API**
| Prop name | Type | Default | | Prop name | Type | Default |
| :-------------- | :------------------------------------------------------ | :------------- | | :-------------- | :----------------------------------------------------- | :------------- |
| disabled | <code>boolean</code> | false | | disabled | <code>boolean</code> | false |
| role | <code>string</code> | "combobox" | | role | <code>string</code> | "combobox" |
| tabindex | <code>string</code> | "-1" | | tabindex | <code>string</code> | "-1" |
| translateWithId | <code>(id: ListBoxFieldTranslationId) => string;</code> | (id) => string | | translateWithId | <code>(id: ListBoxFieldTranslationId) => string</code> | (id) => string |
| id | <code>string</code> | - | | id | <code>string</code> | - |
| ref | <code>null &#124; HTMLElement</code> | null | | ref | <code>null &#124; HTMLElement</code> | null |
@ -1688,7 +1688,7 @@ import { ListBoxSelection } from "carbon-components-svelte";
| Prop name | Type | Default | | Prop name | Type | Default |
| :-------------- | :--------------------------------------------------------- | :------------- | | :-------------- | :--------------------------------------------------------- | :------------- |
| selectionCount | <code>\*</code> | - | | selectionCount | <code>any</code> | - |
| disabled | <code>boolean</code> | false | | disabled | <code>boolean</code> | false |
| translateWithId | <code>(id: ListBoxSelectionTranslationId) => string</code> | (id) => string | | translateWithId | <code>(id: ListBoxSelectionTranslationId) => string</code> | (id) => string |
| ref | <code>null &#124; HTMLElement</code> | null | | ref | <code>null &#124; HTMLElement</code> | null |
@ -1796,7 +1796,7 @@ import { MultiSelect } from "carbon-components-svelte";
**API** **API**
| Prop name | Type | Default | | Prop name | Type | Default |
| :---------------- | :------------------------------------------------------------------------ | :---------------------------------------------------------- | | :---------------- | :----------------------------------------------------------------------- | :---------------------------------------------------------- |
| items | <code>MultiSelectItem[]</code> | [] | | items | <code>MultiSelectItem[]</code> | [] |
| itemToString | <code>(item: MultiSelectItem) => string</code> | (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId | | itemToString | <code>(item: MultiSelectItem) => string</code> | (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId |
| selectedIds | <code>MultiSelectItemId[]</code> | [] | | selectedIds | <code>MultiSelectItemId[]</code> | [] |
@ -1806,12 +1806,12 @@ import { MultiSelect } from "carbon-components-svelte";
| selectionFeedback | <code>"top" &#124; "fixed" &#124; "top-after-reopen"</code> | "top-after-reopen" | | selectionFeedback | <code>"top" &#124; "fixed" &#124; "top-after-reopen"</code> | "top-after-reopen" |
| disabled | <code>boolean</code> | false | | disabled | <code>boolean</code> | false |
| filterable | <code>boolean</code> | false | | filterable | <code>boolean</code> | false |
| filterItem | <code>(item: MultiSelectItem, value: string) => string;</code> | ((item: MultiSelectItem, value: string) => string;) | | filterItem | <code>(item: MultiSelectItem, value: string) => string</code> | (item: MultiSelectItem, value: string) => string |
| open | <code>boolean</code> | false | | open | <code>boolean</code> | false |
| light | <code>boolean</code> | false | | light | <code>boolean</code> | false |
| locale | <code>string</code> | "en" | | locale | <code>string</code> | "en" |
| placeholder | <code>string</code> | "" | | placeholder | <code>string</code> | "" |
| sortItem | <code>(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem;</code> | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | | sortItem | <code>(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem</code> | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem |
| translateWithId | <code>(id: any) => string</code> | - | | translateWithId | <code>(id: any) => string</code> | - |
| titleText | <code>string</code> | "" | | titleText | <code>string</code> | "" |
| useTitleInItem | <code>boolean</code> | false | | useTitleInItem | <code>boolean</code> | false |
@ -2825,8 +2825,13 @@ import { Tab } from "carbon-components-svelte";
**API** **API**
| Prop name | Type | Default | | Prop name | Type | Default |
| :-------- | :------------------ | :------ | | :-------- | :----------------------------------------- | :------ |
| label | <code>string</code> | "" |
| href | <code>string</code> | "#" |
| disabled | <code>boolean</code> | false |
| tabindex | <code>string</code> | "0" |
| id | <code>string</code> | - | | id | <code>string</code> | - |
| ref | <code>null &#124; HTMLAnchorElement</code> | null |
</details> </details>
@ -2868,7 +2873,12 @@ import { Tabs } from "carbon-components-svelte";
**API** **API**
No exported props. | Prop name | Type | Default |
| :-------------- | :---------------------------------------- | :---------------- |
| selected | <code>number</code> | 0 |
| type | <code>"default" &#124; "container"</code> | "default" |
| iconDescription | <code>string</code> | "Expand/Collapse" |
| triggerHref | <code>string</code> | "#" |
</details> </details>
@ -2888,7 +2898,9 @@ import { TabsSkeleton } from "carbon-components-svelte";
**API** **API**
No exported props. | Prop name | Type | Default |
| :-------- | :------------------ | :------ |
| count | <code>number</code> | 4 |
</details> </details>
@ -3613,6 +3625,7 @@ import { HeaderAction } from "carbon-components-svelte";
| isOpen | <code>boolean</code> | false | | isOpen | <code>boolean</code> | false |
| icon | <code>{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }</code> | - | | icon | <code>{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }</code> | - |
| text | <code>string</code> | - | | text | <code>string</code> | - |
| ref | <code>null &#124; HTMLButtonElement</code> | null |
</details> </details>

19
types/index.d.ts vendored
View file

@ -1,4 +1,4 @@
// Type definitions for carbon-components-svelte 0.8 // Type definitions for carbon-components-svelte 0.9
// https://github.com/IBM/carbon-components-svelte // https://github.com/IBM/carbon-components-svelte
// Carbon Icon type from carbon-icons-svelte 10.14 // Carbon Icon type from carbon-icons-svelte 10.14
@ -1059,7 +1059,12 @@ export class StructuredListRow {
export class Tab { export class Tab {
$$prop_def: { $$prop_def: {
label?: string; // default: ""
href?: string; // default: "#"
disabled?: boolean; // default: false
tabindex?: string; // default: "0"
id?: string; id?: string;
ref?: null | HTMLAnchorElement; // default: null
}; };
} }
@ -1070,11 +1075,18 @@ export class TabContent {
} }
export class Tabs { export class Tabs {
$$prop_def: {}; $$prop_def: {
selected?: number; // default: 0
type?: "default" | "container"; // default: "default"
iconDescription?: string; // default: "Expand/Collapse"
triggerHref?: string; // default: "#"
};
} }
export class TabsSkeleton { export class TabsSkeleton {
$$prop_def: {}; $$prop_def: {
count?: number; // default: 4
};
} }
export class TagSkeleton { export class TagSkeleton {
@ -1377,6 +1389,7 @@ export class HeaderAction {
isOpen?: boolean; // default: false isOpen?: boolean; // default: false
icon?: { render: CarbonIcon; skeleton: boolean }; icon?: { render: CarbonIcon; skeleton: boolean };
text?: string; text?: string;
ref?: null | HTMLButtonElement; // default: null
}; };
} }