mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-17 03:01:25 +00:00
fix(types): improve formatting of prop comments (#1779)
This commit is contained in:
Eric Liu
GitHub
parent
239f1b10e5
commit
be763706ca
18 changed files with 170 additions and 158 deletions
|
|
@ -202,12 +202,12 @@
|
|||
|
||||
### Props
|
||||
|
||||
| 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 |
|
||||
| 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>) |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon |
|
||||
| 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 |
|
||||
| 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>`) |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -534,26 +534,26 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| 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 |
|
||||
| showMoreLess | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
|
||||
| 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 |
|
||||
| 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 />You must use the `code` prop to copy the code |
|
||||
| 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> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
|
||||
| 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 |
|
||||
| wrapText | No | <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 | 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| showLessText | No | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
|
||||
| showMoreText | No | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
|
||||
| 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 |
|
||||
| showMoreLess | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
|
||||
| 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 |
|
||||
| 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. |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -841,18 +841,18 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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>) |
|
||||
| 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>) |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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>`) |
|
||||
| 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>`) |
|
||||
| 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
|
||||
|
||||
|
|
@ -1604,15 +1604,15 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| 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 |
|
||||
| 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} />` |
|
||||
| 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} />` |
|
||||
| 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>) |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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} />` |
|
||||
| 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} />` |
|
||||
| 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>`) |
|
||||
| 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 |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2638,17 +2638,17 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| 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 |
|
||||
| primaryFocus | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if the item should be focused when opening the menu |
|
||||
| text | No | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the item text<br />Alternatively, use the default slot for a custom element |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the `href` attribute if the item is a link |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the item |
|
||||
| hasDivider | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to include a divider |
|
||||
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
| requireTitle | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to omit the button `title` attribute |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||
| 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 |
|
||||
| primaryFocus | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if the item should be focused when opening the menu |
|
||||
| text | No | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the item text.<br />Alternatively, use the default slot |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the `href` attribute if the item is a link |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the item |
|
||||
| hasDivider | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to include a divider |
|
||||
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
| requireTitle | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to omit the button `title` attribute |
|
||||
| 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
|
||||
|
||||
|
|
@ -3488,27 +3488,27 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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>) |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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>`) |
|
||||
| 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 |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3712,13 +3712,13 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| 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 |
|
||||
| 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>) |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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>`) |
|
||||
| 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 |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3740,14 +3740,14 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| 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 |
|
||||
| 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>) |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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>`) |
|
||||
| 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 |
|
||||
| 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 |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue