mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
5564 lines
211 KiB
Markdown
5564 lines
211 KiB
Markdown
# Component Index
|
|
|
|
> 154 components exported from carbon-components-svelte 0.21.0
|
|
|
|
- Accordion
|
|
- [Accordion](#accordion)
|
|
- [AccordionItem](#accordionitem)
|
|
- [AccordionSkeleton](#accordionskeleton)
|
|
- [AspectRatio](#aspectratio)
|
|
- Breadcrumb
|
|
- [Breadcrumb](#breadcrumb)
|
|
- [BreadcrumbItem](#breadcrumbitem)
|
|
- [BreadcrumbSkeleton](#breadcrumbskeleton)
|
|
- Button
|
|
- [Button](#button)
|
|
- [ButtonSet](#buttonset)
|
|
- [ButtonSkeleton](#buttonskeleton)
|
|
- Checkbox
|
|
- [Checkbox](#checkbox)
|
|
- [CheckboxSkeleton](#checkboxskeleton)
|
|
- CodeSnippet
|
|
- [CodeSnippet](#codesnippet)
|
|
- [CodeSnippetSkeleton](#codesnippetskeleton)
|
|
- [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)
|
|
- [Toolbar](#toolbar)
|
|
- [ToolbarBatchActions](#toolbarbatchactions)
|
|
- [ToolbarContent](#toolbarcontent)
|
|
- [ToolbarMenu](#toolbarmenu)
|
|
- [ToolbarMenuItem](#toolbarmenuitem)
|
|
- [ToolbarSearch](#toolbarsearch)
|
|
- [DataTableSkeleton](#datatableskeleton)
|
|
- DatePicker
|
|
- [DatePicker](#datepicker)
|
|
- [DatePickerInput](#datepickerinput)
|
|
- [DatePickerSkeleton](#datepickerskeleton)
|
|
- Dropdown
|
|
- [Dropdown](#dropdown)
|
|
- [DropdownSkeleton](#dropdownskeleton)
|
|
- FileUploader
|
|
- [FileUploader](#fileuploader)
|
|
- [FileUploaderButton](#fileuploaderbutton)
|
|
- [FileUploaderDropContainer](#fileuploaderdropcontainer)
|
|
- [FileUploaderItem](#fileuploaderitem)
|
|
- [FileUploaderSkeleton](#fileuploaderskeleton)
|
|
- [Filename](#filename)
|
|
- [FluidForm](#fluidform)
|
|
- [Form](#form)
|
|
- [FormGroup](#formgroup)
|
|
- [FormItem](#formitem)
|
|
- [FormLabel](#formlabel)
|
|
- Grid
|
|
- [Column](#column)
|
|
- [Grid](#grid)
|
|
- [Row](#row)
|
|
- Icon
|
|
- [Icon](#icon)
|
|
- [IconSkeleton](#iconskeleton)
|
|
- [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
|
|
- [NumberInput](#numberinput)
|
|
- [NumberInputSkeleton](#numberinputskeleton)
|
|
- [OrderedList](#orderedlist)
|
|
- OverflowMenu
|
|
- [OverflowMenu](#overflowmenu)
|
|
- [OverflowMenuItem](#overflowmenuitem)
|
|
- Pagination
|
|
- [Pagination](#pagination)
|
|
- [PaginationSkeleton](#paginationskeleton)
|
|
- [PaginationNav](#paginationnav)
|
|
- ProgressIndicator
|
|
- [ProgressIndicator](#progressindicator)
|
|
- [ProgressIndicatorSkeleton](#progressindicatorskeleton)
|
|
- [ProgressStep](#progressstep)
|
|
- RadioButton
|
|
- [RadioButton](#radiobutton)
|
|
- [RadioButtonSkeleton](#radiobuttonskeleton)
|
|
- [RadioButtonGroup](#radiobuttongroup)
|
|
- Search
|
|
- [Search](#search)
|
|
- [SearchSkeleton](#searchskeleton)
|
|
- Select
|
|
- [Select](#select)
|
|
- [SelectItem](#selectitem)
|
|
- [SelectItemGroup](#selectitemgroup)
|
|
- [SelectSkeleton](#selectskeleton)
|
|
- [SkeletonPlaceholder](#skeletonplaceholder)
|
|
- [SkeletonText](#skeletontext)
|
|
- Slider
|
|
- [Slider](#slider)
|
|
- [SliderSkeleton](#sliderskeleton)
|
|
- StructuredList
|
|
- [StructuredList](#structuredlist)
|
|
- [StructuredListBody](#structuredlistbody)
|
|
- [StructuredListCell](#structuredlistcell)
|
|
- [StructuredListHead](#structuredlisthead)
|
|
- [StructuredListInput](#structuredlistinput)
|
|
- [StructuredListRow](#structuredlistrow)
|
|
- [StructuredListSkeleton](#structuredlistskeleton)
|
|
- Tabs
|
|
- [Tab](#tab)
|
|
- [TabContent](#tabcontent)
|
|
- [Tabs](#tabs)
|
|
- [TabsSkeleton](#tabsskeleton)
|
|
- Tag
|
|
- [Tag](#tag)
|
|
- [TagSkeleton](#tagskeleton)
|
|
- TextArea
|
|
- [TextArea](#textarea)
|
|
- [TextAreaSkeleton](#textareaskeleton)
|
|
- TextInput
|
|
- [PasswordInput](#passwordinput)
|
|
- [TextInput](#textinput)
|
|
- [TextInputSkeleton](#textinputskeleton)
|
|
- Tile
|
|
- [ClickableTile](#clickabletile)
|
|
- [ExpandableTile](#expandabletile)
|
|
- [RadioTile](#radiotile)
|
|
- [SelectableTile](#selectabletile)
|
|
- [Tile](#tile)
|
|
- [TileGroup](#tilegroup)
|
|
- TimePicker
|
|
- [TimePicker](#timepicker)
|
|
- [TimePickerSelect](#timepickerselect)
|
|
- Toggle
|
|
- [Toggle](#toggle)
|
|
- [ToggleSkeleton](#toggleskeleton)
|
|
- ToggleSmall
|
|
- [ToggleSmall](#togglesmall)
|
|
- [ToggleSmallSkeleton](#togglesmallskeleton)
|
|
- [Tooltip](#tooltip)
|
|
- [TooltipDefinition](#tooltipdefinition)
|
|
- [TooltipIcon](#tooltipicon)
|
|
- UIShell
|
|
- [Content](#content)
|
|
- [Header](#header)
|
|
- [HeaderAction](#headeraction)
|
|
- [HeaderActionLink](#headeractionlink)
|
|
- [HeaderActionSearch](#headeractionsearch)
|
|
- [HeaderGlobalAction](#headerglobalaction)
|
|
- [HeaderNav](#headernav)
|
|
- [HeaderNavItem](#headernavitem)
|
|
- [HeaderNavMenu](#headernavmenu)
|
|
- [HeaderPanelDivider](#headerpaneldivider)
|
|
- [HeaderPanelLink](#headerpanellink)
|
|
- [HeaderPanelLinks](#headerpanellinks)
|
|
- [HeaderUtilities](#headerutilities)
|
|
- [SideNav](#sidenav)
|
|
- [SideNavItems](#sidenavitems)
|
|
- [SideNavLink](#sidenavlink)
|
|
- [SideNavMenu](#sidenavmenu)
|
|
- [SideNavMenuItem](#sidenavmenuitem)
|
|
- [SkipToContent](#skiptocontent)
|
|
- [UnorderedList](#unorderedlist)
|
|
|
|
---
|
|
|
|
## Accordion
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Accordion } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :-------------------------------- | :------------ | :------------------------------------------------ |
|
|
| align | <code>"start" | "end"</code> | `"end"` | Specify alignment of accordion item chevron icon. |
|
|
| size | <code>"sm" | "xl"</code> | -- | Specify the size of the accordion. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the accordion. |
|
|
| skeleton | <code>boolean</code> | `false` | Set to `true` to display the skeleton state. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## AccordionItem
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { AccordionItem } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :------------------- | :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| title | <code>string</code> | `"title"` | Specify the title of the accordion item heading. Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>). |
|
|
| open | <code>boolean</code> | `false` | Set to `true` to open the first accordion item. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the accordion item. |
|
|
| iconDescription | <code>string</code> | `"Expand/Collapse"` | Specify the ARIA label for the accordion item chevron icon. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
- **"title"**: `<div name="title" let:name>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:animationend`
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:keydown`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## AccordionSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { AccordionSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :-------------------------------- | :------------ | :------------------------------------------------ |
|
|
| count | <code>number</code> | `4` | Specify the number of accordion items to render. |
|
|
| align | <code>"start" | "end"</code> | `"end"` | Specify alignment of accordion item chevron icon. |
|
|
| size | <code>"sm" | "xl"</code> | -- | Specify the size of the accordion. |
|
|
| open | <code>boolean</code> | `true` | Set to `false` to close the first accordion item. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## AspectRatio
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { AspectRatio } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------------------------------------------------------------------------------------- | :------------ | :------------------------ |
|
|
| ratio | <code>"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"</code> | `"2x1"` | Specify the aspect ratio. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Breadcrumb
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Breadcrumb } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :------------------- | :------------ | :--------------------------------------------------- |
|
|
| noTrailingSlash | <code>boolean</code> | `false` | Set to `true` to hide the breadcrumb trailing slash. |
|
|
| skeleton | <code>boolean</code> | `false` | Set to `true` to display skeleton state. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## BreadcrumbItem
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { BreadcrumbItem } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------ | :------------------- | :------------ | :---------------------------------------------------------------- |
|
|
| href | <code>string</code> | -- | Set the `href` to use an anchor link. |
|
|
| isCurrentPage | <code>boolean</code> | `false` | Set to `true` if the breadcrumb item represents the current page. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## BreadcrumbSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { BreadcrumbSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :------------------- | :------------ | :--------------------------------------------------- |
|
|
| noTrailingSlash | <code>boolean</code> | `false` | Set to `true` to hide the breadcrumb trailing slash. |
|
|
| count | <code>number</code> | `3` | Specify the number of breadcrumb items to render. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Button
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Button } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :--------------- | :----------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| kind | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger"</code> | `"primary"` | Specify the kind of button. |
|
|
| size | <code>"default" | "field" | "small"</code> | `"default"` | Specify the size of button. |
|
|
| hasIconOnly | <code>boolean</code> | `false` | Set to `true` for the icon-only variant. |
|
|
| icon | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- | Specify the icon from `carbon-icons-svelte` to render. |
|
|
| iconDescription | <code>string</code> | -- | Specify the ARIA label for the button icon. |
|
|
| tooltipAlignment | <code>"start" | "center" | "end"</code> | -- | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`. |
|
|
| tooltipPosition | <code>"top" | "right" | "bottom" | "left"</code> | -- | Set the position of the tooltip relative to the icon. |
|
|
| as | <code>boolean</code> | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>). |
|
|
| skeleton | <code>boolean</code> | `false` | Set to `true` to display the skeleton state. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the button. |
|
|
| href | <code>string</code> | -- | Set the `href` to use an anchor link. |
|
|
| tabindex | <code>string</code> | `"0"` | Specify the tabindex. |
|
|
| type | <code>string</code> | `"button"` | Specify the `type` attribute for the button element. |
|
|
| ref | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | `null` | Obtain a reference to the HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ButtonSet
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ButtonSet } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :--------------------------------------------- |
|
|
| stacked | <code>boolean</code> | `false` | Set to `true` to stack the buttons vertically. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ButtonSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ButtonSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :--------------------------------------------------- | :------------ | :-------------------------------------- |
|
|
| href | <code>string</code> | -- | Set the `href` to use an anchor link. |
|
|
| size | <code>"default" | "field" | "small"</code> | `"default"` | Specify the size of button skeleton. |
|
|
| small | <code>boolean</code> | `false` | Set to `true` to use the small variant. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Checkbox
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Checkbox } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------ | :---------------------------------------- | :------------ | :------------------------------------------------- |
|
|
| checked | <code>boolean</code> | `false` | Specify whether the checkbox is checked. |
|
|
| indeterminate | <code>boolean</code> | `false` | Specify whether the checkbox is indeterminate. |
|
|
| skeleton | <code>boolean</code> | `false` | Set to `true` to display the skeleton state. |
|
|
| readonly | <code>boolean</code> | `false` | Set to `true` for the checkbox to be read-only. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the checkbox. |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to visually hide the label text. |
|
|
| name | <code>string</code> | `""` | Set a name for the input element. |
|
|
| title | <code>string</code> | -- | Specify the title attribute for the label element. |
|
|
| id | <code>string</code> | -- | Set an id for the input label. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:change`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:check`
|
|
|
|
---
|
|
|
|
## CheckboxSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { CheckboxSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ClickableTile
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ClickableTile } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :----------------------------------------- |
|
|
| clicked | <code>boolean</code> | `false` | Set to `true` to click the tile. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| href | <code>string</code> | -- | Set the `href`. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:keydown`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## CodeSnippet
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { CodeSnippet } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------------- | :--------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------- |
|
|
| type | <code>"single" | "inline" | "multi"</code> | `"single"` | Set the type of code snippet. |
|
|
| code | <code>string</code> | -- | Set the code snippet text. Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>). |
|
|
| expanded | <code>boolean</code> | `false` | Set to `true` to expand a multi-line code snippet (type="multi"). |
|
|
| hideCopyButton | <code>boolean</code> | `false` | Set to `true` to hide the copy button. |
|
|
| wrapText | <code>boolean</code> | `false` | Set to `true` to wrap the text. Note that `type` must be "multi". |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| skeleton | <code>boolean</code> | `false` | Set to `true` to display the skeleton state. |
|
|
| copyButtonDescription | <code>string</code> | -- | Specify the ARIA label for the copy button icon. |
|
|
| copyLabel | <code>string</code> | -- | Specify the ARIA label of the copy button. |
|
|
| feedback | <code>string</code> | `"Copied!"` | Specify the feedback text displayed when clicking the snippet. |
|
|
| feedbackTimeout | <code>number</code> | `2000` | Set the timeout duration (ms) to display feedback text. |
|
|
| showLessText | <code>string</code> | `"Show less"` | Specify the show less text. `type` must be "multi". |
|
|
| showMoreText | <code>string</code> | `"Show more"` | Specify the show more text. `type` must be "multi". |
|
|
| showMoreLess | <code>boolean</code> | `false` | Set to `true` to enable the show more/less button. |
|
|
| id | <code>string</code> | -- | Set an id for the code element. |
|
|
| ref | <code>null | HTMLPreElement</code> | `null` | Obtain a reference to the pre HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:animationend`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## CodeSnippetSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { CodeSnippetSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :--------------------------------------------------- | :------------ | :---------------------------- |
|
|
| type | <code>"single" | "inline" | "multi"</code> | `"single"` | Set the type of code snippet. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Column
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Column } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
```ts
|
|
// `Column` type definitions
|
|
|
|
type ColumnSize = boolean | number;
|
|
|
|
interface ColumnSizeDescriptor {
|
|
span?: ColumnSize;
|
|
offset: number;
|
|
}
|
|
|
|
type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
|
|
```
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------ | :------------------------------------------------------------------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| as | <code>boolean</code> | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>). |
|
|
| noGutter | <code>boolean</code> | `false` | Set to `true` to remove the gutter. |
|
|
| noGutterLeft | <code>boolean</code> | `false` | Set to `true` to remove the left gutter. |
|
|
| noGutterRight | <code>boolean</code> | `false` | Set to `true` to remove the right gutter. |
|
|
| aspectRatio | <code>"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"</code> | -- | Specify the aspect ratio of the column. |
|
|
| sm | <code>ColumnBreakpoint</code> | -- | Set the small breakpoint. |
|
|
| md | <code>ColumnBreakpoint</code> | -- | Set the medium breakpoint. |
|
|
| lg | <code>ColumnBreakpoint</code> | -- | Set the large breakpoint. |
|
|
| xlg | <code>ColumnBreakpoint</code> | -- | Set the extra large breakpoint. |
|
|
| max | <code>ColumnBreakpoint</code> | -- | Set the maximum breakpoint. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ComboBox
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ComboBox } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
```ts
|
|
// `ComboBox` type definitions
|
|
|
|
interface ComboBoxItem {
|
|
id: string;
|
|
text: string;
|
|
}
|
|
```
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :--------------- | :---------------------------------------------------------- | :------------ | :------------------------------------------------------------------------ |
|
|
| items | <code>ComboBoxItem[]</code> | `[]` | Set the combobox items. |
|
|
| itemToString | <code>(item: ComboBoxItem) => string</code> | -- | Override the display of a combobox item. |
|
|
| selectedIndex | <code>number</code> | -- | Set the selected item by value index. |
|
|
| value | <code>string</code> | `""` | Specify the selected combobox value. |
|
|
| size | <code>"sm" | "xl"</code> | -- | Set the size of the combobox. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the combobox. |
|
|
| titleText | <code>string</code> | `""` | Specify the title text of the combobox. |
|
|
| placeholder | <code>string</code> | `""` | Specify the placeholder text. |
|
|
| helperText | <code>string</code> | `""` | Specify the helper text. |
|
|
| invalidText | <code>string</code> | `""` | Specify the invalid state text. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| open | <code>boolean</code> | `false` | Set to `true` to open the combobox menu dropdown. |
|
|
| shouldFilterItem | <code>(item: ComboBoxItem, value: string) => boolean</code> | -- | Determine if an item should be filtered given the current combobox value. |
|
|
| translateWithId | <code>(id: any) => string</code> | -- | Override the default translation ids. |
|
|
| id | <code>string</code> | -- | Set an id for the list box component. |
|
|
| name | <code>string</code> | -- | Specify a name attribute for the input. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
| listRef | <code>null | HTMLDivElement</code> | `null` | Obtain a reference to the list HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:keydown`
|
|
- `on:focus`
|
|
- `on:blur`
|
|
- `on:clear`
|
|
- `on:scroll`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:select`
|
|
|
|
---
|
|
|
|
## ComposedModal
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ComposedModal } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------------------- | :---------------------------------------- | :----------------------------- | :--------------------------------------------------------------------- |
|
|
| size | <code>"xs" | "sm" | "lg"</code> | -- | Set the size of the composed modal. |
|
|
| open | <code>boolean</code> | `false` | Set to `true` to open the modal. |
|
|
| danger | <code>boolean</code> | `false` | Set to `true` to use the danger variant. |
|
|
| preventCloseOnClickOutside | <code>boolean</code> | `false` | Set to `true` to prevent the modal from closing when clicking outside. |
|
|
| containerClass | <code>string</code> | `""` | Specify a class for the inner modal. |
|
|
| selectorPrimaryFocus | <code>string</code> | `"[data-modal-primary-focus]"` | Specify a selector to be focused when opening the modal. |
|
|
| ref | <code>null | HTMLElement</code> | `null` | Obtain a reference to the top-level HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:transitionend`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:submit`
|
|
- `on:close`
|
|
- `on:open`
|
|
|
|
---
|
|
|
|
## Content
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Content } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------ | :--------------- | :----------------------------------- |
|
|
| id | <code>string</code> | `"main-content"` | Specify the id for the main element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ContentSwitcher
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ContentSwitcher } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------ | :---------------------------- | :------------ | :----------------------------------------- |
|
|
| selectedIndex | <code>number</code> | `0` | Set the selected index of the switch item. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| size | <code>"sm" | "xl"</code> | -- | Specify the size of the content switcher. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:change`
|
|
|
|
---
|
|
|
|
## Copy
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Copy } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :----------------------------------------- | :------------ | :------------------------------------------------------ |
|
|
| feedback | <code>string</code> | `"Copied!"` | Set the feedback text shown after clicking the button. |
|
|
| feedbackTimeout | <code>number</code> | `2000` | Set the timeout duration (ms) to display feedback text. |
|
|
| ref | <code>null | HTMLButtonElement</code> | `null` | Obtain a reference to the button HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:animationend`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## CopyButton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { CopyButton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :------------------ | :-------------------- | :------------------------------------------------ |
|
|
| iconDescription | <code>string</code> | `"Copy to clipboard"` | Set the title and ARIA label for the copy button. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:animationend`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## DataTable
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { DataTable } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------- |
|
|
| headers | <code>{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }[]</code> | `[]` | Specify the data table headers. |
|
|
| rows | <code>Object[]</code> | `[]` | Specify the rows the data table should render. keys defined in `headers` are used for the row ids. |
|
|
| size | <code>"compact" | "short" | "tall"</code> | -- | Set the size of the data table. |
|
|
| title | <code>string</code> | `""` | Specify the title of the data table. |
|
|
| description | <code>string</code> | `""` | Specify the description of the data table. |
|
|
| zebra | <code>boolean</code> | `false` | Set to `true` to use zebra styles. |
|
|
| sortable | <code>boolean</code> | `false` | Set to `true` for the sortable variant. |
|
|
| expandable | <code>boolean</code> | `false` | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`. |
|
|
| batchExpansion | <code>boolean</code> | `false` | Set to `true` to enable batch expansion. |
|
|
| expandedRowIds | <code>string[]</code> | `[]` | Specify the row ids to be expanded. |
|
|
| radio | <code>boolean</code> | `false` | Set to `true` for the radio selection variant. |
|
|
| selectable | <code>boolean</code> | `false` | Set to `true` for the selectable variant. Automatically set to `true` if `radio` or `batchSelection` are `true`. |
|
|
| batchSelection | <code>boolean</code> | `false` | Set to `true` to enable batch selection. |
|
|
| selectedRowIds | <code>string[]</code> | `[]` | Specify the row ids to be selected. |
|
|
| stickyHeader | <code>boolean</code> | `false` | Set to `true` to enable a sticky header. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
- **"cell-header"**: `<div name="cell-header" let:name let:header>...</div>`
|
|
- **"cell"**: `<div name="cell" let:name let:row let:cell>...</div>`
|
|
- **"expanded-row"**: `<div name="expanded-row" let:name let:row>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
- `on:click:header--expand`
|
|
- `on:click`
|
|
- `on:click:header`
|
|
- `on:click:row`
|
|
- `on:mouseenter:row`
|
|
- `on:mouseleave:row`
|
|
- `on:click:row--expand`
|
|
- `on:click:cell`
|
|
|
|
---
|
|
|
|
## DataTableSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { DataTableSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------- | :-------------------------------------------------- | :------------ | :--------------------------------------------------------------------------- |
|
|
| columns | <code>number</code> | `5` | Specify the number of columns. |
|
|
| rows | <code>number</code> | `5` | Specify the number of rows. |
|
|
| size | <code>"compact" | "short" | "tall"</code> | -- | Set the size of the data table. |
|
|
| zebra | <code>boolean</code> | `false` | Set to `true` to apply zebra styles to the datatable rows. |
|
|
| showHeader | <code>boolean</code> | `true` | Set to `false` to hide the header. |
|
|
| headers | <code>string[]</code> | `[]` | Set the column headers. If `headers` has one more items, `count` is ignored. |
|
|
| showToolbar | <code>boolean</code> | `true` | Set to `false` to hide the toolbar. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## DatePicker
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { DatePicker } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------- | :--------------------------------------------------- | :------------ | :--------------------------------------------- |
|
|
| datePickerType | <code>"simple" | "single" | "range"</code> | `"simple"` | Specify the date picker type. |
|
|
| value | <code>string</code> | `""` | Specify the date picker input value. |
|
|
| appendTo | <code>HTMLElement</code> | -- | Specify the element to append the calendar to. |
|
|
| dateFormat | <code>string</code> | `"m/d/Y"` | Specify the date format. |
|
|
| maxDate | <code>null | string | Date</code> | `null` | Specify the maximum date. |
|
|
| minDate | <code>null | string | Date</code> | `null` | Specify the minimum date. |
|
|
| locale | <code>string</code> | `"en"` | Specify the locale. |
|
|
| short | <code>boolean</code> | `false` | Set to `true` to use the short variant. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| id | <code>string</code> | -- | Set an id for the date picker element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:change`
|
|
|
|
---
|
|
|
|
## DatePickerInput
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { DatePickerInput } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :---------------------------------------- | :------------------------------- | :-------------------------------------------------- |
|
|
| size | <code>"sm" | "xl"</code> | -- | Set the size of the input. |
|
|
| type | <code>string</code> | `"text"` | Specify the input type. |
|
|
| placeholder | <code>string</code> | `""` | Specify the input placeholder text. |
|
|
| pattern | <code>string</code> | `"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"` | Specify the Regular Expression for the input value. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the input. |
|
|
| iconDescription | <code>string</code> | `""` | Specify the ARIA label for the calendar icon. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to visually hide the label text. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| invalidText | <code>string</code> | `""` | Specify the invalid state text. |
|
|
| name | <code>string</code> | -- | Set a name for the input element. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:input`
|
|
- `on:keydown`
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## DatePickerSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { DatePickerSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :----------------------------------------- |
|
|
| range | <code>boolean</code> | `false` | Set to `true` to use the range variant. |
|
|
| id | <code>string</code> | -- | Set an id to be used by the label element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Dropdown
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Dropdown } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
```ts
|
|
// `Dropdown` type definitions
|
|
|
|
type DropdownItemId = string;
|
|
|
|
type DropdownItemText = string;
|
|
|
|
interface DropdownItem {
|
|
id: DropdownItemId;
|
|
text: DropdownItemText;
|
|
}
|
|
```
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :------------------------------------------ | :------------ | :--------------------------------------------- |
|
|
| items | <code>DropdownItem[]</code> | `[]` | Set the dropdown items. |
|
|
| itemToString | <code>(item: DropdownItem) => string</code> | -- | Override the display of a dropdown item. |
|
|
| selectedIndex | <code>number</code> | -- | Specify the selected item index. |
|
|
| type | <code>"default" | "inline"</code> | `"default"` | Specify the type of dropdown. |
|
|
| size | <code>"sm" | "lg" | "xl"</code> | -- | Specify the size of the dropdown field. |
|
|
| open | <code>boolean</code> | `false` | Set to `true` to open the dropdown. |
|
|
| inline | <code>boolean</code> | `false` | Set to `true` to use the inline variant. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the dropdown. |
|
|
| titleText | <code>string</code> | `""` | Specify the title text. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| invalidText | <code>string</code> | `""` | Specify the invalid state text. |
|
|
| helperText | <code>string</code> | `""` | Specify the helper text. |
|
|
| label | <code>string</code> | -- | Specify the list box label. |
|
|
| translateWithId | <code>(id: any) => string</code> | -- | Override the default translation ids. |
|
|
| id | <code>string</code> | -- | Set an id for the list box component. |
|
|
| name | <code>string</code> | -- | Specify a name attribute for the list box. |
|
|
| ref | <code>null | HTMLButtonElement</code> | `null` | Obtain a reference to the button HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
- `on:select`
|
|
|
|
---
|
|
|
|
## DropdownSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { DropdownSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :--------------------------------------- |
|
|
| inline | <code>boolean</code> | `false` | Set to `true` to use the inline variant. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ExpandableTile
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ExpandableTile } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------------- | :----------------------------------- | :---------------------------- | :----------------------------------------------------- |
|
|
| expanded | <code>boolean</code> | `false` | Set to `true` to expand the tile. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| tileMaxHeight | <code>number</code> | `0` | Specify the max height of the tile (number of pixels). |
|
|
| tilePadding | <code>number</code> | `0` | Specify the padding of the tile (number of pixels). |
|
|
| tileCollapsedIconText | <code>string</code> | `"Interact to expand Tile"` | Specify the icon text of the collapsed tile. |
|
|
| tileExpandedIconText | <code>string</code> | `"Interact to collapse Tile"` | Specify the icon text of the expanded tile. |
|
|
| tabindex | <code>string</code> | `"0"` | Specify the tabindex. |
|
|
| id | <code>string</code> | -- | Set an id for the top-level div element. |
|
|
| ref | <code>null | HTMLElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **"above"**: `<div name="above" let:name>...</div>`
|
|
- **"below"**: `<div name="below" let:name>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:keypress`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## FileUploader
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { FileUploader } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------------------- | :----------------------------------------------------------------------------------------- | :--------------------------- | :--------------------------------------------------------------------- |
|
|
| status | <code>"uploading" | "edit" | "complete"</code> | `"uploading"` | Specify the file uploader status. |
|
|
| accept | <code>string[]</code> | `[]` | Specify the accepted file types. |
|
|
| files | <code>string[]</code> | `[]` | Obtain the uploaded file names. |
|
|
| multiple | <code>boolean</code> | `false` | Set to `true` to allow multiple files. |
|
|
| clearFiles (`constant`) | <code>() => any</code> | -- | Override the default behavior of clearing the array of uploaded files. |
|
|
| labelDescription | <code>string</code> | `""` | Specify the label description. |
|
|
| labelTitle | <code>string</code> | `""` | Specify the label title. |
|
|
| kind | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger"</code> | `"primary"` | Specify the kind of file uploader button. |
|
|
| buttonLabel | <code>string</code> | `""` | Specify the button label. |
|
|
| iconDescription | <code>string</code> | `"Provide icon description"` | Specify the ARIA label used for the status icons. |
|
|
| name | <code>string</code> | `""` | Specify a name attribute for the file button uploader input. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:change`
|
|
- `on:keydown`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:add`
|
|
- `on:remove`
|
|
|
|
---
|
|
|
|
## FileUploaderButton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { FileUploaderButton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------------ | :----------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------- |
|
|
| accept | <code>string[]</code> | `[]` | Specify the accepted file types. |
|
|
| multiple | <code>boolean</code> | `false` | Set to `true` to allow multiple files. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the input. |
|
|
| disableLabelChanges | <code>boolean</code> | `false` | Set to `true` to disable label changes. |
|
|
| kind | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger"</code> | `"primary"` | Specify the kind of file uploader button. |
|
|
| labelText | <code>string</code> | `"Add file"` | Specify the label text. |
|
|
| role | <code>string</code> | `"button"` | Specify the label role. |
|
|
| tabindex | <code>string</code> | `"0"` | Specify `tabindex` attribute. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| name | <code>string</code> | `""` | Specify a name attribute for the input. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:keydown`
|
|
- `on:change`
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## FileUploaderDropContainer
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { FileUploaderDropContainer } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
```ts
|
|
// `FileUploaderDropContainer` type definitions
|
|
|
|
type Files = string[];
|
|
```
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------ | :---------------------------------------- | :------------ | :-------------------------------------------------------------------------------------------------------- |
|
|
| accept | <code>string[]</code> | `[]` | Specify the accepted file types. |
|
|
| multiple | <code>boolean</code> | `false` | Set to `true` to allow multiple files. |
|
|
| validateFiles | <code>(files: Files) => Files</code> | -- | Override the default behavior of validating uploaded files. The default behavior does not validate files. |
|
|
| labelText | <code>string</code> | `"Add file"` | Specify the label text. |
|
|
| role | <code>string</code> | `"button"` | Specify the `role` attribute of the drop container. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the input. |
|
|
| tabindex | <code>string</code> | `"0"` | Specify `tabindex` attribute. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| name | <code>string</code> | `""` | Specify a name attribute for the input. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:dragover`
|
|
- `on:dragleave`
|
|
- `on:drop`
|
|
- `on:keydown`
|
|
- `on:change`
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:add`
|
|
|
|
---
|
|
|
|
## FileUploaderItem
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { FileUploaderItem } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :------------------------------------------------------- | :------------ | :------------------------------------------------ |
|
|
| status | <code>"uploading" | "edit" | "complete"</code> | `"uploading"` | Specify the file uploader status. |
|
|
| iconDescription | <code>string</code> | `""` | Specify the ARIA label used for the status icons. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| errorSubject | <code>string</code> | `""` | Specify the error subject text. |
|
|
| errorBody | <code>string</code> | `""` | Specify the error body text. |
|
|
| id | <code>string</code> | -- | Set an id for the top-level element. |
|
|
| name | <code>string</code> | `""` | Specify the file uploader name. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:delete`
|
|
|
|
---
|
|
|
|
## FileUploaderSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { FileUploaderSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Filename
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Filename } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :------------------------------------------------------- | :------------ | :------------------------------------------------ |
|
|
| status | <code>"uploading" | "edit" | "complete"</code> | `"uploading"` | Specify the file name status. |
|
|
| iconDescription | <code>string</code> | `""` | Specify the ARIA label used for the status icons. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:keydown`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## FluidForm
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { FluidForm } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Form
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Form } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:submit`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## FormGroup
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { FormGroup } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------- | :------------------- | :------------ | :------------------------------------------ |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| message | <code>boolean</code> | `false` | Set to `true` to render a form requirement. |
|
|
| messageText | <code>string</code> | `""` | Specify the message text. |
|
|
| legendText | <code>string</code> | `""` | Specify the legend text. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## FormItem
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { FormItem } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## FormLabel
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { FormLabel } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------ | :------------ | :----------------------------------------- |
|
|
| id | <code>string</code> | -- | Set an id to be used by the label element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Grid
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Grid } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------ | :------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| as | <code>boolean</code> | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>). |
|
|
| condensed | <code>boolean</code> | `false` | Set to `true` to use the condensed variant. |
|
|
| narrow | <code>boolean</code> | `false` | Set to `true` to use the narrow variant. |
|
|
| fullWidth | <code>boolean</code> | `false` | Set to `true` to use the fullWidth variant. |
|
|
| noGutter | <code>boolean</code> | `false` | Set to `true` to remove the gutter. |
|
|
| noGutterLeft | <code>boolean</code> | `false` | Set to `true` to remove the left gutter. |
|
|
| noGutterRight | <code>boolean</code> | `false` | Set to `true` to remove the right gutter. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Header
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Header } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------------- | :----------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------------- |
|
|
| expandedByDefault | <code>boolean</code> | `true` | Set to `false` to hide the side nav by default. |
|
|
| isSideNavOpen | <code>boolean</code> | `false` | Set to `true` to open the side nav. |
|
|
| uiShellAriaLabel | <code>string</code> | -- | Specify the ARIA label for the header. |
|
|
| href | <code>string</code> | -- | Specify the `href` attribute. |
|
|
| company | <code>string</code> | -- | Specify the company name. |
|
|
| platformName | <code>string</code> | `""` | Specify the platform name. Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>). |
|
|
| ref | <code>null | HTMLAnchorElement</code> | `null` | Obtain a reference to the HTML anchor element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
- **"skip-to-content"**: `<div name="skip-to-content" let:name>...</div>`
|
|
- **"platform"**: `<div name="platform" let:name>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## HeaderAction
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { HeaderAction } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------------------------------------------------------------------- |
|
|
| isOpen | <code>boolean</code> | `false` | Set to `true` to open the panel. |
|
|
| icon | <code>{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }</code> | -- | Specify the icon props. |
|
|
| text | <code>string</code> | -- | Specify the text. Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>). |
|
|
| ref | <code>null | HTMLButtonElement</code> | `null` | Obtain a reference to the button HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
- **"text"**: `<div name="text" let:name>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:close`
|
|
|
|
---
|
|
|
|
## HeaderActionLink
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { HeaderActionLink } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :----------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- |
|
|
| linkIsActive | <code>boolean</code> | `false` | Set to `true` to use the active state. |
|
|
| href | <code>string</code> | -- | Specify the `href` attribute. |
|
|
| icon | <code>{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }</code> | -- | Specify the icon props. |
|
|
| ref | <code>null | HTMLAnchorElement</code> | `null` | Obtain a reference to the HTML anchor element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## HeaderActionSearch
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { HeaderActionSearch } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------- | :------------------- | :------------ | :--------------------------------- |
|
|
| searchIsActive | <code>boolean</code> | `false` | Set to `true` to focus the search. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
- `on:focusInputSearch`
|
|
- `on:focusOutInputSearch`
|
|
- `on:inputSearch`
|
|
|
|
---
|
|
|
|
## HeaderGlobalAction
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { HeaderGlobalAction } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------------------------------------------------------ | :------------ | :--------------------------------------------- |
|
|
| isActive | <code>boolean</code> | `false` | Set to `true` to use the active variant. |
|
|
| icon | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- | Specify the icon to render. |
|
|
| ref | <code>null | HTMLButtonElement</code> | `null` | Obtain a reference to the HTML button element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## HeaderNav
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { HeaderNav } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------ | :------------ | :---------------------------------- |
|
|
| ariaLabel | <code>string</code> | -- | Specify the ARIA label for the nav. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## HeaderNavItem
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { HeaderNavItem } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :----------------------------------------- | :------------ | :--------------------------------------------- |
|
|
| href | <code>string</code> | -- | Specify the `href` attribute. |
|
|
| text | <code>string</code> | -- | Specify the text. |
|
|
| ref | <code>null | HTMLAnchorElement</code> | `null` | Obtain a reference to the HTML anchor element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:keyup`
|
|
- `on:keydown`
|
|
- `on:focus`
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## HeaderNavMenu
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { HeaderNavMenu } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :----------------------------------------- | :------------------ | :--------------------------------------------- |
|
|
| expanded | <code>boolean</code> | `false` | Set to `true` to toggle the expanded state. |
|
|
| href | <code>string</code> | `"/"` | Specify the `href` attribute. |
|
|
| text | <code>string</code> | -- | Specify the text. |
|
|
| ref | <code>null | HTMLAnchorElement</code> | `null` | Obtain a reference to the HTML anchor element. |
|
|
| iconDescription | <code>string</code> | `"Expand/Collapse"` | Specify the ARIA label for the chevron icon. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:keydown`
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:keyup`
|
|
- `on:focus`
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## HeaderPanelDivider
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { HeaderPanelDivider } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## HeaderPanelLink
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { HeaderPanelLink } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :----------------------------------------- | :------------ | :--------------------------------------------- |
|
|
| href | <code>string</code> | -- | Specify the `href` attribute. |
|
|
| ref | <code>null | HTMLAnchorElement</code> | `null` | Obtain a reference to the HTML anchor element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## HeaderPanelLinks
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { HeaderPanelLinks } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## HeaderUtilities
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { HeaderUtilities } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Icon
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Icon } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------------------------------------------------------ | :------------ | :------------------------------------------------------------------------------------------------------ |
|
|
| render | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- | Specify the icon from `carbon-icons-svelte` to render. Icon size must be 16px (e.g. `Add16`, `Task16`). |
|
|
| skeleton | <code>boolean</code> | `false` | Set to `true` to display the skeleton state. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## IconSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { IconSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------ | :------------ | :------------------------ |
|
|
| size | <code>number</code> | `16` | Set the size of the icon. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## InlineLoading
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { InlineLoading } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :----------------------------------------------------------------------- | :------------ | :----------------------------------------------------------------- |
|
|
| status | <code>"active" | "inactive" | "finished" | "error"</code> | `"active"` | Set the loading status. |
|
|
| description | <code>string</code> | -- | Set the loading description. |
|
|
| iconDescription | <code>string</code> | -- | Specify the ARIA label for the loading icon. |
|
|
| successDelay | <code>number</code> | `1500` | Specify the timeout delay (ms) after `status` is set to "success". |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:success`
|
|
|
|
---
|
|
|
|
## InlineNotification
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { InlineNotification } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :----------------------------------------------------------------------- |
|
|
| notificationType | <code>"toast" | "inline"</code> | `"inline"` | Set the type of notification. |
|
|
| kind | <code>"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"</code> | `"error"` | Specify the kind of notification. |
|
|
| lowContrast | <code>boolean</code> | `false` | Set to `true` to use the low contrast variant. |
|
|
| timeout | <code>number</code> | `0` | Set the timeout duration (ms) to hide the notification after opening it. |
|
|
| role | <code>string</code> | `"alert"` | Set the `role` attribute. |
|
|
| title | <code>string</code> | `"Title"` | Specify the title text. |
|
|
| subtitle | <code>string</code> | `""` | Specify the subtitle text. |
|
|
| hideCloseButton | <code>boolean</code> | `false` | Set to `true` to hide the close button. |
|
|
| iconDescription | <code>string</code> | `"Closes notification"` | Specify the ARIA label for the icon. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
- **"actions"**: `<div name="actions" let:name>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:close`
|
|
|
|
---
|
|
|
|
## Link
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Link } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :--------------------------------------------------------------------- | :------------ | :------------------------------------------------ |
|
|
| href | <code>string</code> | -- | Specify the href value. |
|
|
| inline | <code>boolean</code> | `false` | Set to `true` to use the inline variant. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the checkbox. |
|
|
| visited | <code>boolean</code> | `false` | Set to `true` to allow visited styles. |
|
|
| ref | <code>null | HTMLAnchorElement | HTMLParagraphElement</code> | `null` | Obtain a reference to the top-level HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ListBox
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ListBox } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------- | :------------------------------------- | :------------ | :------------------------------------------ |
|
|
| size | <code>"sm" | "xl"</code> | -- | Set the size of the list box. |
|
|
| type | <code>"default" | "inline"</code> | `"default"` | Set the type of the list box. |
|
|
| open | <code>boolean</code> | `false` | Set to `true` to open the list box. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the list box. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| invalidText | <code>string</code> | `""` | Specify the invalid state text. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:keydown`
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ListBoxField
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ListBoxField } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
```ts
|
|
// `ListBoxField` type definitions
|
|
|
|
type ListBoxFieldTranslationId = "close" | "open";
|
|
```
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------------------- | :----------------------------------------------------- | :--------------------------------- | :------------------------------------------------ |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the list box field. |
|
|
| role | <code>string</code> | `"combobox"` | Specify the role attribute. |
|
|
| tabindex | <code>string</code> | `"-1"` | Specify the tabindex. |
|
|
| translationIds (`constant`) | <code>{ close: "close"; open: "open"; }</code> | `{ close: "close", open: "open" }` | Default translation ids. |
|
|
| translateWithId | <code>(id: ListBoxFieldTranslationId) => string</code> | -- | Override the default translation ids. |
|
|
| id | <code>string</code> | -- | Set an id for the top-level element. |
|
|
| ref | <code>null | HTMLElement</code> | `null` | Obtain a reference to the top-level HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:keydown`
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ListBoxMenu
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ListBoxMenu } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :-------------------------------------- | :------------ | :-------------------------------------------- |
|
|
| id | <code>string</code> | -- | Set an id for the top-level element. |
|
|
| ref | <code>null | HTMLDivElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:scroll`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ListBoxMenuIcon
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ListBoxMenuIcon } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
```ts
|
|
// `ListBoxMenuIcon` type definitions
|
|
|
|
type ListBoxMenuIconTranslationId = "close" | "open";
|
|
```
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------------------- | :-------------------------------------------------------- | :--------------------------------- | :-------------------------------------------- |
|
|
| open | <code>boolean</code> | `false` | Set to `true` to open the list box menu icon. |
|
|
| translationIds (`constant`) | <code>{ close: "close"; open: "open" }</code> | `{ close: "close", open: "open" }` | Default translation ids. |
|
|
| translateWithId | <code>(id: ListBoxMenuIconTranslationId) => string</code> | -- | Override the default translation ids. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ListBoxMenuItem
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ListBoxMenuItem } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------- | :------------------- | :------------ | :--------------------------------------------- |
|
|
| active | <code>boolean</code> | `false` | Set to `true` to enable the active state. |
|
|
| highlighted | <code>boolean</code> | `false` | Set to `true` to enable the highlighted state. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ListBoxSelection
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ListBoxSelection } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
```ts
|
|
// `ListBoxSelection` type definitions
|
|
|
|
type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
|
|
```
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------------------- | :---------------------------------------------------------------------- | :------------------------------------------------------------ | :------------------------------------------------ |
|
|
| selectionCount | <code>any</code> | -- | Specify the number of selected items. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the list box selection. |
|
|
| translationIds (`constant`) | <code>{ clearAll: "clearAll"; clearSelection: "clearSelection" }</code> | `{ clearAll: "clearAll", clearSelection: "clearSelection", }` | Default translation ids. |
|
|
| translateWithId | <code>(id: ListBoxSelectionTranslationId) => string</code> | -- | Override the default translation ids. |
|
|
| ref | <code>null | HTMLElement</code> | `null` | Obtain a reference to the top-level HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
- `on:clear`
|
|
|
|
---
|
|
|
|
## ListItem
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ListItem } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Loading
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Loading } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------- | :------------------- | :--------------------------- | :------------------------------------------ |
|
|
| small | <code>boolean</code> | `false` | Set to `true` to use the small variant. |
|
|
| active | <code>boolean</code> | `true` | Set to `false` to disable the active state. |
|
|
| withOverlay | <code>boolean</code> | `true` | Set to `false` to disable the overlay. |
|
|
| description | <code>string</code> | `"Active loading indicator"` | Specify the label description. |
|
|
| id | <code>string</code> | -- | Set an id for the label element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Modal
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Modal } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------------------- | :---------------------------------------- | :----------------------------- | :-------------------------------------------------------------------------- |
|
|
| size | <code>"xs" | "sm" | "lg"</code> | -- | Set the size of the modal. |
|
|
| open | <code>boolean</code> | `false` | Set to `true` to open the modal. |
|
|
| danger | <code>boolean</code> | `false` | Set to `true` to use the danger variant. |
|
|
| alert | <code>boolean</code> | `false` | Set to `true` to enable alert mode. |
|
|
| passiveModal | <code>boolean</code> | `false` | Set to `true` to use the passive variant. |
|
|
| modalHeading | <code>string</code> | -- | Specify the modal heading. |
|
|
| modalLabel | <code>string</code> | -- | Specify the modal label. |
|
|
| modalAriaLabel | <code>string</code> | -- | Specify the ARIA label for the modal. |
|
|
| iconDescription | <code>string</code> | `"Close the modal"` | Specify the ARIA label for the close icon. |
|
|
| hasForm | <code>boolean</code> | `false` | Set to `true` if the modal contains form elements. |
|
|
| hasScrollingContent | <code>boolean</code> | `false` | Set to `true` if the modal contains scrolling content. |
|
|
| primaryButtonText | <code>string</code> | `""` | Specify the primary button text. |
|
|
| primaryButtonDisabled | <code>boolean</code> | `false` | Set to `true` to disable the primary button. |
|
|
| shouldSubmitOnEnter | <code>boolean</code> | `true` | Set to `true` for the primary button to be triggered when pressing "Enter". |
|
|
| secondaryButtonText | <code>string</code> | `""` | Specify the secondary button text. |
|
|
| selectorPrimaryFocus | <code>string</code> | `"[data-modal-primary-focus]"` | Specify a selector to be focused when opening the modal. |
|
|
| preventCloseOnClickOutside | <code>boolean</code> | `false` | Set to `true` to prevent the modal from closing when clicking outside. |
|
|
| id | <code>string</code> | -- | Set an id for the top-level element. |
|
|
| ref | <code>null | HTMLElement</code> | `null` | Obtain a reference to the top-level HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
- **"label"**: `<div name="label" let:name>...</div>`
|
|
- **"heading"**: `<div name="heading" let:name>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:keydown`
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:submit`
|
|
- `on:click:button--secondary`
|
|
- `on:close`
|
|
- `on:open`
|
|
|
|
---
|
|
|
|
## ModalBody
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ModalBody } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------------ | :------------------- | :------------ | :----------------------------------------------------- |
|
|
| hasForm | <code>boolean</code> | `false` | Set to `true` if the modal contains form elements. |
|
|
| hasScrollingContent | <code>boolean</code> | `false` | Set to `true` if the modal contains scrolling content. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ModalFooter
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ModalFooter } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------------- | :------------------- | :------------ | :------------------------------------------- |
|
|
| primaryButtonText | <code>string</code> | `""` | Specify the primary button text. |
|
|
| primaryButtonDisabled | <code>boolean</code> | `false` | Set to `true` to disable the primary button. |
|
|
| primaryClass | <code>string</code> | -- | Specify a class for the primary button. |
|
|
| secondaryButtonText | <code>string</code> | `""` | Specify the secondary button text. |
|
|
| secondaryClass | <code>string</code> | -- | Specify a class for the secondary button. |
|
|
| danger | <code>boolean</code> | `false` | Set to `true` to use the danger variant. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ModalHeader
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ModalHeader } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :------------------ | :------------ | :----------------------------------------- |
|
|
| title | <code>string</code> | `""` | Specify the modal title. |
|
|
| label | <code>string</code> | `""` | Specify the modal label. |
|
|
| labelClass | <code>string</code> | `""` | Specify the label class. |
|
|
| titleClass | <code>string</code> | `""` | Specify the title class. |
|
|
| closeClass | <code>string</code> | `""` | Specify the close class. |
|
|
| closeIconClass | <code>string</code> | `""` | Specify the close icon class. |
|
|
| iconDescription | <code>string</code> | `"Close"` | Specify the ARIA label for the close icon. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## MultiSelect
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { MultiSelect } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
```ts
|
|
// `MultiSelect` type definitions
|
|
|
|
type MultiSelectItemId = string;
|
|
|
|
type MultiSelectItemText = string;
|
|
|
|
interface MultiSelectItem {
|
|
id: MultiSelectItemId;
|
|
text: MultiSelectItemText;
|
|
}
|
|
```
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------------- | :----------------------------------------------------------------------- | :------------------- | :--------------------------------------------------------------------------------- |
|
|
| items | <code>MultiSelectItem[]</code> | `[]` | Set the multiselect items. |
|
|
| itemToString | <code>(item: MultiSelectItem) => string</code> | -- | Override the display of a multiselect item. |
|
|
| selectedIds | <code>MultiSelectItemId[]</code> | `[]` | Set the selected ids. |
|
|
| value | <code>string</code> | `""` | Specify the multiselect value. |
|
|
| size | <code>"sm" | "lg" | "xl"</code> | -- | Set the size of the combobox. |
|
|
| type | <code>"default" | "inline"</code> | `"default"` | Specify the type of multiselect. |
|
|
| selectionFeedback | <code>"top" | "fixed" | "top-after-reopen"</code> | `"top-after-reopen"` | Specify the selection feedback after selecting items. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the dropdown. |
|
|
| filterable | <code>boolean</code> | `false` | Set to `true` to filter items. |
|
|
| filterItem | <code>(item: MultiSelectItem, value: string) => string</code> | -- | Override the filtering logic. The default filtering is an exact string comparison. |
|
|
| open | <code>boolean</code> | `false` | Set to `true` to open the dropdown. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| locale | <code>string</code> | `"en"` | Specify the locale. |
|
|
| placeholder | <code>string</code> | `""` | Specify the placeholder text. |
|
|
| sortItem | <code>(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem</code> | -- | Override the sorting logic. The default sorting compare the item text value. |
|
|
| translateWithId | <code>(id: any) => string</code> | -- | Override the default translation ids. |
|
|
| titleText | <code>string</code> | `""` | Specify the title text. |
|
|
| useTitleInItem | <code>boolean</code> | `false` | Set to `true` to pass the item to `itemToString` in the checkbox. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| invalidText | <code>string</code> | `""` | Specify the invalid state text. |
|
|
| helperText | <code>string</code> | `""` | Specify the helper text. |
|
|
| label | <code>string</code> | `""` | Specify the list box label. |
|
|
| id | <code>string</code> | -- | Set an id for the list box component. |
|
|
| name | <code>string</code> | -- | Specify a name attribute for the select. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:keydown`
|
|
- `on:focus`
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## NotificationActionButton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { NotificationActionButton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## NotificationButton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { NotificationButton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :--------------- | :------------------------------------------------------------------ | :------------- | :----------------------------------------------------- |
|
|
| notificationType | <code>"toast" | "inline"</code> | `"toast"` | Set the type of notification. |
|
|
| renderIcon | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- | Specify the icon from `carbon-icons-svelte` to render. |
|
|
| title | <code>string</code> | -- | Specify the title of the icon. |
|
|
| iconDescription | <code>string</code> | `"Close icon"` | Specify the ARIA label for the icon. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## NotificationIcon
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { NotificationIcon } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :------------------------------------- |
|
|
| kind | <code>"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"</code> | `"error"` | Specify the kind of notification icon. |
|
|
| notificationType | <code>"toast" | "inline"</code> | `"toast"` | Set the type of notification. |
|
|
| iconDescription | <code>string</code> | `"Closes notification"` | Specify the ARIA label for the icon. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## NotificationTextDetails
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { NotificationTextDetails } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :--------------- | :----------------------------------- | :------------ | :---------------------------- |
|
|
| notificationType | <code>"toast" | "inline"</code> | `"toast"` | Set the type of notification. |
|
|
| title | <code>string</code> | `"Title"` | Specify the title text. |
|
|
| subtitle | <code>string</code> | `""` | Specify the subtitle text. |
|
|
| caption | <code>string</code> | `"Caption"` | Specify the caption text. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## NumberInput
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { NumberInput } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
```ts
|
|
// `NumberInput` type definitions
|
|
|
|
type NumberInputTranslationId = "increment" | "decrement";
|
|
```
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------------------- | :-------------------------------------------------------------- | :---------------------------------------------------- | :---------------------------------------------- |
|
|
| size | <code>"sm" | "xl"</code> | -- | Set the size of the input. |
|
|
| value | <code>string</code> | `""` | Specify the input value. |
|
|
| step | <code>number</code> | `1` | Specify the step increment. |
|
|
| max | <code>number</code> | -- | Specify the maximum value. |
|
|
| min | <code>number</code> | -- | Specify the minimum value. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| readonly | <code>boolean</code> | `false` | Set to `true` for the input to be read-only. |
|
|
| mobile | <code>boolean</code> | `false` | Set to `true` to enable the mobile variant. |
|
|
| allowEmpty | <code>boolean</code> | `false` | Set to `true` to allow for an empty value. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the input. |
|
|
| iconDescription | <code>string</code> | `""` | Specify the ARIA label for the increment icons. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| invalidText | <code>string</code> | `""` | Specify the invalid state text. |
|
|
| helperText | <code>string</code> | `""` | Specify the helper text. |
|
|
| label | <code>string</code> | `""` | Specify the label text. |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to visually hide the label text. |
|
|
| translateWithId | <code>(id: NumberInputTranslationId) => string</code> | -- | Override the default translation ids. |
|
|
| translationIds (`constant`) | <code>{ increment: "increment"; decrement: "decrement" }</code> | `{ increment: "increment", decrement: "decrement", }` | Default translation ids. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| name | <code>string</code> | -- | Specify a name attribute for the input. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **"label"**: `<div name="label" let:name>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:input`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:change`
|
|
|
|
---
|
|
|
|
## NumberInputSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { NumberInputSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :------------------------------------ |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to hide the label text. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## OrderedList
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { OrderedList } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :--------------------------------------- |
|
|
| nested | <code>boolean</code> | `false` | Set to `true` to use the nested variant. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## OverflowMenu
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { OverflowMenu } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :--------------- | :------------------------------------------------------------------ | :--------------------------------- | :----------------------------------------------------------------- |
|
|
| size | <code>"sm" | "xl"</code> | -- | Specify the size of the overflow menu. |
|
|
| direction | <code>"top" | "bottom"</code> | `"bottom"` | Specify the direction of the overflow menu relative to the button. |
|
|
| open | <code>boolean</code> | `false` | Set to `true` to open the menu. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| flipped | <code>boolean</code> | `false` | Set to `true` to flip the menu relative to the button. |
|
|
| menuOptionsClass | <code>string</code> | -- | Specify the menu options class. |
|
|
| icon | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- | Specify the icon from `carbon-icons-svelte` to render. |
|
|
| iconClass | <code>string</code> | -- | Specify the icon class. |
|
|
| iconDescription | <code>string</code> | `"Open and close list of options"` | Specify the ARIA label for the icon. |
|
|
| id | <code>string</code> | -- | Set an id for the button element. |
|
|
| buttonRef | <code>null | HTMLButtonElement</code> | `null` | Obtain a reference to the trigger button element. |
|
|
| menuRef | <code>null | HTMLUListElement</code> | `null` | Obtain a reference to the overflow menu element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
- **"menu"**: `<div name="menu" let:name>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:keydown`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:close`
|
|
|
|
---
|
|
|
|
## OverflowMenuItem
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { OverflowMenuItem } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :----------- | :------------------------------------------------------------------ | :--------------- | :------------------------------------------------------------------------------- |
|
|
| text | <code>string</code> | `"Provide text"` | Specify the item text. Alternatively, use the default slot for a custom element. |
|
|
| href | <code>string</code> | `""` | Specify the `href` attribute if the item is a link. |
|
|
| primaryFocus | <code>boolean</code> | `false` | Set to `true` if the item should be focused when opening the menu. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the item. |
|
|
| hasDivider | <code>boolean</code> | `false` | Set to `true` to include a divider. |
|
|
| danger | <code>boolean</code> | `false` | Set to `true` to use the danger variant. |
|
|
| requireTitle | <code>boolean</code> | `true` | Set to `false` to omit the button `title` attribute. |
|
|
| id | <code>string</code> | -- | Set an id for the top-level element. |
|
|
| ref | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | `null` | Obtain a reference to the HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:keydown`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Pagination
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Pagination } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------------- | :--------------------------------------------------------------- | :------------------ | :------------------------------------------------ |
|
|
| page | <code>number</code> | `1` | Specify the current page index. |
|
|
| totalItems | <code>number</code> | `0` | Specify the total number of items. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the pagination. |
|
|
| forwardText | <code>string</code> | `"Next page"` | Specify the forward button text. |
|
|
| backwardText | <code>string</code> | `"Previous page"` | Specify the backward button text. |
|
|
| itemsPerPageText | <code>string</code> | `"Items per page:"` | Specify the items per page text. |
|
|
| itemText | <code>(min: number, max: number) => string</code> | -- | Override the item text. |
|
|
| itemRangeText | <code>(min: number, max: number, total: number) => string</code> | -- | Override the item range text. |
|
|
| pageInputDisabled | <code>boolean</code> | `false` | Set to `true` to disable the page input. |
|
|
| pageSizeInputDisabled | <code>boolean</code> | `false` | Set to `true` to disable the page size input. |
|
|
| pageSize | <code>number</code> | `10` | Specify the number of items to display in a page. |
|
|
| pageSizes | <code>number[]</code> | `[10]` | Specify the available page sizes. |
|
|
| pagesUnknown | <code>boolean</code> | `false` | Set to `true` if the number of pages is unknown. |
|
|
| pageText | <code>(page: number) => string</code> | -- | Override the page text. |
|
|
| pageRangeText | <code>(current: number, total: number) => string</code> | -- | Override the page range text. |
|
|
| id | <code>string</code> | -- | Set an id for the top-level element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
- `on:update`
|
|
|
|
---
|
|
|
|
## PaginationNav
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { PaginationNav } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :----------- | :------------------- | :---------------- | :----------------------------------------- |
|
|
| page | <code>number</code> | `0` | Specify the current page index. |
|
|
| total | <code>number</code> | `10` | Specify the total number of pages. |
|
|
| shown | <code>number</code> | `10` | Specify the total number of pages to show. |
|
|
| loop | <code>boolean</code> | `false` | Set to `true` to loop the navigation. |
|
|
| forwardText | <code>string</code> | `"Next page"` | Specify the forward button text. |
|
|
| backwardText | <code>string</code> | `"Previous page"` | Specify the backward button text. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
- `on:click:button--previous`
|
|
- `on:click:button--next`
|
|
- `on:change`
|
|
|
|
---
|
|
|
|
## PaginationSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { PaginationSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## PasswordInput
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { PasswordInput } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------------- | :-------------------------------------------------------------- | :---------------- | :----------------------------------------------------- |
|
|
| size | <code>"sm" | "xl"</code> | -- | Set the size of the input. |
|
|
| value | <code>string</code> | `""` | Specify the input value. |
|
|
| type | <code>string</code> | `"password"` | Specify the input type. |
|
|
| placeholder | <code>string</code> | `""` | Specify the placeholder text. |
|
|
| hidePasswordLabel | <code>string</code> | `"Hide password"` | Specify the hide password label text. |
|
|
| showPasswordLabel | <code>string</code> | `"Show password"` | Specify the show password label text. |
|
|
| tooltipAlignment | <code>"start" | "center" | "end"</code> | -- | Set the alignment of the tooltip relative to the icon. |
|
|
| tooltipPosition | <code>"top" | "right" | "bottom" | "left"</code> | -- | Set the position of the tooltip relative to the icon. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the input. |
|
|
| helperText | <code>string</code> | `""` | Specify the helper text. |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to visually hide the label text. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| invalidText | <code>string</code> | `""` | Specify the text for the invalid state. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| name | <code>string</code> | -- | Specify a name attribute for the input. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:change`
|
|
- `on:input`
|
|
- `on:keydown`
|
|
- `on:focus`
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ProgressIndicator
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ProgressIndicator } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------------- | :------------------- | :------------ | :---------------------------------------------------------------------------------------------- |
|
|
| currentIndex | <code>number</code> | `0` | Specify the current step index. |
|
|
| vertical | <code>boolean</code> | `false` | Set to `true` to use the vertical variant. |
|
|
| spaceEqually | <code>boolean</code> | `false` | Set to `true` to specify whether the progress steps should be split equally in size in the div. |
|
|
| preventChangeOnClick | <code>boolean</code> | `false` | Set to `true` to prevent updating `currentIndex`. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:change`
|
|
|
|
---
|
|
|
|
## ProgressIndicatorSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ProgressIndicatorSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :----------------------------------------- |
|
|
| vertical | <code>boolean</code> | `false` | Set to `true` to use the vertical variant. |
|
|
| count | <code>number</code> | `4` | Specify the number of steps to render. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ProgressStep
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ProgressStep } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------- | :------------------- | :------------ | :------------------------------------------ |
|
|
| complete | <code>boolean</code> | `false` | Set to `true` for the complete variant. |
|
|
| current | <code>boolean</code> | `false` | Set to `true` to use the current variant. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the progress step. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| description | <code>string</code> | `""` | Specify the step description. |
|
|
| label | <code>string</code> | `""` | Specify the step label. |
|
|
| secondaryLabel | <code>string</code> | `""` | Specify the step secondary label. |
|
|
| id | <code>string</code> | -- | Set an id for the top-level element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:keydown`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## RadioButton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { RadioButton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------ | :---------------------------------------- | :------------ | :----------------------------------------------- |
|
|
| value | <code>string</code> | `""` | Specify the value of the radio button. |
|
|
| checked | <code>boolean</code> | `false` | Set to `true` to check the radio button. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the radio button. |
|
|
| labelPosition | <code>"right" | "left"</code> | `"right"` | Specify the label position. |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to visually hide the label text. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| name | <code>string</code> | `""` | Specify a name attribute for the checkbox input. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:change`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## RadioButtonGroup
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { RadioButtonGroup } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------ | :------------------------------------------ | :------------- | :-------------------------------------------- |
|
|
| selected | <code>string</code> | -- | Set the selected radio button value. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the radio buttons. |
|
|
| labelPosition | <code>"right" | "left"</code> | `"right"` | Specify the label position. |
|
|
| orientation | <code>"horizontal" | "vertical"</code> | `"horizontal"` | Specify the orientation of the radio buttons. |
|
|
| id | <code>string</code> | -- | Set an id for the container div element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:change`
|
|
|
|
---
|
|
|
|
## RadioButtonSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { RadioButtonSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## RadioTile
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { RadioTile } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :------------------- | :----------------- | :-------------------------------------------------------- |
|
|
| checked | <code>boolean</code> | `false` | Set to `true` to check the tile. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| value | <code>string</code> | `""` | Specify the value of the radio input. |
|
|
| tabindex | <code>string</code> | `"0"` | Specify the tabindex. |
|
|
| iconDescription | <code>string</code> | `"Tile checkmark"` | Specify the ARIA label for the radio tile checkmark icon. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| name | <code>string</code> | `""` | Specify a name attribute for the input. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:change`
|
|
- `on:keydown`
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Row
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Row } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------ | :------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| as | <code>boolean</code> | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>). |
|
|
| condensed | <code>boolean</code> | `false` | Set to `true` to use the condensed variant. |
|
|
| narrow | <code>boolean</code> | `false` | Set to `true` to use the narrow variant. |
|
|
| noGutter | <code>boolean</code> | `false` | Set to `true` to remove the gutter. |
|
|
| noGutterLeft | <code>boolean</code> | `false` | Set to `true` to remove the left gutter. |
|
|
| noGutterRight | <code>boolean</code> | `false` | Set to `true` to remove the right gutter. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Search
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Search } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------------- | :---------------------------------------- | :--------------------- | :------------------------------------------------------- |
|
|
| small | <code>boolean</code> | `false` | . |
|
|
| size | <code>"sm" | "lg" | "xl"</code> | `"xl"` | Specify the size of the search input. |
|
|
| skeleton | <code>boolean</code> | `false` | Set to `true` to display the skeleton state. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the search input. |
|
|
| value | <code>string</code> | `""` | Specify the value of the search input. |
|
|
| type | <code>string</code> | `"text"` | Specify the `type` attribute of the search input. |
|
|
| placeholder | <code>string</code> | `"Search..."` | Specify the `placeholder` attribute of the search input. |
|
|
| autocomplete | <code>"on" | "off"</code> | `"off"` | Specify the `autocomplete` attribute. |
|
|
| autofocus | <code>boolean</code> | `false` | Set to `true` to auto focus the search element. |
|
|
| closeButtonLabelText | <code>string</code> | `"Clear search input"` | Specify the close button label text. |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:change`
|
|
- `on:input`
|
|
- `on:focus`
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:clear`
|
|
|
|
---
|
|
|
|
## SearchSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SearchSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :---------------------------------------- | :------------ | :------------------------------------ |
|
|
| small | <code>boolean</code> | `false` | . |
|
|
| size | <code>"sm" | "lg" | "xl"</code> | `"xl"` | Specify the size of the search input. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Select
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Select } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------- | :----------------------------------------- | :------------ | :----------------------------------------------- |
|
|
| selected | <code>string</code> | -- | Specify the selected item value. |
|
|
| size | <code>"sm" | "xl"</code> | -- | Set the size of the select input. |
|
|
| inline | <code>boolean</code> | `false` | Set to `true` to use the inline variant. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the select element. |
|
|
| id | <code>string</code> | -- | Set an id for the select element. |
|
|
| name | <code>string</code> | -- | Specify a name attribute for the select element. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| invalidText | <code>string</code> | `""` | Specify the invalid state text. |
|
|
| helperText | <code>string</code> | `""` | Specify the helper text. |
|
|
| noLabel | <code>boolean</code> | `false` | Set to `true` to not render a label. |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to visually hide the label text. |
|
|
| ref | <code>null | HTMLSelectElement</code> | `null` | Obtain a reference to the select HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:change`
|
|
|
|
---
|
|
|
|
## SelectItem
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SelectItem } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :----------------------------------- |
|
|
| value | <code>string</code> | `""` | Specify the option value. |
|
|
| text | <code>string</code> | `""` | Specify the option text. |
|
|
| hidden | <code>boolean</code> | `false` | Set to `true` to hide the option. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the option. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## SelectItemGroup
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SelectItemGroup } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :---------------- | :--------------------------------------------------- |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the optgroup element. |
|
|
| label | <code>string</code> | `"Provide label"` | Specify the label attribute of the optgroup element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## SelectSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SelectSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :------------------------------------ |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to hide the label text. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## SelectableTile
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SelectableTile } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :---------------------------------------- | :----------------- | :------------------------------------------------------------- |
|
|
| selected | <code>boolean</code> | `false` | Set to `true` to select the tile. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| title | <code>string</code> | `"title"` | Specify the title of the selectable tile. |
|
|
| value | <code>string</code> | `"value"` | Specify the value of the selectable tile. |
|
|
| tabindex | <code>string</code> | `"0"` | Specify the tabindex. |
|
|
| iconDescription | <code>string</code> | `"Tile checkmark"` | Specify the ARIA label for the selectable tile checkmark icon. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| name | <code>string</code> | `""` | Specify a name attribute for the input. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:keydown`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## SideNav
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SideNav } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :------------------------------------------ |
|
|
| fixed | <code>boolean</code> | `false` | Set to `true` to use the fixed variant. |
|
|
| ariaLabel | <code>string</code> | -- | Specify the ARIA label for the nav. |
|
|
| isOpen | <code>boolean</code> | `false` | Set to `true` to toggle the expanded state. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## SideNavItems
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SideNavItems } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## SideNavLink
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SideNavLink } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :--------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- |
|
|
| isSelected | <code>boolean</code> | `false` | Set to `true` to select the current link. |
|
|
| href | <code>string</code> | -- | Specify the `href` attribute. |
|
|
| text | <code>string</code> | -- | Specify the text. |
|
|
| icon | <code>{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }</code> | -- | Specify the icon props. |
|
|
| ref | <code>null | HTMLAnchorElement</code> | `null` | Obtain a reference to the HTML anchor element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## SideNavMenu
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SideNavMenu } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- |
|
|
| expanded | <code>boolean</code> | `false` | Set to `true` to toggle the expanded state. |
|
|
| text | <code>string</code> | -- | Specify the text. |
|
|
| icon | <code>{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }</code> | -- | Specify the icon props. |
|
|
| ref | <code>null | HTMLButtonElement</code> | `null` | Obtain a reference to the HTML button element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## SideNavMenuItem
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SideNavMenuItem } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :--------- | :----------------------------------------- | :------------ | :--------------------------------------------- |
|
|
| isSelected | <code>boolean</code> | -- | Set to `true` to select the item. |
|
|
| href | <code>string</code> | -- | Specify the `href` attribute. |
|
|
| text | <code>string</code> | -- | Specify the item text. |
|
|
| ref | <code>null | HTMLAnchorElement</code> | `null` | Obtain a reference to the HTML anchor element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## SkeletonPlaceholder
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SkeletonPlaceholder } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## SkeletonText
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SkeletonText } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :----------------------------------------------- |
|
|
| lines | <code>number</code> | `3` | Specify the number of lines to render. |
|
|
| heading | <code>boolean</code> | `false` | Set to `true` to use the heading size variant. |
|
|
| paragraph | <code>boolean</code> | `false` | Set to `true` to use the paragraph size variant. |
|
|
| width | <code>string</code> | `"100%"` | Specify the width of the text (% or px). |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## SkipToContent
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SkipToContent } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------ | :---------------- | :---------------------------- |
|
|
| href | <code>string</code> | `"#main-content"` | Specify the `href` attribute. |
|
|
| tabindex | <code>string</code> | `"0"` | Specify the tabindex. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Slider
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Slider } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------- | :----------------------------------- | :------------ | :------------------------------------------ |
|
|
| value | <code>number</code> | `0` | Specify the value of the slider. |
|
|
| max | <code>number</code> | `100` | Set the maximum slider value. |
|
|
| maxLabel | <code>string</code> | `""` | Specify the label for the max value. |
|
|
| min | <code>number</code> | `0` | Set the minimum slider value. |
|
|
| minLabel | <code>string</code> | `""` | Specify the label for the min value. |
|
|
| step | <code>number</code> | `1` | Set the step value. |
|
|
| stepMultiplier | <code>number</code> | `4` | Set the step multiplier value. |
|
|
| required | <code>boolean</code> | `false` | Set to `true` to require a value. |
|
|
| inputType | <code>string</code> | `"number"` | Specify the input type. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the slider. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| hideTextInput | <code>boolean</code> | `false` | Set to `true` to hide the text input. |
|
|
| id | <code>string</code> | -- | Set an id for the slider div element. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| name | <code>string</code> | `""` | Set a name for the slider element. |
|
|
| ref | <code>null | HTMLElement</code> | `null` | Obtain a reference to the HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:change`
|
|
|
|
---
|
|
|
|
## SliderSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { SliderSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :------------------------------------ |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to hide the label text. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## StructuredList
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { StructuredList } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :---------------------------------------------- |
|
|
| selected | <code>string</code> | -- | Specify the selected structured list row value. |
|
|
| border | <code>boolean</code> | `false` | Set to `true` to use the bordered variant. |
|
|
| selection | <code>boolean</code> | `false` | Set to `true` to use the selection variant. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:change`
|
|
|
|
---
|
|
|
|
## StructuredListBody
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { StructuredListBody } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## StructuredListCell
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { StructuredListCell } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :--------------------------------- |
|
|
| head | <code>boolean</code> | `false` | Set to `true` to use as a header. |
|
|
| noWrap | <code>boolean</code> | `false` | Set to `true` to prevent wrapping. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## StructuredListHead
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { StructuredListHead } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## StructuredListInput
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { StructuredListInput } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :---------------------------------------- | :------------ | :-------------------------------------------- |
|
|
| checked | <code>boolean</code> | `false` | Set to `true` to check the input. |
|
|
| title | <code>string</code> | `"title"` | Specify the title of the input. |
|
|
| value | <code>string</code> | `"value"` | Specify the value of the input. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| name | <code>string</code> | `""` | Specify a name attribute for the input. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## StructuredListRow
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { StructuredListRow } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :------------------------------------ |
|
|
| head | <code>boolean</code> | `false` | Set to `true` to use as a header. |
|
|
| label | <code>boolean</code> | `false` | Set to `true` to render a label slot. |
|
|
| tabindex | <code>string</code> | `"0"` | Specify the tabindex. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:keydown`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## StructuredListSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { StructuredListSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :----------------------------------------- |
|
|
| rows | <code>number</code> | `5` | Specify the number of rows. |
|
|
| border | <code>boolean</code> | `false` | Set to `true` to use the bordered variant. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Switch
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Switch } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :----------------------------------------- | :--------------- | :----------------------------------------------------------------------------------------------------------------- |
|
|
| text | <code>string</code> | `"Provide text"` | Specify the switch text. Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>). |
|
|
| selected | <code>boolean</code> | `false` | Set to `true` for the switch to be selected. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the switch. |
|
|
| id | <code>string</code> | -- | Set an id for the button element. |
|
|
| ref | <code>null | HTMLButtonElement</code> | `null` | Obtain a reference to the button HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:keydown`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Tab
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Tab } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :----------------------------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------- |
|
|
| label | <code>string</code> | `""` | Specify the tab label. Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>). |
|
|
| href | <code>string</code> | `"#"` | Specify the href attribute. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the tab. |
|
|
| tabindex | <code>string</code> | `"0"` | Specify the tabindex. |
|
|
| id | <code>string</code> | -- | Set an id for the top-level element. |
|
|
| ref | <code>null | HTMLAnchorElement</code> | `null` | Obtain a reference to the anchor HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TabContent
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TabContent } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------ | :------------ | :----------------------------------- |
|
|
| id | <code>string</code> | -- | Set an id for the top-level element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Table
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Table } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :--------------- | :-------------------------------------------------- | :------------ | :--------------------------------------- |
|
|
| size | <code>"compact" | "short" | "tall"</code> | -- | Set the size of the table. |
|
|
| zebra | <code>boolean</code> | `false` | Set to `true` to use zebra styles. |
|
|
| useStaticWidth | <code>boolean</code> | `false` | Set to `true` to use static width. |
|
|
| shouldShowBorder | <code>boolean</code> | `false` | Set to `true` for the bordered variant. |
|
|
| sortable | <code>boolean</code> | `false` | Set to `true` for the sortable variant. |
|
|
| stickyHeader | <code>boolean</code> | `false` | Set to `true` to enable a sticky header. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TableBody
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TableBody } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TableCell
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TableCell } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TableContainer
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TableContainer } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :----------- | :------------------- | :------------ | :----------------------------------------- |
|
|
| title | <code>string</code> | `""` | Specify the title of the data table. |
|
|
| description | <code>string</code> | `""` | Specify the description of the data table. |
|
|
| stickyHeader | <code>boolean</code> | `false` | Set to `true` to enable a sticky header. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TableHead
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TableHead } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TableHeader
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TableHeader } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :------------------------ | :------------ | :------------------------------------ |
|
|
| scope | <code>string</code> | `"col"` | Specify the `scope` attribute. |
|
|
| translateWithId | <code>() => string</code> | -- | Override the default id translations. |
|
|
| id | <code>string</code> | -- | Set an id for the top-level element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TableRow
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TableRow } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Tabs
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Tabs } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :---------------------------------------- | :-------------------- | :------------------------------------------- |
|
|
| selected | <code>number</code> | `0` | Specify the selected tab index. |
|
|
| type | <code>"default" | "container"</code> | `"default"` | Specify the type of tabs. |
|
|
| iconDescription | <code>string</code> | `"Show menu options"` | Specify the ARIA label for the chevron icon. |
|
|
| triggerHref | <code>string</code> | `"#"` | Specify the tab trigger href attribute. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
- **"content"**: `<div name="content" let:name>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:keypress`
|
|
- `on:click`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:change`
|
|
|
|
---
|
|
|
|
## TabsSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TabsSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------ | :------------ | :------------------------------------ |
|
|
| count | <code>number</code> | `4` | Specify the number of tabs to render. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Tag
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Tag } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------- | :------------------------------------------------------ |
|
|
| type | <code>"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"</code> | -- | Specify the type of tag. |
|
|
| filter | <code>boolean</code> | `false` | Set to `true` to use filterable variant. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable a filterable tag. |
|
|
| skeleton | <code>boolean</code> | `false` | Set to `true` to display the skeleton state. |
|
|
| title | <code>string</code> | `"Clear filter"` | Set the title for the close button in a filterable tag. |
|
|
| id | <code>string</code> | -- | Set an id for the filterable tag. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TagSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TagSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TextArea
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TextArea } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------- | :------------------------------------------- | :------------ | :----------------------------------------------- |
|
|
| value | <code>string</code> | `""` | Specify the textarea value. |
|
|
| placeholder | <code>string</code> | `""` | Specify the placeholder text. |
|
|
| cols | <code>number</code> | `50` | Specify the number of cols. |
|
|
| rows | <code>number</code> | `4` | Specify the number of rows. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the input. |
|
|
| helperText | <code>string</code> | `""` | Specify the helper text. |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to visually hide the label text. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| invalidText | <code>string</code> | `""` | Specify the text for the invalid state. |
|
|
| id | <code>string</code> | -- | Set an id for the textarea element. |
|
|
| name | <code>string</code> | -- | Specify a name attribute for the input. |
|
|
| ref | <code>null | HTMLTextAreaElement</code> | `null` | Obtain a reference to the textarea HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:change`
|
|
- `on:input`
|
|
- `on:focus`
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TextAreaSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TextAreaSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :--------------------------------------------- |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to visually hide the label text. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TextInput
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TextInput } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- |
|
|
| size | <code>"sm" | "xl"</code> | -- | Set the size of the input. |
|
|
| value | <code>string</code> | `""` | Specify the input value. |
|
|
| type | <code>string</code> | `""` | Specify the input type. |
|
|
| placeholder | <code>string</code> | `""` | Specify the placeholder text. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the input. |
|
|
| helperText | <code>string</code> | `""` | Specify the helper text. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| name | <code>string</code> | -- | Specify a name attribute for the input. |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to visually hide the label text. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| invalidText | <code>string</code> | `""` | Specify the invalid state text. |
|
|
| warn | <code>boolean</code> | `false` | Set to `true` to indicate an warning state. |
|
|
| warnText | <code>string</code> | `""` | Specify the warning state text. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
| required | <code>boolean</code> | `false` | Set to `true` to mark the field as required. |
|
|
| inline | <code>boolean</code> | `false` | Set to `true` to use inline version. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:change`
|
|
- `on:input`
|
|
- `on:keydown`
|
|
- `on:focus`
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TextInputSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TextInputSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :------------------------------------ |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to hide the label text. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Tile
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Tile } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :----------------------------------------- |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TileGroup
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TileGroup } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :--------------------------------------- |
|
|
| selected | <code>string</code> | -- | Specify the selected tile value. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the tile group. |
|
|
| legend | <code>string</code> | `""` | Specify the legend text. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
- `on:select`
|
|
|
|
---
|
|
|
|
## TimePicker
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TimePicker } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- |
|
|
| value | <code>string</code> | `""` | Specify the input value. |
|
|
| type | <code>string</code> | `"text"` | Specify the input type. |
|
|
| placeholder | <code>string</code> | `"hh=mm"` | Specify the input placeholder text. |
|
|
| pattern | <code>string</code> | `"(1[012] | [1-9]):[0-5][0-9](\\s)?"` | Specify the `pattern` attribute for the input element. |
|
|
| maxlength | <code>number</code> | `5` | Specify the `maxlength` input attribute. |
|
|
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the input. |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| hideLabel | <code>boolean</code> | `false` | Set to `true` to visually hide the label text. |
|
|
| invalid | <code>boolean</code> | `false` | Set to `true` to indicate an invalid state. |
|
|
| invalidText | <code>string</code> | `""` | Specify the invalid state text. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| name | <code>string</code> | -- | Specify a name attribute for the input. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:change`
|
|
- `on:input`
|
|
- `on:focus`
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TimePickerSelect
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TimePickerSelect } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :----------------------------------------- | :----------------------- | :----------------------------------------------- |
|
|
| value | <code>string</code> | `""` | Specify the select value. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the select. |
|
|
| iconDescription | <code>string</code> | `"Open list of options"` | Specify the ARIA label for the chevron icon. |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| hideLabel | <code>boolean</code> | `true` | . |
|
|
| id | <code>string</code> | -- | Set an id for the select element. |
|
|
| name | <code>string</code> | -- | Specify a name attribute for the select element. |
|
|
| ref | <code>null | HTMLSelectElement</code> | `null` | Obtain a reference to the select HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ToastNotification
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ToastNotification } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :----------------------------------------------------------------------- |
|
|
| notificationType | <code>"toast" | "inline"</code> | `"toast"` | Set the type of notification. |
|
|
| kind | <code>"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"</code> | `"error"` | Specify the kind of notification. |
|
|
| lowContrast | <code>boolean</code> | `false` | Set to `true` to use the low contrast variant. |
|
|
| timeout | <code>number</code> | `0` | Set the timeout duration (ms) to hide the notification after opening it. |
|
|
| role | <code>string</code> | `"alert"` | Set the `role` attribute. |
|
|
| title | <code>string</code> | `"Title"` | Specify the title text. |
|
|
| subtitle | <code>string</code> | `""` | Specify the subtitle text. |
|
|
| caption | <code>string</code> | `"Caption"` | Specify the caption text. |
|
|
| iconDescription | <code>string</code> | `"Closes notification"` | Specify the ARIA label for the icon. |
|
|
| hideCloseButton | <code>boolean</code> | `false` | Set to `true` to hide the close button. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
- `on:close`
|
|
|
|
---
|
|
|
|
## Toggle
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Toggle } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :----------------------------------------------- |
|
|
| toggled | <code>boolean</code> | `false` | Set to `true` to toggle the checkbox input. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable checkbox input. |
|
|
| labelA | <code>string</code> | `"Off"` | Specify the label for the untoggled state. |
|
|
| labelB | <code>string</code> | `"On"` | Specify the label for the toggled state. |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| name | <code>string</code> | -- | Specify a name attribute for the checkbox input. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:change`
|
|
- `on:keyup`
|
|
- `on:focus`
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ToggleSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ToggleSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------ | :------------ | :------------------------------- |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ToggleSmall
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ToggleSmall } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :----------------------------------------------- |
|
|
| toggled | <code>boolean</code> | `false` | Set to `true` to toggle the checkbox input. |
|
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable checkbox input. |
|
|
| labelA | <code>string</code> | `"Off"` | Specify the label for the untoggled state. |
|
|
| labelB | <code>string</code> | `"On"` | Specify the label for the toggled state. |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
| name | <code>string</code> | -- | Specify a name attribute for the checkbox input. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:change`
|
|
- `on:keyup`
|
|
- `on:focus`
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ToggleSmallSkeleton
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ToggleSmallSkeleton } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------ | :------------ | :------------------------------- |
|
|
| labelText | <code>string</code> | `""` | Specify the label text. |
|
|
| id | <code>string</code> | -- | Set an id for the input element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Toolbar
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Toolbar } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :--------------------------------- | :------------ | :------------------------ |
|
|
| size | <code>"sm" | "default"</code> | `"default"` | Specify the toolbar size. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ToolbarBatchActions
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ToolbarBatchActions } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :------------------ | :--------------------------------------------- | :------------ | :-------------------------------------- |
|
|
| formatTotalSelected | <code>(totalSelected: number) => string</code> | -- | Override the total items selected text. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ToolbarContent
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ToolbarContent } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ToolbarMenu
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ToolbarMenu } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ToolbarMenuItem
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ToolbarMenuItem } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
No exported props.
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:keydown`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## ToolbarSearch
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { ToolbarSearch } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :--------- | :---------------------------------------- | :------------ | :--------------------------------------------- |
|
|
| value | <code>string</code> | `""` | Specify the value of the search input. |
|
|
| expanded | <code>boolean</code> | `false` | Set to `true` to expand the search bar. |
|
|
| persistent | <code>boolean</code> | `false` | Set to `true` to keep the search bar expanded. |
|
|
| tabindex | <code>string</code> | `"0"` | Specify the tabindex. |
|
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
|
|
|
### Slots
|
|
|
|
No slots.
|
|
|
|
### Forwarded events
|
|
|
|
- `on:change`
|
|
- `on:input`
|
|
- `on:focus`
|
|
- `on:blur`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## Tooltip
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { Tooltip } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------------- | :------------------------------------------------------------------ | :------------ | :----------------------------------------------------------------------------------------------------------------------------- |
|
|
| direction | <code>"top" | "right" | "bottom" | "left"</code> | `"bottom"` | Set the direction of the tooltip relative to the button. |
|
|
| open | <code>boolean</code> | `false` | Set to `true` to open the tooltip. |
|
|
| hideIcon | <code>boolean</code> | `false` | Set to `true` to hide the tooltip icon. |
|
|
| icon | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button. Icon size must be 16px (e.g. `Add16`, `Task16`). |
|
|
| iconDescription | <code>string</code> | `""` | Specify the ARIA label for the tooltip button. |
|
|
| iconName | <code>string</code> | `""` | Specify the icon name attribute. |
|
|
| tabindex | <code>string</code> | `"0"` | Set the button tabindex. |
|
|
| tooltipId | <code>string</code> | -- | Set an id for the tooltip. |
|
|
| triggerId | <code>string</code> | -- | Set an id for the tooltip button. |
|
|
| triggerText | <code>string</code> | `""` | Set the tooltip button text. |
|
|
| ref | <code>null | HTMLElement</code> | `null` | Obtain a reference to the trigger text HTML element. |
|
|
| refTooltip | <code>null | HTMLElement</code> | `null` | Obtain a reference to the tooltip HTML element. |
|
|
| refIcon | <code>null | HTMLElement</code> | `null` | Obtain a reference to the icon HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
- **"triggerText"**: `<div name="triggerText" let:name>...</div>`
|
|
- **"icon"**: `<div name="icon" let:name>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
No forwarded events.
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TooltipDefinition
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TooltipDefinition } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------- | :------------------------------------------------ | :------------ | :----------------------------------------------------- |
|
|
| tooltipText | <code>string</code> | `""` | Specify the tooltip text. |
|
|
| align | <code>"start" | "center" | "end"</code> | `"center"` | Set the alignment of the tooltip relative to the icon. |
|
|
| direction | <code>"top" | "bottom"</code> | `"bottom"` | Set the direction of the tooltip relative to the icon. |
|
|
| id | <code>string</code> | -- | Set an id for the tooltip div element. |
|
|
| ref | <code>null | HTMLButtonElement</code> | `null` | Obtain a reference to the button HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
- **"tooltip"**: `<div name="tooltip" let:name>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:focus`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## TooltipIcon
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { TooltipIcon } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :---------- | :-------------------------------------------------------------- | :------------ | :----------------------------------------------------- |
|
|
| tooltipText | <code>string</code> | `""` | Specify the tooltip text. |
|
|
| align | <code>"start" | "center" | "end"</code> | `"center"` | Set the alignment of the tooltip relative to the icon. |
|
|
| direction | <code>"top" | "right" | "bottom" | "left"</code> | `"bottom"` | Set the direction of the tooltip relative to the icon. |
|
|
| id | <code>string</code> | -- | Set an id for the span element. |
|
|
| ref | <code>null | HTMLButtonElement</code> | `null` | Obtain a reference to the button HTML element. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
- `on:focus`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|
|
|
|
## UnorderedList
|
|
|
|
### Import path
|
|
|
|
```js
|
|
import { UnorderedList } from "carbon-components-svelte";
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop name | Type | Default value | Description |
|
|
| :-------- | :------------------- | :------------ | :--------------------------------------- |
|
|
| nested | <code>boolean</code> | `false` | Set to `true` to use the nested variant. |
|
|
|
|
### Slots
|
|
|
|
- **default**: `<div>...</div>`
|
|
|
|
### Forwarded events
|
|
|
|
- `on:click`
|
|
- `on:mouseover`
|
|
- `on:mouseenter`
|
|
- `on:mouseleave`
|
|
|
|
### Dispatched events
|
|
|
|
No dispatched events.
|
|
|
|
---
|