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