From 5f9ba52312e22ac766e6465456acfe21c3c39cc0 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 14 Aug 2020 19:16:18 -0700 Subject: [PATCH] docs: update readme with info on ts support/component index --- README.md | 3936 +---------------------------------------------------- 1 file changed, 5 insertions(+), 3931 deletions(-) diff --git a/README.md b/README.md index 4c8dfbe3..279a4487 100644 --- a/README.md +++ b/README.md @@ -30,3939 +30,13 @@ yarn add -D carbon-components-svelte ``` +### TypeScript support + +This library ships with TypeScript definitions ([types/index.d.ts](types/index.d.ts)). + ## Components -> 147 components exported from "carbon-components-svelte" - -- Accordion - - [AccordionSkeleton](#accordionskeleton) - - [Accordion](#accordion) - - [AccordionItem](#accordionitem) -- Breadcrumb - - [BreadcrumbSkeleton](#breadcrumbskeleton) - - [Breadcrumb](#breadcrumb) - - [BreadcrumbItem](#breadcrumbitem) -- Button - - [ButtonSkeleton](#buttonskeleton) - - [Button](#button) -- Checkbox - - [CheckboxSkeleton](#checkboxskeleton) - - [Checkbox](#checkbox) -- CodeSnippet - - [CodeSnippetSkeleton](#codesnippetskeleton) - - [CodeSnippet](#codesnippet) -- [ComboBox](#combobox) -- ComposedModal - - [ComposedModal](#composedmodal) - - [ModalBody](#modalbody) - - [ModalFooter](#modalfooter) - - [ModalHeader](#modalheader) -- ContentSwitcher - - [ContentSwitcher](#contentswitcher) - - [Switch](#switch) -- [Copy](#copy) -- [CopyButton](#copybutton) -- DataTable - - [DataTable](#datatable) - - [Table](#table) - - [TableBody](#tablebody) - - [TableCell](#tablecell) - - [TableContainer](#tablecontainer) - - [TableHead](#tablehead) - - [TableHeader](#tableheader) - - [TableRow](#tablerow) -- [DataTableSkeleton](#datatableskeleton) -- DatePicker - - [DatePickerSkeleton](#datepickerskeleton) - - [DatePicker](#datepicker) - - [DatePickerInput](#datepickerinput) -- Dropdown - - [DropdownSkeleton](#dropdownskeleton) - - [Dropdown](#dropdown) -- FileUploader - - [FileUploaderSkeleton](#fileuploaderskeleton) - - [FileUploader](#fileuploader) - - [FileUploaderButton](#fileuploaderbutton) - - [FileUploaderDropContainer](#fileuploaderdropcontainer) - - [FileUploaderItem](#fileuploaderitem) - - [Filename](#filename) -- [Form](#form) -- [FormGroup](#formgroup) -- [FormItem](#formitem) -- [FormLabel](#formlabel) -- Grid - - [Column](#column) - - [Grid](#grid) - - [Row](#row) -- Icon - - [IconSkeleton](#iconskeleton) - - [Icon](#icon) -- [InlineLoading](#inlineloading) -- [Link](#link) -- ListBox - - [ListBox](#listbox) - - [ListBoxField](#listboxfield) - - [ListBoxMenu](#listboxmenu) - - [ListBoxMenuIcon](#listboxmenuicon) - - [ListBoxMenuItem](#listboxmenuitem) - - [ListBoxSelection](#listboxselection) -- [ListItem](#listitem) -- [Loading](#loading) -- [Modal](#modal) -- [MultiSelect](#multiselect) -- Notification - - [InlineNotification](#inlinenotification) - - [NotificationActionButton](#notificationactionbutton) - - [NotificationButton](#notificationbutton) - - [NotificationIcon](#notificationicon) - - [NotificationTextDetails](#notificationtextdetails) - - [ToastNotification](#toastnotification) -- NumberInput - - [NumberInputSkeleton](#numberinputskeleton) - - [NumberInput](#numberinput) -- [OrderedList](#orderedlist) -- OverflowMenu - - [OverflowMenu](#overflowmenu) - - [OverflowMenuItem](#overflowmenuitem) -- Pagination - - [PaginationSkeleton](#paginationskeleton) - - [Pagination](#pagination) -- PaginationNav - - [PaginationItem](#paginationitem) - - [PaginationNav](#paginationnav) - - [PaginationOverflow](#paginationoverflow) -- ProgressIndicator - - [ProgressIndicatorSkeleton](#progressindicatorskeleton) - - [ProgressIndicator](#progressindicator) - - [ProgressStep](#progressstep) -- RadioButton - - [RadioButtonSkeleton](#radiobuttonskeleton) - - [RadioButton](#radiobutton) -- [RadioButtonGroup](#radiobuttongroup) -- Search - - [SearchSkeleton](#searchskeleton) - - [Search](#search) -- Select - - [SelectSkeleton](#selectskeleton) - - [Select](#select) - - [SelectItem](#selectitem) - - [SelectItemGroup](#selectitemgroup) -- [SkeletonPlaceholder](#skeletonplaceholder) -- [SkeletonText](#skeletontext) -- Slider - - [SliderSkeleton](#sliderskeleton) - - [Slider](#slider) -- StructuredList - - [StructuredListSkeleton](#structuredlistskeleton) - - [StructuredList](#structuredlist) - - [StructuredListBody](#structuredlistbody) - - [StructuredListCell](#structuredlistcell) - - [StructuredListHead](#structuredlisthead) - - [StructuredListInput](#structuredlistinput) - - [StructuredListRow](#structuredlistrow) -- Tabs - - [Tab](#tab) - - [TabContent](#tabcontent) - - [Tabs](#tabs) - - [TabsSkeleton](#tabsskeleton) -- Tag - - [TagSkeleton](#tagskeleton) - - [Tag](#tag) -- TextArea - - [TextAreaSkeleton](#textareaskeleton) - - [TextArea](#textarea) -- TextInput - - [PasswordInput](#passwordinput) - - [TextInputSkeleton](#textinputskeleton) - - [TextInput](#textinput) -- Tile - - [ClickableTile](#clickabletile) - - [ExpandableTile](#expandabletile) - - [RadioTile](#radiotile) - - [SelectableTile](#selectabletile) - - [Tile](#tile) - - [TileGroup](#tilegroup) -- TimePicker - - [TimePicker](#timepicker) - - [TimePickerSelect](#timepickerselect) -- Toggle - - [ToggleSkeleton](#toggleskeleton) - - [Toggle](#toggle) -- ToggleSmall - - [ToggleSmallSkeleton](#togglesmallskeleton) - - [ToggleSmall](#togglesmall) -- [Tooltip](#tooltip) -- [TooltipDefinition](#tooltipdefinition) -- [TooltipIcon](#tooltipicon) -- UIShell - - [Content](#content) - - [SkipToContent](#skiptocontent) - - [Header](#header) - - [HeaderAction](#headeraction) - - [HeaderActionLink](#headeractionlink) - - [HeaderActionSearch](#headeractionsearch) - - [HeaderNav](#headernav) - - [HeaderNavItem](#headernavitem) - - [HeaderNavMenu](#headernavmenu) - - [HeaderPanelDivider](#headerpaneldivider) - - [HeaderPanelLink](#headerpanellink) - - [HeaderPanelLinks](#headerpanellinks) - - [HeaderUtilities](#headerutilities) - - [HamburgerMenu](#hamburgermenu) - - [SideNav](#sidenav) - - [SideNavItems](#sidenavitems) - - [SideNavLink](#sidenavlink) - - [SideNavMenu](#sidenavmenu) - - [SideNavMenuItem](#sidenavmenuitem) -- [UnorderedList](#unorderedlist) - -## Component Index - -### AccordionSkeleton - -
Usage - -**Component Group:** Accordion - -**Import Path** - -```js -import { AccordionSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| count | number | 4 | -| open | boolean | true | - -
- ---- - -### Accordion - -
Usage - -**Component Group:** Accordion - -**Import Path** - -```js -import { Accordion } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :-------------------------------- | :------ | -| align | "start" | "end" | "end" | -| skeleton | boolean | false | - -
- ---- - -### AccordionItem - -
Usage - -**Component Group:** Accordion - -**Import Path** - -```js -import { AccordionItem } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :------------------- | :---------------- | -| title | string | "title" | -| open | boolean | false | -| iconDescription | string | "Expand/Collapse" | - -
- ---- - -### BreadcrumbSkeleton - -
Usage - -**Component Group:** Breadcrumb - -**Import Path** - -```js -import { BreadcrumbSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :------------------- | :------ | -| noTrailingSlash | boolean | false | -| count | number | 3 | - -
- ---- - -### Breadcrumb - -
Usage - -**Component Group:** Breadcrumb - -**Import Path** - -```js -import { Breadcrumb } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :------------------- | :------ | -| noTrailingSlash | boolean | false | -| skeleton | boolean | false | - -
- ---- - -### BreadcrumbItem - -
Usage - -**Component Group:** Breadcrumb - -**Import Path** - -```js -import { BreadcrumbItem } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------ | :------------------- | :------ | -| href | string | - | -| isCurrentPage | boolean | false | - -
- ---- - -### ButtonSkeleton - -
Usage - -**Component Group:** Button - -**Import Path** - -```js -import { ButtonSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| href | string | - | -| small | boolean | false | - -
- ---- - -### Button - -
Usage - -**Component Group:** Button - -**Import Path** - -```js -import { Button } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :--------------- | :----------------------------------------------------------------------------------------- | :-------- | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | -| size | "default" | "field" | "small" | "default" | -| hasIconOnly | boolean | false | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | - | -| iconDescription | string | - | -| tooltipAlignment | "start" | "center" | "end" | - | -| tooltipPosition | "top" | "right" | "bottom" | "left" | - | -| as | boolean | false | -| skeleton | boolean | false | -| disabled | boolean | false | -| href | string | - | -| tabindex | string | "0" | -| type | string | "button" | -| ref | null | HTMLAnchorElement | HTMLButtonElement | null | - -
- ---- - -### CheckboxSkeleton - -
Usage - -**Component Group:** Checkbox - -**Import Path** - -```js -import { CheckboxSkeleton } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### Checkbox - -
Usage - -**Component Group:** Checkbox - -**Import Path** - -```js -import { Checkbox } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------ | :---------------------------------------- | :------ | -| checked | boolean | false | -| indeterminate | boolean | false | -| skeleton | boolean | false | -| readonly | boolean | false | -| disabled | boolean | false | -| labelText | string | "" | -| hideLabel | boolean | false | -| name | string | "" | -| title | string | - | -| id | string | - | -| ref | null | HTMLInputElement | null | - -
- ---- - -### CodeSnippetSkeleton - -
Usage - -**Component Group:** CodeSnippet - -**Import Path** - -```js -import { CodeSnippetSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :--------------------------------------------------- | :------- | -| type | "single" | "inline" | "multi" | "single" | - -
- ---- - -### CodeSnippet - -
Usage - -**Component Group:** CodeSnippet - -**Import Path** - -```js -import { CodeSnippet } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------------- | :--------------------------------------------------- | :---------- | -| type | "single" | "inline" | "multi" | "single" | -| code | string | - | -| expanded | boolean | false | -| light | boolean | false | -| skeleton | boolean | false | -| copyButtonDescription | string | - | -| copyLabel | string | - | -| feedback | string | "Copied!" | -| feedbackTimeout | number | 2000 | -| showLessText | string | "Show more" | -| showMoreLess | boolean | false | -| id | string | - | -| ref | null | HTMLPreElement | null | - -
- ---- - -### ComboBox - -
Usage - -**Component Group:** ComboBox - -**Import Path** - -```js -import { ComboBox } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :--------------- | :---------------------------------------------------------- | :----------------------------- | -| items | ComboBoxItem[] | [] | -| itemToString | (item: ComboBoxItem) => string | (item: ComboBoxItem) => string | -| selectedIndex | number | -1 | -| value | string | "" | -| size | "sm" | "xl" | - | -| disabled | boolean | false | -| titleText | string | "" | -| placeholder | string | "" | -| helperText | string | "" | -| invalidText | string | "" | -| invalid | boolean | false | -| light | boolean | false | -| open | boolean | false | -| shouldFilterItem | (item: ComboBoxItem, value: string) => boolean | () => true | -| translateWithId | (id: any) => string | - | -| id | string | - | -| name | string | - | -| ref | null | HTMLInputElement | null | - -
- ---- - -### ComposedModal - -
Usage - -**Component Group:** ComposedModal - -**Import Path** - -```js -import { ComposedModal } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------------- | :---------------------------------------- | :--------------------------- | -| size | "xs" | "sm" | "lg" | - | -| open | boolean | false | -| danger | boolean | false | -| containerClass | string | "" | -| selectorPrimaryFocus | string | "[data-modal-primary-focus]" | -| ref | null | HTMLElement | null | - -
- ---- - -### ModalBody - -
Usage - -**Component Group:** ComposedModal - -**Import Path** - -```js -import { ModalBody } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------------ | :------------------- | :------ | -| hasForm | boolean | false | -| hasScrollingContent | boolean | false | - -
- ---- - -### ModalFooter - -
Usage - -**Component Group:** ComposedModal - -**Import Path** - -```js -import { ModalFooter } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------------- | :------------------- | :------ | -| primaryButtonText | string | "" | -| primaryButtonDisabled | boolean | false | -| primaryClass | string | - | -| secondaryButtonText | string | "" | -| secondaryClass | string | - | -| danger | boolean | false | - -
- ---- - -### ModalHeader - -
Usage - -**Component Group:** ComposedModal - -**Import Path** - -```js -import { ModalHeader } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :------------------ | :------ | -| title | string | "" | -| label | string | "" | -| labelClass | string | "" | -| titleClass | string | "" | -| closeClass | string | "" | -| closeIconClass | string | "" | -| iconDescription | string | "Close" | - -
- ---- - -### ContentSwitcher - -
Usage - -**Component Group:** ContentSwitcher - -**Import Path** - -```js -import { ContentSwitcher } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------ | :------------------- | :------ | -| selectedIndex | number | 0 | -| light | boolean | false | - -
- ---- - -### Switch - -
Usage - -**Component Group:** ContentSwitcher - -**Import Path** - -```js -import { Switch } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :----------------------------------------- | :------------- | -| text | string | "Provide text" | -| selected | boolean | false | -| disabled | boolean | false | -| id | string | - | -| ref | null | HTMLButtonElement | null | - -
- ---- - -### Copy - -
Usage - -**Component Group:** Copy - -**Import Path** - -```js -import { Copy } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :----------------------------------------- | :-------- | -| feedback | string | "Copied!" | -| feedbackTimeout | number | 2000 | -| ref | null | HTMLButtonElement | null | - -
- ---- - -### CopyButton - -
Usage - -**Component Group:** CopyButton - -**Import Path** - -```js -import { CopyButton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :------------------ | :------------------ | -| iconDescription | string | "Copy to clipboard" | - -
- ---- - -### DataTable - -
Usage - -**Component Group:** DataTable - -**Import Path** - -```js -import { DataTable } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :----------- | :-------------------------------------------------- | :------ | -| headers | {key: string; value: string;} | [] | -| rows | Object[] | [] | -| size | "compact" | "short" | "tall" | - | -| title | string | "" | -| description | string | "" | -| zebra | boolean | false | -| sortable | boolean | false | -| stickyHeader | boolean | false | - -
- ---- - -### Table - -
Usage - -**Component Group:** DataTable - -**Import Path** - -```js -import { Table } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :--------------- | :-------------------------------------------------- | :------ | -| size | "compact" | "short" | "tall" | - | -| zebra | boolean | false | -| useStaticWidth | boolean | false | -| shouldShowBorder | boolean | false | -| sortable | boolean | false | -| stickyHeader | boolean | false | - -
- ---- - -### TableBody - -
Usage - -**Component Group:** DataTable - -**Import Path** - -```js -import { TableBody } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### TableCell - -
Usage - -**Component Group:** DataTable - -**Import Path** - -```js -import { TableCell } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### TableContainer - -
Usage - -**Component Group:** DataTable - -**Import Path** - -```js -import { TableContainer } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :----------- | :------------------- | :------ | -| title | string | "" | -| description | string | "" | -| stickyHeader | boolean | false | - -
- ---- - -### TableHead - -
Usage - -**Component Group:** DataTable - -**Import Path** - -```js -import { TableHead } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### TableHeader - -
Usage - -**Component Group:** DataTable - -**Import Path** - -```js -import { TableHeader } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :------------------------ | :------- | -| scope | string | "col" | -| translateWithId | () => string | () => "" | -| id | string | - | - -
- ---- - -### TableRow - -
Usage - -**Component Group:** DataTable - -**Import Path** - -```js -import { TableRow } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :--------- | :------------------- | :------ | -| isSelected | boolean | false | - -
- ---- - -### DataTableSkeleton - -
Usage - -**Component Group:** DataTableSkeleton - -**Import Path** - -```js -import { DataTableSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :-------------------- | :------ | -| columns | number | 5 | -| rows | number | 5 | -| compact | boolean | false | -| zebra | boolean | false | -| headers | string[] | [] | - -
- ---- - -### DatePickerSkeleton - -
Usage - -**Component Group:** DatePicker - -**Import Path** - -```js -import { DatePickerSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| range | boolean | false | -| id | string | - | - -
- ---- - -### DatePicker - -
Usage - -**Component Group:** DatePicker - -**Import Path** - -```js -import { DatePicker } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------- | :--------------------------------------------------- | :------------ | -| datePickerType | "simple" | "single" | "range" | "simple" | -| value | string | "" | -| appendTo | HTMLElement | document.body | -| dateFormat | string | "m/d/Y" | -| maxDate | null | string | Date | null | -| minDate | null | string | Date | null | -| locale | string | "en" | -| short | boolean | false | -| light | boolean | false | -| id | string | - | - -
- ---- - -### DatePickerInput - -
Usage - -**Component Group:** DatePicker - -**Import Path** - -```js -import { DatePickerInput } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :---------------------------------------- | :------ | -| size | "sm" | "xl" | - | -| type | string | "text" | -| placeholder | string | "" | -| iconDescription | string | "" | -| id | string | - | -| invalid | boolean | false | -| invalidText | string | "" | -| ref | null | HTMLInputElement | null | - -
- ---- - -### DropdownSkeleton - -
Usage - -**Component Group:** Dropdown - -**Import Path** - -```js -import { DropdownSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| inline | boolean | false | - -
- ---- - -### Dropdown - -
Usage - -**Component Group:** Dropdown - -**Import Path** - -```js -import { Dropdown } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :------------------------------------------ | :--------------------------------------- | -| items | DropdownItem[] | [] | -| itemToString | (item: DropdownItem) => string | (item: DropdownItem) => DropdownItemText | DropdownItemId | -| selectedIndex | number | -1 | -| type | "default" | "inline" | "default" | -| size | "sm" | "lg" | "xl" | - | -| open | boolean | false | -| inline | boolean | false | -| light | boolean | false | -| disabled | boolean | false | -| titleText | string | "" | -| invalid | boolean | false | -| invalidText | string | "" | -| helperText | string | "" | -| label | string | - | -| translateWithId | (id: any) => string | - | -| id | string | - | -| name | string | - | -| ref | null | HTMLButtonElement | null | - -
- ---- - -### FileUploaderSkeleton - -
Usage - -**Component Group:** FileUploader - -**Import Path** - -```js -import { FileUploaderSkeleton } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### FileUploader - -
Usage - -**Component Group:** FileUploader - -**Import Path** - -```js -import { FileUploader } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :--------------- | :----------------------------------------------------------------------------------------- | :---------- | -| status | "uploading" | "edit" | "complete" | "uploading" | -| accept | string[] | [] | -| files | string[] | [] | -| multiple | boolean | false | -| clearFiles | () => any | () => void | -| labelDescription | string | "" | -| labelTitle | string | "" | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | -| buttonLabel | string | "" | -| iconDescription | string | "" | -| name | string | - | - -
- ---- - -### FileUploaderButton - -
Usage - -**Component Group:** FileUploader - -**Import Path** - -```js -import { FileUploaderButton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------------ | :----------------------------------------------------------------------------------------- | :--------- | -| accept | string[] | [] | -| multiple | boolean | false | -| disabled | boolean | false | -| disableLabelChanges | boolean | false | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | -| labelText | string | "Add file" | -| role | string | "button" | -| tabindex | string | "0" | -| id | string | - | -| name | string | - | -| ref | null | HTMLInputElement | null | - -
- ---- - -### FileUploaderDropContainer - -
Usage - -**Component Group:** FileUploader - -**Import Path** - -```js -import { FileUploaderDropContainer } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------ | :---------------------------------------- | :---------------------- | -| accept | string[] | [] | -| multiple | boolean | false | -| validateFiles | (files: Files) => Files | (files: Files) => Files | -| labelText | string | "Add file" | -| role | string | "button" | -| disabled | boolean | false | -| tabindex | string | "0" | -| id | string | - | -| name | string | "" | -| ref | null | HTMLInputElement | null | - -
- ---- - -### FileUploaderItem - -
Usage - -**Component Group:** FileUploader - -**Import Path** - -```js -import { FileUploaderItem } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :------------------------------------------------------- | :---------- | -| status | "uploading" | "edit" | "complete" | "uploading" | -| iconDescription | string | "" | -| invalid | boolean | false | -| errorSubject | string | "" | -| errorBody | string | "" | -| id | string | - | -| name | string | "" | - -
- ---- - -### Filename - -
Usage - -**Component Group:** FileUploader - -**Import Path** - -```js -import { Filename } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :------------------------------------------------------- | :---------- | -| status | "uploading" | "edit" | "complete" | "uploading" | -| iconDescription | string | "" | -| invalid | boolean | false | - -
- ---- - -### Form - -
Usage - -**Component Group:** Form - -**Import Path** - -```js -import { Form } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### FormGroup - -
Usage - -**Component Group:** FormGroup - -**Import Path** - -```js -import { FormGroup } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| invalid | boolean | false | - -
- ---- - -### FormItem - -
Usage - -**Component Group:** FormItem - -**Import Path** - -```js -import { FormItem } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### FormLabel - -
Usage - -**Component Group:** FormLabel - -**Import Path** - -```js -import { FormLabel } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------ | :------ | -| id | string | - | - -
- ---- - -### Column - -
Usage - -**Component Group:** Grid - -**Import Path** - -```js -import { Column } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------ | :------------------------------------------------------------------------------------------------- | :------ | -| as | boolean | false | -| noGutter | boolean | false | -| noGutterLeft | boolean | false | -| noGutterRight | boolean | false | -| aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | - | -| sm | ColumnBreakpoint | - | -| md | ColumnBreakpoint | - | -| lg | ColumnBreakpoint | - | -| xlg | ColumnBreakpoint | - | -| max | ColumnBreakpoint | - | - -
- ---- - -### Grid - -
Usage - -**Component Group:** Grid - -**Import Path** - -```js -import { Grid } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------ | :------------------- | :------ | -| as | boolean | false | -| condensed | boolean | false | -| narrow | boolean | false | -| fullWidth | boolean | false | -| noGutter | boolean | false | -| noGutterLeft | boolean | false | -| noGutterRight | boolean | false | - -
- ---- - -### Row - -
Usage - -**Component Group:** Grid - -**Import Path** - -```js -import { Row } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------ | :------------------- | :------ | -| as | boolean | false | -| condensed | boolean | false | -| narrow | boolean | false | -| noGutter | boolean | false | -| noGutterLeft | boolean | false | -| noGutterRight | boolean | false | - -
- ---- - -### IconSkeleton - -
Usage - -**Component Group:** Icon - -**Import Path** - -```js -import { IconSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------ | :------ | -| size | number | 16 | - -
- ---- - -### Icon - -
Usage - -**Component Group:** Icon - -**Import Path** - -```js -import { Icon } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------------------------------------------------------ | :------ | -| render | typeof import("carbon-icons-svelte/lib/Add16").default | - | -| skeleton | boolean | false | - -
- ---- - -### InlineLoading - -
Usage - -**Component Group:** InlineLoading - -**Import Path** - -```js -import { InlineLoading } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :----------------------------------------------------------------------- | :---------------- | -| status | "active" | "inactive" | "finished" | "error" | "active" | -| description | string | - | -| iconDescription | string | "Expand/Collapse" | -| successDelay | number | 1500 | - -
- ---- - -### Link - -
Usage - -**Component Group:** Link - -**Import Path** - -```js -import { Link } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :--------------------------------------------------------------------- | :------ | -| inline | boolean | false | -| disabled | boolean | false | -| ref | null | HTMLAnchorElement | HTMLParagraphElement | null | - -
- ---- - -### ListBox - -
Usage - -**Component Group:** ListBox - -**Import Path** - -```js -import { ListBox } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :---------- | :------------------------------------- | :-------- | -| size | "sm" | "xl" | - | -| type | "default" | "inline" | "default" | -| open | boolean | false | -| light | boolean | false | -| disable | boolean | false | -| invalid | boolean | false | -| invalidText | string | "" | - -
- ---- - -### ListBoxField - -
Usage - -**Component Group:** ListBox - -**Import Path** - -```js -import { ListBoxField } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :----------------------------------------------------- | :------------- | -| disabled | boolean | false | -| role | string | "combobox" | -| tabindex | string | "-1" | -| translateWithId | (id: ListBoxFieldTranslationId) => string | (id) => string | -| id | string | - | -| ref | null | HTMLElement | null | - -
- ---- - -### ListBoxMenu - -
Usage - -**Component Group:** ListBox - -**Import Path** - -```js -import { ListBoxMenu } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------ | :------ | -| id | string | - | - -
- ---- - -### ListBoxMenuIcon - -
Usage - -**Component Group:** ListBox - -**Import Path** - -```js -import { ListBoxMenuIcon } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :-------------------------------------------------------- | :------------- | -| open | boolean | false | -| translateWithId | (id: ListBoxMenuIconTranslationId) => string | (id) => string | - -
- ---- - -### ListBoxMenuItem - -
Usage - -**Component Group:** ListBox - -**Import Path** - -```js -import { ListBoxMenuItem } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :---------- | :------------------- | :------ | -| active | boolean | false | -| highlighted | boolean | false | - -
- ---- - -### ListBoxSelection - -
Usage - -**Component Group:** ListBox - -**Import Path** - -```js -import { ListBoxSelection } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :--------------------------------------------------------- | :------------- | -| selectionCount | any | - | -| disabled | boolean | false | -| translateWithId | (id: ListBoxSelectionTranslationId) => string | (id) => string | -| ref | null | HTMLElement | null | - -
- ---- - -### ListItem - -
Usage - -**Component Group:** ListItem - -**Import Path** - -```js -import { ListItem } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### Loading - -
Usage - -**Component Group:** Loading - -**Import Path** - -```js -import { Loading } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :---------- | :------------------- | :------------------------- | -| small | boolean | false | -| active | boolean | true | -| withOverlay | boolean | false | -| description | string | "Active loading indicator" | -| id | string | - | - -
- ---- - -### Modal - -
Usage - -**Component Group:** Modal - -**Import Path** - -```js -import { Modal } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------------- | :---------------------------------------- | :--------------------------- | -| size | "xs" | "sm" | "lg" | - | -| open | boolean | false | -| danger | boolean | false | -| passiveModal | boolean | false | -| modalHeading | string | - | -| modalLabel | string | - | -| modalAriaLabel | string | - | -| iconDescription | string | "Close the modal" | -| hasForm | boolean | false | -| hasScrollingContent | boolean | false | -| primaryButtonText | string | "" | -| primaryButtonDisabled | boolean | false | -| shouldSubmitOnEnter | boolean | true | -| secondaryButtonText | string | "" | -| selectorPrimaryFocus | string | "[data-modal-primary-focus]" | -| id | string | - | -| ref | null | HTMLElement | null | - -
- ---- - -### MultiSelect - -
Usage - -**Component Group:** MultiSelect - -**Import Path** - -```js -import { MultiSelect } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :---------------- | :----------------------------------------------------------------------- | :---------------------------------------------------------- | -| items | MultiSelectItem[] | [] | -| itemToString | (item: MultiSelectItem) => string | (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId | -| selectedIds | MultiSelectItemId[] | [] | -| value | string | "" | -| size | "sm" | "lg" | "xl" | - | -| type | "default" | "inline" | "default" | -| selectionFeedback | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | -| disabled | boolean | false | -| filterable | boolean | false | -| filterItem | (item: MultiSelectItem, value: string) => string | (item: MultiSelectItem, value: string) => string | -| open | boolean | false | -| light | boolean | false | -| locale | string | "en" | -| placeholder | string | "" | -| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | -| translateWithId | (id: any) => string | - | -| titleText | string | "" | -| useTitleInItem | boolean | false | -| invalid | boolean | false | -| invalidText | string | "" | -| helperText | string | "" | -| label | string | - | -| id | string | - | -| name | string | - | - -
- ---- - -### InlineNotification - -
Usage - -**Component Group:** Notification - -**Import Path** - -```js -import { InlineNotification } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | -| notificationType | "toast" | "inline" | "toast" | -| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | -| lowContrast | boolean | false | -| role | string | "alert" | -| title | string | "Title" | -| subtitle | string | "" | -| hideCloseButton | boolean | false | -| iconDescription | string | "Closes notification" | - -
- ---- - -### NotificationActionButton - -
Usage - -**Component Group:** Notification - -**Import Path** - -```js -import { NotificationActionButton } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### NotificationButton - -
Usage - -**Component Group:** Notification - -**Import Path** - -```js -import { NotificationButton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :--------------- | :------------------------------------------------------------------ | :----------- | -| notificationType | "toast" | "inline" | "toast" | -| renderIcon | typeof import("carbon-icons-svelte/lib/Add16").default | - | -| iconDescription | string | "Close icon" | - -
- ---- - -### NotificationIcon - -
Usage - -**Component Group:** Notification - -**Import Path** - -```js -import { NotificationIcon } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | -| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | -| notificationType | "toast" | "inline" | "toast" | -| iconDescription | string | "Closes notification" | - -
- ---- - -### NotificationTextDetails - -
Usage - -**Component Group:** Notification - -**Import Path** - -```js -import { NotificationTextDetails } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :--------------- | :----------------------------------- | :-------- | -| notificationType | "toast" | "inline" | "toast" | -| title | string | "Title" | -| subtitle | string | "" | -| caption | string | "Caption" | - -
- ---- - -### ToastNotification - -
Usage - -**Component Group:** Notification - -**Import Path** - -```js -import { ToastNotification } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | -| notificationType | "toast" | "inline" | "toast" | -| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | -| lowContrast | boolean | false | -| timeout | number | 0 | -| role | string | "alert" | -| title | string | "Title" | -| subtitle | string | "" | -| caption | string | "Caption" | -| iconDescription | string | "Closes notification" | -| hideCloseButton | boolean | false | - -
- ---- - -### NumberInputSkeleton - -
Usage - -**Component Group:** NumberInput - -**Import Path** - -```js -import { NumberInputSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| hideLabel | boolean | false | - -
- ---- - -### NumberInput - -
Usage - -**Component Group:** NumberInput - -**Import Path** - -```js -import { NumberInput } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :---------------------------------------------------- | :--------------------------------------- | -| size | "sm" | "xl" | - | -| value | string | "" | -| step | number | 1 | -| max | number | - | -| min | number | - | -| light | boolean | false | -| readonly | boolean | false | -| mobile | boolean | false | -| allowEmpty | boolean | false | -| disabled | boolean | false | -| iconDescription | string | "" | -| invalid | boolean | false | -| invalidText | string | "Provide invalidText" | -| helperText | string | "" | -| label | string | "" | -| hideLabel | boolean | false | -| translateWithId | (id: NumberInputTranslationId) => string | (id: NumberInputTranslationId) => string | -| id | string | - | -| name | string | - | -| ref | null | HTMLInputElement | null | - -
- ---- - -### OrderedList - -
Usage - -**Component Group:** OrderedList - -**Import Path** - -```js -import { OrderedList } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| nested | boolean | false | - -
- ---- - -### OverflowMenu - -
Usage - -**Component Group:** OverflowMenu - -**Import Path** - -```js -import { OverflowMenu } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :--------------- | :------------------------------------------------------------------ | :------------------------------- | -| direction | "top" | "bottom" | "bottom" | -| open | boolean | false | -| light | boolean | false | -| flipped | boolean | false | -| menuOptionsClass | string | - | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | - | -| iconClass | string | - | -| iconDescription | string | "Open and close list of options" | -| id | string | - | - -
- ---- - -### OverflowMenuItem - -
Usage - -**Component Group:** OverflowMenu - -**Import Path** - -```js -import { OverflowMenuItem } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :----------- | :------------------------------------------------------------------ | :------------- | -| text | string | "Provide text" | -| href | string | "" | -| primaryFocus | boolean | false | -| disabled | boolean | false | -| hasDivider | boolean | false | -| danger | boolean | false | -| requireTitle | boolean | false | -| id | string | - | -| ref | null | HTMLAnchorElement | HTMLButtonElement | null | - -
- ---- - -### PaginationSkeleton - -
Usage - -**Component Group:** Pagination - -**Import Path** - -```js -import { PaginationSkeleton } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### Pagination - -
Usage - -**Component Group:** Pagination - -**Import Path** - -```js -import { Pagination } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :---------------- | :--------------------------------------------------------------- | :-------------------------------------------------- | -| page | number | 1 | -| total | number | 0 | -| disabled | boolean | false | -| forwardText | string | "Next page" | -| backwardText | string | "Previous page" | -| itemsPerPageText | string | "Items per page:" | -| itemText | (min: number, max: number) => string | (min: number, max: number) => string | -| itemRangeText | (min: number, max: number, total: number) => string | (min: number, max: number, total: number) => string | -| pageInputDisabled | boolean | false | -| pageSize | number | 10 | -| pageSizes | number[] | [10] | -| pagesUnknown | boolean | false | -| pageText | (page: number) => string | (current: number) => string | -| pageRangeText | (current: number, total: number) => string | (current: number, total: number) => string | -| id | string | - | - -
- ---- - -### PaginationItem - -
Usage - -**Component Group:** PaginationNav - -**Import Path** - -```js -import { PaginationItem } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| page | number | 0 | -| active | boolean | false | - -
- ---- - -### PaginationNav - -
Usage - -**Component Group:** PaginationNav - -**Import Path** - -```js -import { PaginationNav } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :----------- | :------------------- | :---------- | -| page | number | 0 | -| total | number | 10 | -| shown | number | 10 | -| loop | boolean | false | -| forwardText | string | "Next page" | -| backwardText | string | "Next page" | - -
- ---- - -### PaginationOverflow - -
Usage - -**Component Group:** PaginationNav - -**Import Path** - -```js -import { PaginationOverflow } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------ | :------ | -| fromIndex | number | 0 | -| count | number | 0 | - -
- ---- - -### ProgressIndicatorSkeleton - -
Usage - -**Component Group:** ProgressIndicator - -**Import Path** - -```js -import { ProgressIndicatorSkeleton } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### ProgressIndicator - -
Usage - -**Component Group:** ProgressIndicator - -**Import Path** - -```js -import { ProgressIndicator } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :----------- | :------------------ | :------ | -| currentIndex | number | 0 | - -
- ---- - -### ProgressStep - -
Usage - -**Component Group:** ProgressIndicator - -**Import Path** - -```js -import { ProgressStep } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------- | :------------------- | :------ | -| complete | boolean | false | -| current | boolean | false | -| disabled | boolean | false | -| invalid | boolean | false | -| descripton | string | "" | -| label | string | "" | -| secondaryLabel | string | "" | -| id | string | - | - -
- ---- - -### RadioButtonSkeleton - -
Usage - -**Component Group:** RadioButton - -**Import Path** - -```js -import { RadioButtonSkeleton } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### RadioButton - -
Usage - -**Component Group:** RadioButton - -**Import Path** - -```js -import { RadioButton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------ | :---------------------------------------- | :------ | -| value | string | "" | -| checked | boolean | false | -| disabled | boolean | false | -| labelPosition | "right" | "left" | "right" | -| labelText | string | "" | -| hideLabel | boolean | false | -| id | string | - | -| name | string | "" | -| ref | null | HTMLInputElement | null | - -
- ---- - -### RadioButtonGroup - -
Usage - -**Component Group:** RadioButtonGroup - -**Import Path** - -```js -import { RadioButtonGroup } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------ | :------------------------------------------ | :----------- | -| selected | string | - | -| disabled | boolean | false | -| labelPosition | "right" | "left" | "right" | -| orientation | "horizontal" | "vertical" | "horizontal" | - -
- ---- - -### SearchSkeleton - -
Usage - -**Component Group:** Search - -**Import Path** - -```js -import { SearchSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| small | boolean | false | - -
- ---- - -### Search - -
Usage - -**Component Group:** Search - -**Import Path** - -```js -import { Search } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------------- | :---------------------------------------- | :------------------- | -| small | boolean | false | -| size | "sm" | "lg" | - | -| skeleton | boolean | false | -| light | boolean | false | -| value | string | "text" | -| type | string | "text" | -| placeholder | string | "Search..." | -| autocomplete | "on" | "off" | "off" | -| autofocus | boolean | false | -| closeButtonLabelText | string | "Clear search input" | -| labelText | string | "" | -| id | string | - | -| ref | null | HTMLInputElement | null | - -
- ---- - -### SelectSkeleton - -
Usage - -**Component Group:** Select - -**Import Path** - -```js -import { SelectSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| hideLabel | boolean | false | - -
- ---- - -### Select - -
Usage - -**Component Group:** Select - -**Import Path** - -```js -import { Select } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :---------- | :----------------------------------------- | :------ | -| selected | string | - | -| size | "sm" | "xl" | - | -| inline | boolean | false | -| light | boolean | false | -| disabled | boolean | false | -| id | string | - | -| name | string | - | -| invalid | boolean | false | -| invalidText | string | "" | -| helperText | string | "" | -| noLabel | boolean | false | -| labelText | string | "" | -| hideLabel | boolean | false | -| ref | null | HTMLSelectElement | null | - -
- ---- - -### SelectItem - -
Usage - -**Component Group:** Select - -**Import Path** - -```js -import { SelectItem } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### SelectItemGroup - -
Usage - -**Component Group:** Select - -**Import Path** - -```js -import { SelectItemGroup } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :-------------- | -| disabled | boolean | false | -| label | string | "Provide label" | - -
- ---- - -### SkeletonPlaceholder - -
Usage - -**Component Group:** SkeletonPlaceholder - -**Import Path** - -```js -import { SkeletonPlaceholder } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### SkeletonText - -
Usage - -**Component Group:** SkeletonText - -**Import Path** - -```js -import { SkeletonText } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| lines | number | 3 | -| heading | boolean | false | -| paragraph | boolean | false | -| width | string | "100%" | - -
- ---- - -### SliderSkeleton - -
Usage - -**Component Group:** Slider - -**Import Path** - -```js -import { SliderSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| hideLabel | boolean | false | - -
- ---- - -### Slider - -
Usage - -**Component Group:** Slider - -**Import Path** - -```js -import { Slider } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :----------------------------------- | :------ | -| id | string | - | -| invalid | boolean | false | -| labelText | string | "" | -| light | boolean | false | -| name | string | "" | -| ref | null | HTMLElement | null | - -
- ---- - -### StructuredListSkeleton - -
Usage - -**Component Group:** StructuredList - -**Import Path** - -```js -import { StructuredListSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| rows | number | 5 | -| border | boolean | false | - -
- ---- - -### StructuredList - -
Usage - -**Component Group:** StructuredList - -**Import Path** - -```js -import { StructuredList } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| selected | string | - | -| border | boolean | false | -| selection | boolean | false | - -
- ---- - -### StructuredListBody - -
Usage - -**Component Group:** StructuredList - -**Import Path** - -```js -import { StructuredListBody } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### StructuredListCell - -
Usage - -**Component Group:** StructuredList - -**Import Path** - -```js -import { StructuredListCell } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| head | boolean | false | -| noWrap | boolean | false | - -
- ---- - -### StructuredListHead - -
Usage - -**Component Group:** StructuredList - -**Import Path** - -```js -import { StructuredListHead } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### StructuredListInput - -
Usage - -**Component Group:** StructuredList - -**Import Path** - -```js -import { StructuredListInput } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :---------------------------------------- | :------ | -| checked | boolean | false | -| title | string | "title" | -| value | string | "value" | -| id | string | - | -| name | string | "" | -| ref | null | HTMLInputElement | null | - -
- ---- - -### StructuredListRow - -
Usage - -**Component Group:** StructuredList - -**Import Path** - -```js -import { StructuredListRow } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| head | boolean | false | -| label | boolean | false | -| tabindex | string | "0" | - -
- ---- - -### Tab - -
Usage - -**Component Group:** Tabs - -**Import Path** - -```js -import { Tab } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :----------------------------------------- | :------ | -| label | string | "" | -| href | string | "#" | -| disabled | boolean | false | -| tabindex | string | "0" | -| id | string | - | -| ref | null | HTMLAnchorElement | null | - -
- ---- - -### TabContent - -
Usage - -**Component Group:** Tabs - -**Import Path** - -```js -import { TabContent } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------ | :------ | -| id | string | - | - -
- ---- - -### Tabs - -
Usage - -**Component Group:** Tabs - -**Import Path** - -```js -import { Tabs } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :---------------------------------------- | :---------------- | -| selected | number | 0 | -| type | "default" | "container" | "default" | -| iconDescription | string | "Expand/Collapse" | -| triggerHref | string | "#" | - -
- ---- - -### TabsSkeleton - -
Usage - -**Component Group:** Tabs - -**Import Path** - -```js -import { TabsSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------ | :------ | -| count | number | 4 | - -
- ---- - -### TagSkeleton - -
Usage - -**Component Group:** Tag - -**Import Path** - -```js -import { TagSkeleton } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### Tag - -
Usage - -**Component Group:** Tag - -**Import Path** - -```js -import { Tag } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | -| type | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | - | -| filter | boolean | false | -| disabled | boolean | false | -| skeleton | boolean | false | -| title | string | "Clear filter" | -| id | string | - | - -
- ---- - -### TextAreaSkeleton - -
Usage - -**Component Group:** TextArea - -**Import Path** - -```js -import { TextAreaSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| hideLabel | boolean | false | - -
- ---- - -### TextArea - -
Usage - -**Component Group:** TextArea - -**Import Path** - -```js -import { TextArea } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :---------- | :------------------------------------------- | :------ | -| value | string | "" | -| placeholder | string | "" | -| cols | number | 50 | -| rows | number | 4 | -| light | boolean | false | -| disabled | boolean | false | -| helperText | string | "" | -| labelText | string | "" | -| hideLabel | boolean | false | -| invalid | boolean | false | -| invalidText | string | "" | -| id | string | - | -| name | string | - | -| ref | null | HTMLTextAreaElement | null | - -
- ---- - -### PasswordInput - -
Usage - -**Component Group:** TextInput - -**Import Path** - -```js -import { PasswordInput } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :---------------- | :-------------------------------------------------------------- | :-------------- | -| size | "sm" | "xl" | - | -| value | string | "" | -| type | string | "password" | -| placeholder | string | "" | -| hidePasswordLabel | string | "Hide password" | -| showPasswordLabel | string | "Show password" | -| tooltipAlignment | "start" | "center" | "end" | "center" | -| tooltipPosition | "top" | "right" | "bottom" | "left" | "bottom" | -| light | boolean | false | -| disabled | boolean | false | -| helperText | string | "" | -| labelText | string | "" | -| hideLabel | boolean | false | -| invalid | boolean | false | -| invalidText | string | "" | -| id | string | - | -| name | string | - | -| ref | null | HTMLInputElement | null | - -
- ---- - -### TextInputSkeleton - -
Usage - -**Component Group:** TextInput - -**Import Path** - -```js -import { TextInputSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| hideLabel | boolean | false | - -
- ---- - -### TextInput - -
Usage - -**Component Group:** TextInput - -**Import Path** - -```js -import { TextInput } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :---------- | :---------------------------------------- | :------ | -| size | "sm" | "xl" | - | -| value | string | "" | -| type | string | "" | -| placeholder | string | "" | -| light | boolean | false | -| disabled | boolean | false | -| helperText | string | "" | -| id | string | - | -| name | string | - | -| labelText | string | "" | -| hideLabel | boolean | false | -| invalid | boolean | false | -| invalidText | string | "" | -| ref | null | HTMLInputElement | null | - -
- ---- - -### ClickableTile - -
Usage - -**Component Group:** Tile - -**Import Path** - -```js -import { ClickableTile } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| clicked | boolean | false | -| light | boolean | false | - -
- ---- - -### ExpandableTile - -
Usage - -**Component Group:** Tile - -**Import Path** - -```js -import { ExpandableTile } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------------- | :----------------------------------- | :-------------------------- | -| expanded | boolean | false | -| light | boolean | false | -| tileMaxHeight | number | 0 | -| tilePadding | number | 0 | -| tileCollapsedIconText | string | "Interact to expand Tile" | -| tileExpandedIconText | string | "Interact to collapse Tile" | -| tabindex | string | "0" | -| id | string | - | -| ref | null | HTMLElement | null | - -
- ---- - -### RadioTile - -
Usage - -**Component Group:** Tile - -**Import Path** - -```js -import { RadioTile } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :------------------- | :--------------- | -| checked | boolean | false | -| light | boolean | false | -| value | string | "" | -| tabindex | string | "0" | -| iconDescription | string | "Tile checkmark" | -| id | string | - | -| name | string | "" | - -
- ---- - -### SelectableTile - -
Usage - -**Component Group:** Tile - -**Import Path** - -```js -import { SelectableTile } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :---------------------------------------- | :--------------- | -| selected | boolean | false | -| light | boolean | false | -| title | string | "title" | -| value | string | "value" | -| tabindex | string | "0" | -| iconDescription | string | "Tile checkmark" | -| id | string | - | -| name | string | "" | -| ref | null | HTMLInputElement | null | - -
- ---- - -### Tile - -
Usage - -**Component Group:** Tile - -**Import Path** - -```js -import { Tile } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| light | boolean | false | - -
- ---- - -### TileGroup - -
Usage - -**Component Group:** Tile - -**Import Path** - -```js -import { TileGroup } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| selected | string | - | -| disabled | boolean | false | -| legend | string | - | - -
- ---- - -### TimePicker - -
Usage - -**Component Group:** TimePicker - -**Import Path** - -```js -import { TimePicker } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :---------- | :---------------------------------------- | :--------------------- | -| value | string | "" | -| type | string | "text" | -| placeholder | string | "hh=mm" | -| pattern | string | "(1[012] | [1-9]):[0-5][0-9](\\s)?" | -| maxLength | number | 5 | -| light | boolean | false | -| disabled | boolean | false | -| labelText | string | "" | -| hideLabel | boolean | false | -| invalid | boolean | false | -| invalidText | string | "Invalid time format." | -| id | string | - | -| name | string | - | -| ref | null | HTMLInputElement | null | - -
- ---- - -### TimePickerSelect - -
Usage - -**Component Group:** TimePicker - -**Import Path** - -```js -import { TimePickerSelect } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :----------------------------------------- | :---------------- | -| value | string | "" | -| disabled | boolean | false | -| iconDescription | string | "Expand/Collapse" | -| labelText | string | "" | -| hideLabel | boolean | false | -| id | string | - | -| name | string | - | -| ref | null | HTMLSelectElement | null | - -
- ---- - -### ToggleSkeleton - -
Usage - -**Component Group:** Toggle - -**Import Path** - -```js -import { ToggleSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------ | :------ | -| labelText | string | "" | -| id | string | - | - -
- ---- - -### Toggle - -
Usage - -**Component Group:** Toggle - -**Import Path** - -```js -import { Toggle } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| toggled | boolean | false | -| disabled | boolean | false | -| labelA | string | "Off" | -| labelB | string | "On" | -| labelText | string | "" | -| id | string | - | -| name | string | - | - -
- ---- - -### ToggleSmallSkeleton - -
Usage - -**Component Group:** ToggleSmall - -**Import Path** - -```js -import { ToggleSmallSkeleton } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------ | :------ | -| labelText | string | "" | -| id | string | - | - -
- ---- - -### ToggleSmall - -
Usage - -**Component Group:** ToggleSmall - -**Import Path** - -```js -import { ToggleSmall } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| toggled | boolean | false | -| disabled | boolean | false | -| labelA | string | "Off" | -| labelB | string | "On" | -| labelText | string | "" | -| id | string | - | -| name | string | - | - -
- ---- - -### Tooltip - -
Usage - -**Component Group:** Tooltip - -**Import Path** - -```js -import { Tooltip } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :------------------------------------------------------------------ | :------------ | -| direction | "top" | "right" | "bottom" | "left" | "bottom" | -| open | boolean | false | -| hideIcon | boolean | false | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | Information16 | -| iconDescription | string | "" | -| iconName | string | "" | -| tabindex | string | "0" | -| tooltipId | string | - | -| triggerId | string | - | -| triggerText | string | "" | -| ref | null | HTMLElement | null | - -
- ---- - -### TooltipDefinition - -
Usage - -**Component Group:** TooltipDefinition - -**Import Path** - -```js -import { TooltipDefinition } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :---------- | :------------------------------------------------ | :------- | -| tooltipText | string | "" | -| align | "start" | "center" | "end" | "center" | -| direction | "top" | "bottom" | "bottom" | -| id | string | - | -| ref | null | HTMLButtonElement | null | - -
- ---- - -### TooltipIcon - -
Usage - -**Component Group:** TooltipIcon - -**Import Path** - -```js -import { TooltipIcon } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :---------- | :-------------------------------------------------------------- | :------- | -| tooltipText | string | "" | -| align | "start" | "center" | "end" | "center" | -| direction | "top" | "right" | "bottom" | "left" | "bottom" | -| id | string | - | -| ref | null | HTMLButtonElement | null | - -
- ---- - -### Content - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { Content } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------ | :------------- | -| id | string | "main-content" | - -
- ---- - -### SkipToContent - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { SkipToContent } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------ | :-------------- | -| href | string | "#main-content" | -| tabindex | string | "0" | - -
- ---- - -### UnorderedList - -
Usage - -**Component Group:** UnorderedList - -**Import Path** - -```js -import { UnorderedList } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| nested | boolean | false | - -
- ---- - -### Header - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { Header } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :--------------- | :------------------- | :------ | -| isSideNavOpen | boolean | false | -| uiShellAriaLabel | string | - | -| href | string | - | -| company | string | - | -| platformName | string | - | - -
- ---- - -### HeaderAction - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { HeaderAction } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :-------------------------------------------------------------------------------------------------- | :------ | -| isOpen | boolean | false | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - | -| text | string | - | -| ref | null | HTMLButtonElement | null | - -
- ---- - -### HeaderActionLink - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { HeaderActionLink } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :----------- | :-------------------------------------------------------------------------------------------------- | :------ | -| linkIsActive | boolean | false | -| href | string | - | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - | - -
- ---- - -### HeaderActionSearch - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { HeaderActionSearch } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :------------- | :------------------- | :------ | -| searchIsActive | boolean | false | - -
- ---- - -### HeaderNav - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { HeaderNav } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------ | :------ | -| ariaLabel | string | - | - -
- ---- - -### HeaderNavItem - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { HeaderNavItem } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------ | :------ | -| href | string | - | -| text | string | - | - -
- ---- - -### HeaderNavMenu - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { HeaderNavMenu } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------------- | :------------------- | :---------------- | -| expanded | boolean | false | -| href | string | "/" | -| text | string | - | -| iconDescription | string | "Expand/Collapse" | - -
- ---- - -### HeaderPanelDivider - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { HeaderPanelDivider } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### HeaderPanelLink - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { HeaderPanelLink } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------ | :------ | -| href | string | - | - -
- ---- - -### HeaderPanelLinks - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { HeaderPanelLinks } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### HeaderUtilities - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { HeaderUtilities } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### HamburgerMenu - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { HamburgerMenu } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| ariaLabel | string | - | -| isOpen | boolean | false | - -
- ---- - -### SideNav - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { SideNav } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :------------------- | :------ | -| ariaLabel | string | - | -| isOpen | boolean | false | - -
- ---- - -### SideNavItems - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { SideNavItems } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- - -### SideNavLink - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { SideNavLink } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :--------- | :-------------------------------------------------------------------------------------------------- | :------ | -| isSelected | boolean | false | -| href | string | - | -| text | string | - | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - | - -
- ---- - -### SideNavMenu - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { SideNavMenu } from "carbon-components-svelte"; -``` - -**API** - -| Prop name | Type | Default | -| :-------- | :-------------------------------------------------------------------------------------------------- | :------ | -| expanded | boolean | - | -| text | string | - | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - | - -
- ---- - -### SideNavMenuItem - -
Usage - -**Component Group:** UIShell - -**Import Path** - -```js -import { SideNavMenuItem } from "carbon-components-svelte"; -``` - -**API** - -No exported props. - -
- ---- +Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component documentation. ## Contributing