mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
chore: re-run build:docs to improve table formatting
This commit is contained in:
Eric Liu
parent
5f887f59e8
commit
2fd5c2c25f
1 changed files with 252 additions and 252 deletions
|
|
@ -202,12 +202,12 @@
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| disabled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item |
|
| disabled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item |
|
||||||
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item |
|
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item |
|
||||||
| title | No | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading.<br />Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`) |
|
| title | No | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading.<br />Alternatively, use the "title" slot (e.g., <code><code></code><div slot="title"><code></code></code>...<code><code></code></div><code></code></code>) |
|
||||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon |
|
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -372,23 +372,23 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
||||||
| kind | No | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
| kind | No | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
||||||
| size | No | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button |
|
| size | No | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button |
|
||||||
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
|
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
|
||||||
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
|
| isSelected | No | <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 | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`) |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., <code><code></code><Icon slot="icon" size="{20}" /><code></code></code>) |
|
||||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
|
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
|
||||||
| tooltipAlignment | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
|
| tooltipAlignment | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
|
||||||
| tooltipPosition | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
|
| tooltipPosition | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
|
||||||
| as | No | <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>) |
|
| as | No | <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., <code><Button let:props></code><code><div {...props}></code>...<code></div></code><code></Button></code>) |
|
||||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
|
||||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
|
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
|
||||||
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||||
| type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
|
| type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -540,26 +540,26 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
|
||||||
| showMoreLess | No | <code>let</code> | Yes | <code>boolean</code> | <code>true</code> | Set to `false` to hide the show more/less button<br /><br />NOTE: this prop only works with the `type="multi"` variant |
|
| showMoreLess | No | <code>let</code> | Yes | <code>boolean</code> | <code>true</code> | Set to `false` to hide the show more/less button<br /><br />NOTE: this prop only works with the `type="multi"` variant |
|
||||||
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
|
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
|
||||||
| type | No | <code>let</code> | No | <code>"single" | "inline" | "multi"</code> | <code>"single"</code> | Set the type of code snippet |
|
| type | No | <code>let</code> | No | <code>"single" | "inline" | "multi"</code> | <code>"single"</code> | Set the type of code snippet |
|
||||||
| code | No | <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 /><br />NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. |
|
| code | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the code snippet text.<br />Alternatively, use the default slot (e.g., <code><code></code><CodeSnippet><code></code></code>{code}<code><code></code></CodeSnippet><code></code></code>).<br /><br />NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. |
|
||||||
| copy | No | <code>let</code> | No | <code>(code: string) => void</code> | <code>async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }</code> | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.<br /><br />Provide a custom function to override this behavior. |
|
| copy | No | <code>let</code> | No | <code>(code: string) => void</code> | <code>async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }</code> | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.<br /><br />Provide a custom function to override this behavior. |
|
||||||
| hideCopyButton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
|
| hideCopyButton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
|
||||||
| disabled | No | <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 |
|
| disabled | No | <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 | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text.<br /><br />NOTE: this prop only works with the `type="multi"` variant |
|
| wrapText | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text.<br /><br />NOTE: this prop only works with the `type="multi"` variant |
|
||||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||||
| copyButtonDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the copy button icon |
|
| copyButtonDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the copy button icon |
|
||||||
| copyLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label of the copy button |
|
| copyLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label of the copy button |
|
||||||
| feedback | No | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
|
| feedback | No | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
|
||||||
| feedbackTimeout | No | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
|
| feedbackTimeout | No | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
|
||||||
| showLessText | No | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text.<br /><br />NOTE: this prop only works with the `type="multi"` variant |
|
| showLessText | No | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text.<br /><br />NOTE: this prop only works with the `type="multi"` variant |
|
||||||
| showMoreText | No | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br /><br />NOTE: this prop only works with the `type="multi"` variant |
|
| showMoreText | No | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br /><br />NOTE: this prop only works with the `type="multi"` variant |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -618,19 +618,19 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| as | No | <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>) |
|
| as | No | <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., <code><Column let:props></code><code><article {...props}></code>...<code></article></code><code></Column></code>) |
|
||||||
| noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
| noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
||||||
| noGutterLeft | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
| noGutterLeft | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
||||||
| noGutterRight | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
| noGutterRight | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
||||||
| padding | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to the column |
|
| padding | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to the column |
|
||||||
| aspectRatio | No | <code>let</code> | No | <code>"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"</code> | <code>undefined</code> | Specify the aspect ratio of the column |
|
| aspectRatio | No | <code>let</code> | No | <code>"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"</code> | <code>undefined</code> | Specify the aspect ratio of the column |
|
||||||
| sm | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the small breakpoint |
|
| sm | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the small breakpoint |
|
||||||
| md | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the medium breakpoint |
|
| md | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the medium breakpoint |
|
||||||
| lg | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the large breakpoint |
|
| lg | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the large breakpoint |
|
||||||
| xlg | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the extra large breakpoint |
|
| xlg | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the extra large breakpoint |
|
||||||
| max | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the maximum breakpoint |
|
| max | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the maximum breakpoint |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -847,27 +847,27 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
|
| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element |
|
||||||
| selectable | No | <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` |
|
| selectable | No | <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 | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
|
| selected | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
|
||||||
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Icon is rendered to the left of the label text |
|
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Icon is rendered to the left of the label text |
|
||||||
| indented | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
|
| indented | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
|
||||||
| kind | No | <code>let</code> | No | <code>"default" | "danger"</code> | <code>"default"</code> | Specify the kind of option |
|
| kind | No | <code>let</code> | No | <code>"default" | "danger"</code> | <code>"default"</code> | Specify the kind of option |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
|
||||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) |
|
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., <code><code></code><span slot="labelText"><code></code></code>...<code><code></code></span><code></code></code>) |
|
||||||
| shortcutText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the shortcut text.<br />Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`) |
|
| shortcutText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the shortcut text.<br />Alternatively, use the "shortcutText" slot (e.g., <code><code></code><span slot="shortcutText"><code></code></code>...<code><code></code></span><code></code></code>) |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />It's recommended to provide an id as a value to bind to within a selectable/radio menu group |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />It's recommended to provide an id as a value to bind to within a selectable/radio menu group |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :----------- | :------ | :---- | :-------------------------------------------------- |
|
| :----------- | :------ | :---- | :--------------------------------------------------------------- |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} /></code> |
|
| icon | No | -- | <code><code><svelte:component this={icon} /></code></code> |
|
||||||
| labelText | No | -- | <code>{labelText}</code> |
|
| labelText | No | -- | <code>{labelText}</code> |
|
||||||
| shortcutText | No | -- | <code>{shortcutText}</code> |
|
| shortcutText | No | -- | <code>{shortcutText}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -1259,21 +1259,21 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
|
| files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
|
||||||
| status | No | <code>let</code> | No | <code>"uploading" | "edit" | "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
|
| status | No | <code>let</code> | No | <code>"uploading" | "edit" | "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the file uploader |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the file uploader |
|
||||||
| accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types |
|
| accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types |
|
||||||
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
|
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
|
||||||
| clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files |
|
| clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files |
|
||||||
| labelTitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label title.<br />Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) |
|
| labelTitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label title.<br />Alternatively, use the named slot "labelTitle" (e.g., <code><code></code><span slot="labelTitle"><code></code></code>...<code><code></code></span><code></code></code>) |
|
||||||
| labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description.<br />Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) |
|
| labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description.<br />Alternatively, use the named slot "labelDescription" (e.g., <code><code></code><span slot="labelDescription"><code></code></code>...<code><code></code></span><code></code></code>) |
|
||||||
| kind | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["kind"]</code> | <code>"primary"</code> | Specify the kind of file uploader button |
|
| kind | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["kind"]</code> | <code>"primary"</code> | Specify the kind of file uploader button |
|
||||||
| size | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["size"]</code> | <code>"small"</code> | Specify the size of the file uploader button |
|
| size | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["size"]</code> | <code>"small"</code> | Specify the size of the file uploader button |
|
||||||
| buttonLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the button label |
|
| buttonLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the button label |
|
||||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Provide icon description"</code> | Specify the ARIA label used for the status icons |
|
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Provide icon description"</code> | Specify the ARIA label used for the status icons |
|
||||||
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the file button uploader input |
|
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the file button uploader input |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -1557,16 +1557,16 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| as | No | <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., <Grid let:props><header {...props}>...</header></Grid>) |
|
| as | No | <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., <code><Grid let:props></code><code><header {...props}></code>...<code></header></code><code></Grid></code>) |
|
||||||
| condensed | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
|
| condensed | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
|
||||||
| narrow | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant |
|
| narrow | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant |
|
||||||
| fullWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant |
|
| fullWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant |
|
||||||
| noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
| noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
||||||
| noGutterLeft | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
| noGutterLeft | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
||||||
| noGutterRight | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
| noGutterRight | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
||||||
| padding | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to all columns |
|
| padding | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to all columns |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -1589,12 +1589,12 @@ None.
|
||||||
| expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
|
| expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
|
||||||
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
|
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
|
||||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||||
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) |
|
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., <code><code></code><span slot="company"><code></code></code>...<code><code></code></span><code></code></code>) |
|
||||||
| platformName | No | <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>`) |
|
| platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., <code><code></code><span slot="platform"><code></code></code>...<code><code></code></span><code></code></code>) |
|
||||||
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
|
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
|
||||||
| expansionBreakpoint | No | <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 |
|
| expansionBreakpoint | No | <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 | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `<Menu size={20} />` |
|
| iconMenu | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to <code><code></code><Menu size={20} /><code></code></code> |
|
||||||
| iconClose | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to `<Close size={20} />` |
|
| iconClose | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to <code><code></code><Close size={20} /><code></code></code> |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -1615,24 +1615,24 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
|
| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||||
| isOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
|
| isOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
|
||||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to `<Switcher size={20} />` |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to <code><code></code><Switcher size={20} /><code></code></code> |
|
||||||
| closeIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to `<Close size={20} />` |
|
| closeIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to <code><code></code><Close size={20} /><code></code></code> |
|
||||||
| text | No | <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>`) |
|
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text.<br />Alternatively, use the named slot "text" (e.g., <code><code></code><div slot="text"><code></code></code>...<code><code></code></div><code></code></code>) |
|
||||||
| transition | No | <code>let</code> | No | <code>false | import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition |
|
| transition | No | <code>let</code> | No | <code>false | import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition |
|
||||||
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the panel from closing when clicking outside |
|
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the panel from closing when clicking outside |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------- |
|
| :-------- | :------ | :---- | :--------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| closeIcon | No | -- | <code><svelte:component this={closeIcon} size={20} /></code> |
|
| closeIcon | No | -- | <code><code><svelte:component this={closeIcon} size={20} /></code></code> |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} size={20} /></code> |
|
| icon | No | -- | <code><code><svelte:component this={icon} size={20} /></code></code> |
|
||||||
| text | No | -- | <code>{#if text}<span class:bx--header\_\_action-text={true}>{text}</span>{/if}</code> |
|
| text | No | -- | <code>{#if text}<code><span class:bx--header\_\_action-text={true}></code>{text}<code></span></code>{/if}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -1655,9 +1655,9 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :------------------------------------------------------------ |
|
| :-------- | :------ | :---- | :------------------------------------------------------------------------- |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} size={20} /></code> |
|
| icon | No | -- | <code><code><svelte:component this={icon} size={20} /></code></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -1838,9 +1838,9 @@ export interface HeaderSearchResult {
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :-------- | :------ | :---------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| -- | Yes | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text}<br /> {#if result.description}<span<br /> class:bx--header-search-menu-description={true}<br /> >– {result.description}</span<br /> >{/if}</code> |
|
| -- | Yes | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text}<br /> {#if result.description}<code><span<br /> class:bx--header-search-menu-description={true}<br /> ></code>– {result.description}<code></span<br /> ></code>{/if}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -1978,10 +1978,10 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :-------------------------------------------------- |
|
| :-------- | :------ | :---- | :--------------------------------------------------------------- |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} /></code> |
|
| icon | No | -- | <code><code><svelte:component this={icon} /></code></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -2611,27 +2611,27 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
|
| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
| menuRef | No | <code>let</code> | Yes | <code>null | HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
|
| menuRef | No | <code>let</code> | Yes | <code>null | HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
|
||||||
| buttonRef | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
|
| buttonRef | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
|
||||||
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `<OverflowMenuVertical />` |
|
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to <code><code></code><OverflowMenuVertical /><code></code></code> |
|
||||||
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
|
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
|
||||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
|
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
|
||||||
| direction | No | <code>let</code> | No | <code>"top" | "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
|
| direction | No | <code>let</code> | No | <code>"top" | "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
|
||||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||||
| flipped | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
|
| flipped | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
|
||||||
| menuOptionsClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the menu options class |
|
| menuOptionsClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the menu options class |
|
||||||
| iconClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the icon class |
|
| iconClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the icon class |
|
||||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
|
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| menu | No | -- | <code><svelte:component<br /> this={icon}<br /> aria-label={iconDescription}<br /> title={iconDescription}<br /> class="bx--overflow-menu\_\_icon {iconClass}"<br /> /></code> |
|
| menu | No | -- | <code><code><svelte:component<br /> this={icon}<br /> aria-label={iconDescription}<br /> title={iconDescription}<br /> class="bx--overflow-menu\_\_icon {iconClass}"<br /> /></code></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -2662,9 +2662,9 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :---------------------------------------------------------------------------------------------------------------- |
|
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
| -- | Yes | -- | <code><div class:bx--overflow-menu-options\_\_option-content={true}><br /> {text}<br /> </div></code> |
|
| -- | Yes | -- | <code><code><div class:bx--overflow-menu-options\_\_option-content={true}></code><br /> {text}<br /> <code></div></code></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -2922,9 +2922,9 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :------------------------------------------------------- | :---------------------------------------------------------------------- |
|
| :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------------------------------ |
|
||||||
| -- | Yes | <code>{ props: { class: "bx--progress-label" } } </code> | <code><p class:bx--progress-label={true}>{label}</p></code> |
|
| -- | Yes | <code>{ props: { class: "bx--progress-label" } } </code> | <code><code><p class:bx--progress-label={true}></code>{label}<code></p></code></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -3081,15 +3081,15 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| as | No | <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., <Row let:props><section {...props}>...</section></Row>) |
|
| as | No | <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., <code><Row let:props></code><code><section {...props}></code>...<code></section></code><code></Row></code>) |
|
||||||
| condensed | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
|
| condensed | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
|
||||||
| narrow | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant |
|
| narrow | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant |
|
||||||
| noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
| noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
||||||
| noGutterLeft | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
| noGutterLeft | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
||||||
| noGutterRight | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
| noGutterRight | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
||||||
| padding | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to all columns |
|
| padding | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to all columns |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -3105,24 +3105,24 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
|
| :------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||||
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
|
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
|
||||||
| value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
|
| value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
|
||||||
| size | No | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
|
| size | No | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
|
||||||
| searchClass | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
|
| searchClass | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
|
||||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
|
||||||
| expandable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
|
| expandable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
|
||||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
|
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
|
||||||
| autocomplete | No | <code>let</code> | No | <code>"on" | "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
|
| autocomplete | No | <code>let</code> | No | <code>"on" | "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
|
||||||
| autofocus | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
|
| autofocus | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
|
||||||
| closeButtonLabelText | No | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
|
| closeButtonLabelText | No | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
|
||||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `<Search />` |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to <code><code></code><Search /><code></code></code> |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -3377,10 +3377,10 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :-------------------------------------------------- |
|
| :-------- | :------ | :---- | :--------------------------------------------------------------- |
|
||||||
| -- | Yes | -- | <code>{text}</code> |
|
| -- | Yes | -- | <code>{text}</code> |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} /></code> |
|
| icon | No | -- | <code><code><svelte:component this={icon} /></code></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -3401,10 +3401,10 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :-------------------------------------------------- |
|
| :-------- | :------ | :---- | :--------------------------------------------------------------- |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} /></code> |
|
| icon | No | -- | <code><code><svelte:component this={icon} /></code></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -3503,27 +3503,27 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
|
| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
||||||
| value | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the value of the slider |
|
| value | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the value of the slider |
|
||||||
| max | No | <code>let</code> | No | <code>number</code> | <code>100</code> | Set the maximum slider value |
|
| max | No | <code>let</code> | No | <code>number</code> | <code>100</code> | Set the maximum slider value |
|
||||||
| maxLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the max value |
|
| maxLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the max value |
|
||||||
| min | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the minimum slider value |
|
| min | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the minimum slider value |
|
||||||
| minLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the min value |
|
| minLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the min value |
|
||||||
| step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Set the step value |
|
| step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Set the step value |
|
||||||
| stepMultiplier | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Set the step multiplier value |
|
| stepMultiplier | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Set the step multiplier value |
|
||||||
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to require a value |
|
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to require a value |
|
||||||
| inputType | No | <code>let</code> | No | <code>string</code> | <code>"number"</code> | Specify the input type |
|
| inputType | No | <code>let</code> | No | <code>string</code> | <code>"number"</code> | Specify the input type |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the slider |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the slider |
|
||||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||||
| hideTextInput | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the text input |
|
| hideTextInput | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the text input |
|
||||||
| fullWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the slider to span<br />the full width of its containing element. |
|
| fullWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the slider to span<br />the full width of its containing element. |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the slider div element |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the slider div element |
|
||||||
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) |
|
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., <code><code></code><span slot="labelText"><code></code></code>...<code><code></code></span><code></code></code>) |
|
||||||
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||||
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set a name for the slider element |
|
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set a name for the slider element |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -3728,13 +3728,13 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
|
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||||
| selected | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the switch to be selected |
|
| selected | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the switch to be selected |
|
||||||
| text | No | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the switch text.<br />Alternatively, use the "text" slot (e.g., `<span slot="text">...</span>`) |
|
| text | No | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the switch text.<br />Alternatively, use the "text" slot (e.g., <code><code></code><span slot="text"><code></code></code>...<code><code></code></span><code></code></code>) |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the switch |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the switch |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -3756,14 +3756,14 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
|
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the anchor HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the anchor HTML element |
|
||||||
| label | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tab label.<br />Alternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`) |
|
| label | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tab label.<br />Alternatively, use the default slot (e.g., <code><code></code><Tab><code></code></code><code><code></code><span><code></code></code>Label<code><code></code></span><code></code></code><code><code></code></Tab><code></code></code>) |
|
||||||
| href | No | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the href attribute |
|
| href | No | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the href attribute |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tab |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tab |
|
||||||
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -4016,10 +4016,10 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :----------------------------------------------------- | :-------------------------------------------------- |
|
| :-------- | :------ | :----------------------------------------------------- | :--------------------------------------------------------------- |
|
||||||
| -- | Yes | <code>{ props: { class: "bx--tag\_\_label" } } </code> | -- |
|
| -- | Yes | <code>{ props: { class: "bx--tag\_\_label" } } </code> | -- |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} /></code> |
|
| icon | No | -- | <code><code><svelte:component this={icon} /></code></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -4566,30 +4566,30 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
|
| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| refIcon | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
|
| refIcon | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
|
||||||
| refTooltip | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
|
| refTooltip | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
|
||||||
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
|
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
|
||||||
| align | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
|
| align | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
|
||||||
| direction | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
|
| direction | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
|
||||||
| hideIcon | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
|
| hideIcon | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
|
||||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `<Information />` |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to <code><code></code><Information /><code></code></code> |
|
||||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
|
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
|
||||||
| iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
|
| iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
|
||||||
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
|
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
|
||||||
| tooltipId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
|
| tooltipId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
|
||||||
| triggerId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
|
| triggerId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
|
||||||
| triggerText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text |
|
| triggerText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :---------- | :------ | :---- | :------------------------------------------------------------------ |
|
| :---------- | :------ | :---- | :------------------------------------------------------------------------------- |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} name={iconName} /></code> |
|
| icon | No | -- | <code><code><svelte:component this={icon} name={iconName} /></code></code> |
|
||||||
| triggerText | No | -- | <code>{triggerText}</code> |
|
| triggerText | No | -- | <code>{triggerText}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -4666,10 +4666,10 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :---------- | :------ | :---- | :-------------------------------------------------- |
|
| :---------- | :------ | :---- | :--------------------------------------------------------------- |
|
||||||
| -- | Yes | -- | <code><svelte:component this={icon} /></code> |
|
| -- | Yes | -- | <code><code><svelte:component this={icon} /></code></code> |
|
||||||
| tooltipText | No | -- | <code>{tooltipText}</code> |
|
| tooltipText | No | -- | <code>{tooltipText}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue