mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
feat(slider): add hideLabel prop (#1777)
Closes #1682 Co-authored-by: siaikin <abc1310054026@outlook.com>
This commit is contained in:
Eric Liu
GitHub
parent
ad711cdb38
commit
baff07e012
5 changed files with 54 additions and 23 deletions
|
|
@ -3485,26 +3485,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 |
|
| 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>) |
|
||||||
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set a name for the slider element |
|
| 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
|
### Slots
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11215,7 +11215,7 @@
|
||||||
{
|
{
|
||||||
"name": "labelText",
|
"name": "labelText",
|
||||||
"kind": "let",
|
"kind": "let",
|
||||||
"description": "Specify the label text",
|
"description": "Specify the label text.\nAlternatively, use the \"labelText\" slot (e.g., <span slot=\"labelText\">...</span>)",
|
||||||
"type": "string",
|
"type": "string",
|
||||||
"value": "\"\"",
|
"value": "\"\"",
|
||||||
"isFunction": false,
|
"isFunction": false,
|
||||||
|
|
@ -11224,6 +11224,18 @@
|
||||||
"constant": false,
|
"constant": false,
|
||||||
"reactive": false
|
"reactive": false
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "hideLabel",
|
||||||
|
"kind": "let",
|
||||||
|
"description": "Set to `true` to visually hide the label text",
|
||||||
|
"type": "boolean",
|
||||||
|
"value": "false",
|
||||||
|
"isFunction": false,
|
||||||
|
"isFunctionDeclaration": false,
|
||||||
|
"isRequired": false,
|
||||||
|
"constant": false,
|
||||||
|
"reactive": false
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "name",
|
"name": "name",
|
||||||
"kind": "let",
|
"kind": "let",
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,10 @@ Set `fullWidth` to `true` for the slider to span the full width of its containin
|
||||||
|
|
||||||
<Slider labelText="Instances" fullWidth value={0} />
|
<Slider labelText="Instances" fullWidth value={0} />
|
||||||
|
|
||||||
|
## Hidden label
|
||||||
|
|
||||||
|
<Slider labelText="Instances" hideLabel value={0} />
|
||||||
|
|
||||||
## Hidden text input
|
## Hidden text input
|
||||||
|
|
||||||
<Slider labelText="Instances" hideTextInput value={0} />
|
<Slider labelText="Instances" hideTextInput value={0} />
|
||||||
|
|
|
||||||
|
|
@ -47,9 +47,15 @@
|
||||||
/** Set to `true` to indicate an invalid state */
|
/** Set to `true` to indicate an invalid state */
|
||||||
export let invalid = false;
|
export let invalid = false;
|
||||||
|
|
||||||
/** Specify the label text */
|
/**
|
||||||
|
* Specify the label text.
|
||||||
|
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
|
||||||
|
*/
|
||||||
export let labelText = "";
|
export let labelText = "";
|
||||||
|
|
||||||
|
/** Set to `true` to visually hide the label text */
|
||||||
|
export let hideLabel = false;
|
||||||
|
|
||||||
/** Set a name for the slider element */
|
/** Set a name for the slider element */
|
||||||
export let name = "";
|
export let name = "";
|
||||||
|
|
||||||
|
|
@ -145,6 +151,7 @@
|
||||||
id="{labelId}"
|
id="{labelId}"
|
||||||
class:bx--label="{true}"
|
class:bx--label="{true}"
|
||||||
class:bx--label--disabled="{disabled}"
|
class:bx--label--disabled="{disabled}"
|
||||||
|
class:bx--visually-hidden="{hideLabel}"
|
||||||
>
|
>
|
||||||
<slot name="labelText">
|
<slot name="labelText">
|
||||||
{labelText}
|
{labelText}
|
||||||
|
|
|
||||||
9
types/Slider/Slider.svelte.d.ts
vendored
9
types/Slider/Slider.svelte.d.ts
vendored
|
|
@ -96,11 +96,18 @@ export interface SliderProps extends RestProps {
|
||||||
invalid?: boolean;
|
invalid?: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specify the label text
|
* Specify the label text.
|
||||||
|
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
|
||||||
* @default ""
|
* @default ""
|
||||||
*/
|
*/
|
||||||
labelText?: string;
|
labelText?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `true` to visually hide the label text
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
hideLabel?: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set a name for the slider element
|
* Set a name for the slider element
|
||||||
* @default ""
|
* @default ""
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue