mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 19:01:05 +00:00
fix(types): include @default annotations for props that are undefined by default (#1020)
* chore(deps-dev): upgrade sveld to v0.12.1 * Run "yarn build:lib" * Re-run "yarn build:lib"
This commit is contained in:
Eric Liu
GitHub
parent
1f7b5560a8
commit
0d78c30b9d
64 changed files with 373 additions and 260 deletions
|
|
@ -183,12 +183,12 @@
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ |
|
||||
| align | <code>let</code> | No | <code>"start" | "end"</code> | <code>"end"</code> | Specify alignment of accordion item chevron icon |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Specify the size of the accordion |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :-------------------------------- | ---------------------- | ------------------------------------------------ |
|
||||
| align | <code>let</code> | No | <code>"start" | "end"</code> | <code>"end"</code> | Specify alignment of accordion item chevron icon |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the accordion |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -238,12 +238,12 @@
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ |
|
||||
| count | <code>let</code> | No | <code>number</code> | <code>4</code> | Specify the number of accordion items to render |
|
||||
| align | <code>let</code> | No | <code>"start" | "end"</code> | <code>"end"</code> | Specify alignment of accordion item chevron icon |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Specify the size of the accordion |
|
||||
| open | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to close the first accordion item |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :-------------------------------- | ---------------------- | ------------------------------------------------ |
|
||||
| count | <code>let</code> | No | <code>number</code> | <code>4</code> | Specify the number of accordion items to render |
|
||||
| align | <code>let</code> | No | <code>"start" | "end"</code> | <code>"end"</code> | Specify alignment of accordion item chevron icon |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the accordion |
|
||||
| open | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to close the first accordion item |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -304,10 +304,10 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------- |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
|
||||
| isCurrentPage | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the breadcrumb item represents the current page |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :------------------- | ---------------------- | ---------------------------------------------------------------- |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
|
||||
| isCurrentPage | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the breadcrumb item represents the current page |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -361,7 +361,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
|||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :----------------- | :------- | :--------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
|
||||
| sizes | <code>let</code> | Yes | <code>Record<BreakpointSize, boolean></code> | <code>{ sm: false, md: false, lg: false, xlg: false, max: false, }</code> | Carbon grid sizes as an object |
|
||||
| size | <code>let</code> | Yes | <code>BreakpointSize</code> | -- | Determine the current Carbon grid breakpoint size |
|
||||
| size | <code>let</code> | Yes | <code>BreakpointSize</code> | <code>undefined</code> | Determine the current Carbon grid breakpoint size |
|
||||
| breakpoints | <code>const</code> | No | <code>Record<BreakpointSize, BreakpointValue></code> | <code>{ sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }</code> | Reference the Carbon grid breakpoints |
|
||||
|
||||
### Slots
|
||||
|
|
@ -388,14 +388,14 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
|||
| size | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button |
|
||||
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
|
||||
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
|
||||
| tooltipAlignment | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon<br />`hasIconOnly` must be set to `true` |
|
||||
| tooltipPosition | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
|
||||
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
|
||||
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| type | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
|
||||
|
||||
|
|
@ -438,7 +438,7 @@ None.
|
|||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
|
||||
| size | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button skeleton |
|
||||
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
|
||||
|
||||
|
|
@ -472,7 +472,7 @@ None.
|
|||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>""</code> | Set a name for the input element |
|
||||
| title | <code>let</code> | No | <code>string</code> | -- | Specify the title attribute for the label element |
|
||||
| title | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the title attribute for the label element |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input label |
|
||||
|
||||
### Slots
|
||||
|
|
@ -516,12 +516,12 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
|
||||
| clicked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to click the tile |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------- | ---------------------- | ----------------------------------------- |
|
||||
| clicked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to click the tile |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -549,15 +549,15 @@ None.
|
|||
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
|
||||
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
|
||||
| type | <code>let</code> | No | <code>"single" | "inline" | "multi"</code> | <code>"single"</code> | Set the type of code snippet |
|
||||
| code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)<br />You must use the `code` prop to copy the code |
|
||||
| code | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the code snippet text<br />Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)<br />You must use the `code` prop to copy the code |
|
||||
| copy | <code>let</code> | No | <code>(code: string) => void</code> | <code>async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
|
||||
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types |
|
||||
| wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
|
||||
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
|
||||
| copyButtonDescription | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the copy button icon |
|
||||
| copyLabel | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label of the copy button |
|
||||
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
|
||||
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
|
||||
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
|
||||
|
|
@ -619,19 +619,19 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) |
|
||||
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
||||
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
||||
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
||||
| padding | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to the column |
|
||||
| aspectRatio | <code>let</code> | No | <code>"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"</code> | -- | Specify the aspect ratio of the column |
|
||||
| sm | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the small breakpoint |
|
||||
| md | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the medium breakpoint |
|
||||
| lg | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the large breakpoint |
|
||||
| xlg | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the extra large breakpoint |
|
||||
| max | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the maximum breakpoint |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) |
|
||||
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
||||
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
||||
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
||||
| padding | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to the column |
|
||||
| aspectRatio | <code>let</code> | No | <code>"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"</code> | <code>undefined</code> | Specify the aspect ratio of the column |
|
||||
| sm | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the small breakpoint |
|
||||
| md | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the medium breakpoint |
|
||||
| lg | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the large breakpoint |
|
||||
| xlg | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the extra large breakpoint |
|
||||
| max | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the maximum breakpoint |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -664,11 +664,11 @@ export interface ComboBoxItem {
|
|||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
|
||||
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
|
||||
| selectedId | <code>let</code> | Yes | <code>ComboBoxItemId</code> | -- | Set the selected item by value id |
|
||||
| selectedId | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
|
||||
| items | <code>let</code> | No | <code>ComboBoxItem[]</code> | <code>[]</code> | Set the combobox items |
|
||||
| itemToString | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a combobox item |
|
||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Set the size of the combobox |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
|
||||
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
|
||||
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
|
|
@ -679,9 +679,9 @@ export interface ComboBoxItem {
|
|||
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| shouldFilterItem | <code>let</code> | No | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code> | Determine if an item should be filtered given the current combobox value |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | -- | Override the default translation ids |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||
| clear | <code>function</code> | No | <code>(options?: { focus?: boolean; }) => void</code> | <code>() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); }</code> | Clear the combo box programmatically |
|
||||
|
||||
### Slots
|
||||
|
|
@ -708,7 +708,7 @@ None.
|
|||
| :------------------------- | :--------------- | :------- | :---------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
|
||||
| size | <code>let</code> | No | <code>"xs" | "sm" | "lg"</code> | -- | Set the size of the composed modal |
|
||||
| size | <code>let</code> | No | <code>"xs" | "sm" | "lg"</code> | <code>undefined</code> | Set the size of the composed modal |
|
||||
| danger | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
| preventCloseOnClickOutside | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the modal from closing when clicking outside |
|
||||
| containerClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a class for the inner modal |
|
||||
|
|
@ -757,11 +757,11 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :---------------------------- | ------------------ | ----------------------------------------- |
|
||||
| selectedIndex | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Set the selected index of the switch item |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Specify the size of the content switcher |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :---------------------------- | ---------------------- | ----------------------------------------- |
|
||||
| selectedIndex | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Set the selected index of the switch item |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the content switcher |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -848,7 +848,7 @@ None.
|
|||
| ref | <code>let</code> | Yes | <code>null | HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element |
|
||||
| selectable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true` |
|
||||
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
|
||||
| icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render<br />Icon is rendered to the left of the label text |
|
||||
| icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render<br />Icon is rendered to the left of the label text |
|
||||
| indented | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
|
||||
| kind | <code>let</code> | No | <code>"default" | "danger"</code> | <code>"default"</code> | Specify the kind of option |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
|
||||
|
|
@ -922,7 +922,7 @@ None.
|
|||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :--------------- | :------- | :---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Copy to clipboard"</code> | Set the title and ARIA label for the copy button |
|
||||
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text to copy |
|
||||
| text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text to copy |
|
||||
| copy | <code>let</code> | No | <code>(text: string) => void</code> | <code>async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
|
||||
|
||||
### Slots
|
||||
|
|
@ -980,27 +980,27 @@ export interface DataTableCell {
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------ | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| selectedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be selected |
|
||||
| selectable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
|
||||
| expandedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be expanded |
|
||||
| expandable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` |
|
||||
| rows | <code>let</code> | Yes | <code>DataTableRow[]</code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
|
||||
| headers | <code>let</code> | No | <code>DataTableHeader[]</code> | <code>[]</code> | Specify the data table headers |
|
||||
| size | <code>let</code> | No | <code>"compact" | "short" | "medium" | "tall"</code> | -- | Set the size of the data table |
|
||||
| title | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
|
||||
| description | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
|
||||
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
||||
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||
| batchExpansion | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
|
||||
| nonExpandableRowIds | <code>let</code> | No | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
|
||||
| radio | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
|
||||
| batchSelection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
|
||||
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||
| pageSize | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the number of items to display in a page |
|
||||
| page | <code>let</code> | No | <code>number</code> | <code>0</code> | Set to `number` to set current page |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------ | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| selectedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be selected |
|
||||
| selectable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
|
||||
| expandedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be expanded |
|
||||
| expandable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` |
|
||||
| rows | <code>let</code> | Yes | <code>DataTableRow[]</code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
|
||||
| headers | <code>let</code> | No | <code>DataTableHeader[]</code> | <code>[]</code> | Specify the data table headers |
|
||||
| size | <code>let</code> | No | <code>"compact" | "short" | "medium" | "tall"</code> | <code>undefined</code> | Set the size of the data table |
|
||||
| title | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
|
||||
| description | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
|
||||
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
||||
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||
| batchExpansion | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
|
||||
| nonExpandableRowIds | <code>let</code> | No | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
|
||||
| radio | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
|
||||
| batchSelection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
|
||||
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||
| pageSize | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the number of items to display in a page |
|
||||
| page | <code>let</code> | No | <code>number</code> | <code>0</code> | Set to `number` to set current page |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1030,15 +1030,15 @@ export interface DataTableCell {
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :--------------- | :------- | :------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------- |
|
||||
| columns | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array |
|
||||
| rows | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
|
||||
| size | <code>let</code> | No | <code>"compact" | "short" | "tall"</code> | -- | Set the size of the data table |
|
||||
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows |
|
||||
| showHeader | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the header |
|
||||
| headers | <code>let</code> | No | <code>string[] | Partial<DataTableHeader>[]</code> | <code>[]</code> | Set the column headers<br />Supersedes `columns` if value is a non-empty array |
|
||||
| showToolbar | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the toolbar |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :--------------- | :------- | :------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- |
|
||||
| columns | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array |
|
||||
| rows | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
|
||||
| size | <code>let</code> | No | <code>"compact" | "short" | "tall"</code> | <code>undefined</code> | Set the size of the data table |
|
||||
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows |
|
||||
| showHeader | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the header |
|
||||
| headers | <code>let</code> | No | <code>string[] | Partial<DataTableHeader>[]</code> | <code>[]</code> | Set the column headers<br />Supersedes `columns` if value is a non-empty array |
|
||||
| showToolbar | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the toolbar |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1095,7 +1095,7 @@ None.
|
|||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Set the size of the input |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| type | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the input type |
|
||||
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the input placeholder text |
|
||||
| pattern | <code>let</code> | No | <code>string</code> | <code>"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"</code> | Specify the Regular Expression for the input value |
|
||||
|
|
@ -1109,7 +1109,7 @@ None.
|
|||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Set a name for the input element |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set a name for the input element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1170,12 +1170,12 @@ export interface DropdownItem {
|
|||
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||
| inline | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
|
||||
| selectedId | <code>let</code> | Yes | <code>DropdownItemId</code> | -- | Specify the selected item id |
|
||||
| selectedId | <code>let</code> | Yes | <code>DropdownItemId</code> | <code>undefined</code> | Specify the selected item id |
|
||||
| items | <code>let</code> | No | <code>DropdownItem[]</code> | <code>[]</code> | Set the dropdown items |
|
||||
| itemToString | <code>let</code> | No | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a dropdown item |
|
||||
| type | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
|
||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | -- | Specify the size of the dropdown field |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Specify the size of the dropdown field |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
|
||||
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
|
||||
|
|
@ -1184,11 +1184,11 @@ export interface DropdownItem {
|
|||
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| label | <code>let</code> | No | <code>string</code> | -- | Specify the list box label |
|
||||
| label | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the list box label |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | -- | Override the default translation ids |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the list box |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the list box |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1575,19 +1575,19 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| isSideNavOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
|
||||
| expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
|
||||
| uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
|
||||
| company | <code>let</code> | No | <code>string</code> | -- | Specify the company name |
|
||||
| platformName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) |
|
||||
| persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
|
||||
| expansionBreakpoint | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
|
||||
| iconMenu | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render for the closed state<br />Defaults to `Menu20` |
|
||||
| iconClose | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render for the opened state<br />Defaults to `Close20` |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------------------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| isSideNavOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
|
||||
| expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
|
||||
| uiShellAriaLabel | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||
| company | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name |
|
||||
| platformName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) |
|
||||
| persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
|
||||
| expansionBreakpoint | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
|
||||
| iconMenu | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the closed state<br />Defaults to `Menu20` |
|
||||
| iconClose | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the opened state<br />Defaults to `Close20` |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1621,9 +1621,9 @@ export interface HeaderActionSlideTransition {
|
|||
| :--------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||
| isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
|
||||
| closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render when the action panel is open |
|
||||
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text<br />Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
| closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is open |
|
||||
| text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text<br />Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) |
|
||||
| transition | <code>let</code> | No | <code>false | HeaderActionSlideTransition</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition |
|
||||
|
||||
### Slots
|
||||
|
|
@ -1644,12 +1644,12 @@ export interface HeaderActionSlideTransition {
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :----------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| linkIsActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :----------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| linkIsActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1683,11 +1683,11 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
||||
| isActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
||||
| isActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1705,9 +1705,9 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------ | ------------- | ---------------------------------- |
|
||||
| ariaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the nav |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------ | ---------------------- | ---------------------------------- |
|
||||
| ariaLabel | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the nav |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1723,12 +1723,12 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
|
||||
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
|
||||
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the item |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||
| text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
|
||||
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the item |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1751,12 +1751,12 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>"/"</code> | Specify the `href` attribute |
|
||||
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>"/"</code> | Specify the `href` attribute |
|
||||
| text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1797,10 +1797,10 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1892,10 +1892,10 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ------------------------------------------- |
|
||||
| render | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------------- |
|
||||
| render | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1942,7 +1942,7 @@ None.
|
|||
| loading | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when `loaded` is `true` and `error` is false |
|
||||
| src | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image source |
|
||||
| alt | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image alt text |
|
||||
| ratio | <code>let</code> | No | <code>"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"</code> | -- | Specify the aspect ratio for the image wrapper |
|
||||
| ratio | <code>let</code> | No | <code>"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"</code> | <code>undefined</code> | Specify the aspect ratio for the image wrapper |
|
||||
| fadeIn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to fade in the image on load<br />The duration uses the `fast-02` value following Carbon guidelines on motion |
|
||||
| loadImage | <code>const</code> | No | <code>(url?: string) => void</code> | <code>(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }</code> | Method invoked to load the image provided a `src` value |
|
||||
|
||||
|
|
@ -1964,12 +1964,12 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :--------------- | :------- | :----------------------------------------------------------------------- | --------------------- | ----------------------------------------------------------------- |
|
||||
| status | <code>let</code> | No | <code>"active" | "inactive" | "finished" | "error"</code> | <code>"active"</code> | Set the loading status |
|
||||
| description | <code>let</code> | No | <code>string</code> | -- | Set the loading description |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the loading icon |
|
||||
| successDelay | <code>let</code> | No | <code>number</code> | <code>1500</code> | Specify the timeout delay (ms) after `status` is set to "success" |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :--------------- | :------- | :----------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------- |
|
||||
| status | <code>let</code> | No | <code>"active" | "inactive" | "finished" | "error"</code> | <code>"active"</code> | Set the loading status |
|
||||
| description | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the loading description |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the loading icon |
|
||||
| successDelay | <code>let</code> | No | <code>number</code> | <code>1500</code> | Specify the timeout delay (ms) after `status` is set to "success" |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2023,15 +2023,15 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | -------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLParagraphElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg"</code> | -- | Specify the size of the link |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Specify the href value |
|
||||
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render<br />`inline` must be `false` |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
|
||||
| visited | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLParagraphElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Specify the size of the link |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the href value |
|
||||
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render<br />`inline` must be `false` |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
|
||||
| visited | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2054,7 +2054,7 @@ None.
|
|||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :--------------- | :------- | :------------------------------------- | ---------------------- | ------------------------------------------ |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Set the size of the list box |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the list box |
|
||||
| type | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Set the type of the list box |
|
||||
| open | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to open the list box |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
|
|
@ -2198,7 +2198,7 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
|
|||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :----------------- | :------- | :----------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| selectionCount | <code>let</code> | No | <code>number</code> | -- | Specify the number of selected items |
|
||||
| selectionCount | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the number of selected items |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the list box selection |
|
||||
| translationIds | <code>const</code> | No | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | Default translation ids |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: ListBoxSelectionTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
|
||||
|
|
@ -2284,13 +2284,13 @@ None.
|
|||
| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
|
||||
| size | <code>let</code> | No | <code>"xs" | "sm" | "lg"</code> | -- | Set the size of the modal |
|
||||
| size | <code>let</code> | No | <code>"xs" | "sm" | "lg"</code> | <code>undefined</code> | Set the size of the modal |
|
||||
| danger | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
| alert | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable alert mode |
|
||||
| passiveModal | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the passive variant |
|
||||
| modalHeading | <code>let</code> | No | <code>string</code> | -- | Specify the modal heading |
|
||||
| modalLabel | <code>let</code> | No | <code>string</code> | -- | Specify the modal label |
|
||||
| modalAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the modal |
|
||||
| modalHeading | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal heading |
|
||||
| modalLabel | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal label |
|
||||
| modalAriaLabel | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the modal |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Close the modal"</code> | Specify the ARIA label for the close icon |
|
||||
| hasForm | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains form elements |
|
||||
| hasScrollingContent | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains scrolling content |
|
||||
|
|
@ -2350,15 +2350,15 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------- |
|
||||
| primaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||
| primaryButtonDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||
| primaryClass | <code>let</code> | No | <code>string</code> | -- | Specify a class for the primary button |
|
||||
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||
| secondaryButtons | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
|
||||
| secondaryClass | <code>let</code> | No | <code>string</code> | -- | Specify a class for the secondary button |
|
||||
| danger | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
|
||||
| primaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||
| primaryButtonDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||
| primaryClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the primary button |
|
||||
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||
| secondaryButtons | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
|
||||
| secondaryClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the secondary button |
|
||||
| danger | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2426,7 +2426,7 @@ export interface MultiSelectItem {
|
|||
| selectedIds | <code>let</code> | Yes | <code>MultiSelectItemId[]</code> | <code>[]</code> | Set the selected ids |
|
||||
| items | <code>let</code> | Yes | <code>MultiSelectItem[]</code> | <code>[]</code> | Set the multiselect items |
|
||||
| itemToString | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text || item.id</code> | Override the display of a multiselect item |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | -- | Set the size of the combobox |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| type | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Specify the type of multiselect |
|
||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu |
|
||||
| selectionFeedback | <code>let</code> | No | <code>"top" | "fixed" | "top-after-reopen"</code> | <code>"top-after-reopen"</code> | Specify the selection feedback after selecting items |
|
||||
|
|
@ -2437,7 +2437,7 @@ export interface MultiSelectItem {
|
|||
| locale | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale |
|
||||
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| sortItem | <code>let</code> | No | <code>((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)</code> | <code>(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })</code> | Override the sorting logic<br />The default sorting compare the item text value |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | -- | Override the default translation ids |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
|
||||
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
|
||||
| useTitleInItem | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to pass the item to `itemToString` in the checkbox |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
|
|
@ -2448,7 +2448,7 @@ export interface MultiSelectItem {
|
|||
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the list box label |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the select |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the select |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2493,8 +2493,8 @@ None.
|
|||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------- | ----------------------------------- |
|
||||
| notificationType | <code>let</code> | No | <code>"toast" | "inline"</code> | <code>"toast"</code> | Set the type of notification |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
|
||||
| title | <code>let</code> | No | <code>string</code> | -- | Specify the title of the icon |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
| title | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the title of the icon |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Close icon"</code> | Specify the ARIA label for the icon |
|
||||
|
||||
### Slots
|
||||
|
|
@ -2563,10 +2563,10 @@ export type NumberInputTranslationId = "increment" | "decrement";
|
|||
| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| value | <code>let</code> | Yes | <code>number | string</code> | <code>""</code> | Specify the input value |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Set the size of the input |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| step | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment |
|
||||
| max | <code>let</code> | No | <code>number</code> | -- | Specify the maximum value |
|
||||
| min | <code>let</code> | No | <code>number</code> | -- | Specify the minimum value |
|
||||
| max | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum value |
|
||||
| min | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the minimum value |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| readonly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the input to be read-only |
|
||||
| mobile | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the mobile variant |
|
||||
|
|
@ -2584,7 +2584,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
|
|||
| translateWithId | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
|
||||
| translationIds | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2678,14 +2678,14 @@ None.
|
|||
| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
|
||||
| menuRef | <code>let</code> | Yes | <code>null | HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
|
||||
| buttonRef | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
|
||||
| icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
|
||||
| icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Specify the size of the overflow menu |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
|
||||
| direction | <code>let</code> | No | <code>"top" | "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| flipped | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
|
||||
| menuOptionsClass | <code>let</code> | No | <code>string</code> | -- | Specify the menu options class |
|
||||
| iconClass | <code>let</code> | No | <code>string</code> | -- | Specify the icon class |
|
||||
| menuOptionsClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the menu options class |
|
||||
| iconClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the icon class |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
|
||||
|
||||
|
|
@ -2824,7 +2824,7 @@ None.
|
|||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| type | <code>let</code> | Yes | <code>"text" | "password"</code> | <code>"password"</code> | Set to `"text"` to toggle the password visibility |
|
||||
| value | <code>let</code> | Yes | <code>number | string</code> | <code>""</code> | Specify the input value |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Set the size of the input |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| hidePasswordLabel | <code>let</code> | No | <code>string</code> | <code>"Hide password"</code> | Specify the hide password label text |
|
||||
| showPasswordLabel | <code>let</code> | No | <code>string</code> | <code>"Show password"</code> | Specify the show password label text |
|
||||
|
|
@ -2841,7 +2841,7 @@ None.
|
|||
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use inline version |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2896,7 +2896,7 @@ None.
|
|||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | --------------------------------------------- |
|
||||
| value | <code>let</code> | No | <code>number</code> | -- | Specify the current value |
|
||||
| value | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the current value |
|
||||
| max | <code>let</code> | No | <code>number</code> | <code>100</code> | Specify the maximum value |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
|
|
@ -3027,12 +3027,12 @@ None.
|
|||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :------------------------------------------ | ------------------------- | -------------------------------------------- |
|
||||
| selected | <code>let</code> | Yes | <code>string</code> | -- | Set the selected radio button value |
|
||||
| selected | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Set the selected radio button value |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the radio buttons |
|
||||
| legendText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
|
||||
| labelPosition | <code>let</code> | No | <code>"right" | "left"</code> | <code>"right"</code> | Specify the label position |
|
||||
| orientation | <code>let</code> | No | <code>"horizontal" | "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons |
|
||||
| id | <code>let</code> | No | <code>string</code> | -- | Set an id for the container div element |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set an id for the container div element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3175,7 +3175,7 @@ None.
|
|||
| autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
|
||||
| closeButtonLabelText | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
|
||||
### Slots
|
||||
|
|
@ -3231,13 +3231,13 @@ None.
|
|||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLSelectElement</code> | <code>null</code> | Obtain a reference to the select HTML element |
|
||||
| selected | <code>let</code> | Yes | <code>string</code> | -- | Specify the selected item value |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Set the size of the select input |
|
||||
| selected | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Specify the selected item value |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the select input |
|
||||
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the select element |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the select element |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the select element |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the select element |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||
|
|
@ -3360,13 +3360,13 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
|
||||
| fixed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fixed variant |
|
||||
| rail | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the rail variant |
|
||||
| ariaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the nav |
|
||||
| expansionBreakpoint | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------ | :--------------- | :------- | :------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
|
||||
| fixed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fixed variant |
|
||||
| rail | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the rail variant |
|
||||
| ariaLabel | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the nav |
|
||||
| expansionBreakpoint | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3416,13 +3416,13 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
|
||||
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||
| text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3438,12 +3438,12 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
||||
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
|
||||
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
||||
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
|
||||
| text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3461,12 +3461,12 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the item |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
|
||||
| text | <code>let</code> | No | <code>string</code> | -- | Specify the item text |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the item |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||
| text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the item text |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3609,13 +3609,13 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------- |
|
||||
| selected | <code>let</code> | Yes | <code>string</code> | -- | Specify the selected structured list row value |
|
||||
| border | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the bordered variant |
|
||||
| condensed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
|
||||
| flush | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flush the list |
|
||||
| selection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the selection variant |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------- | ---------------------- | ---------------------------------------------- |
|
||||
| selected | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Specify the selected structured list row value |
|
||||
| border | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the bordered variant |
|
||||
| condensed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
|
||||
| flush | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flush the list |
|
||||
| selection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the selection variant |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3846,14 +3846,14 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | --------------------------------------- |
|
||||
| size | <code>let</code> | No | <code>"compact" | "short" | "medium" | "tall"</code> | -- | Set the size of the table |
|
||||
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
||||
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||
| shouldShowBorder | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the bordered variant |
|
||||
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | --------------------------------------- |
|
||||
| size | <code>let</code> | No | <code>"compact" | "short" | "medium" | "tall"</code> | <code>undefined</code> | Set the size of the table |
|
||||
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
||||
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||
| shouldShowBorder | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the bordered variant |
|
||||
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4046,14 +4046,14 @@ None.
|
|||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
|
||||
| type | <code>let</code> | No | <code>"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline"</code> | -- | Specify the type of tag |
|
||||
| type | <code>let</code> | No | <code>"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline"</code> | <code>undefined</code> | Specify the type of tag |
|
||||
| size | <code>let</code> | No | <code>"sm" | "default"</code> | <code>"default"</code> | -- |
|
||||
| filter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use filterable variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable a filterable tag |
|
||||
| interactive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a `button` element instead of a `div` |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| title | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag |
|
||||
|
||||
### Slots
|
||||
|
|
@ -4112,7 +4112,7 @@ None.
|
|||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the text for the invalid state |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the textarea element |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4164,14 +4164,14 @@ None.
|
|||
| :---------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| value | <code>let</code> | Yes | <code>number | string</code> | <code>""</code> | Specify the input value |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Set the size of the input |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| type | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the input type |
|
||||
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
|
||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
|
|
@ -4240,7 +4240,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
| tokens | <code>let</code> | No | <code>{ [token: string]: any; }</code> | <code>{}</code> | Customize a theme with your own tokens<br />https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
|
||||
| persist | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage |
|
||||
| persistKey | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key |
|
||||
| render | <code>let</code> | No | <code>"toggle" | "select"</code> | -- | Render a toggle or select dropdown to control the theme |
|
||||
| render | <code>let</code> | No | <code>"toggle" | "select"</code> | <code>undefined</code> | Render a toggle or select dropdown to control the theme |
|
||||
| toggle | <code>let</code> | No | <code>import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }</code> | <code>{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }</code> | Override the default toggle props |
|
||||
| select | <code>let</code> | No | <code>import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }</code> | <code>{ themes: themeKeys, labelText: "Themes", hideLabel: false, }</code> | Override the default select props |
|
||||
|
||||
|
|
@ -4283,11 +4283,11 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
|
||||
| selected | <code>let</code> | Yes | <code>string</code> | -- | Specify the selected tile value |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
|
||||
| legend | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------- | ---------------------- | --------------------------------------- |
|
||||
| selected | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Specify the selected tile value |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
|
||||
| legend | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4309,7 +4309,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
| :---------- | :--------------- | :------- | :---------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the input value |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Specify the size of the input |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the input |
|
||||
| type | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the input type |
|
||||
| placeholder | <code>let</code> | No | <code>string</code> | <code>"hh:mm"</code> | Specify the input placeholder text |
|
||||
| pattern | <code>let</code> | No | <code>string</code> | <code>"(1[012]|[1-9]):[0-5][0-9](\\s)?"</code> | Specify the `pattern` attribute for the input element |
|
||||
|
|
@ -4321,7 +4321,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4358,7 +4358,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>true</code> | -- |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the select element |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the select element |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the select element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4424,7 +4424,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
| labelB | <code>let</code> | No | <code>string</code> | <code>"On"</code> | Specify the label for the toggled state |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the checkbox input |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the checkbox input |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4485,7 +4485,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
| labelB | <code>let</code> | No | <code>string</code> | <code>"On"</code> | Specify the label for the toggled state |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the checkbox input |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the checkbox input |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4654,7 +4654,7 @@ None.
|
|||
| align | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
|
||||
| direction | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
|
||||
| hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
|
||||
| iconName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
|
||||
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
|
||||
|
|
@ -4732,7 +4732,7 @@ None.
|
|||
| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||
| tooltipText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
|
||||
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tooltip icon |
|
||||
| align | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
|
||||
| direction | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the icon |
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue