mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
feat(slider): add fullWidth prop (#1354)
The `bx--slider` class in the `Slider` component has max-width of `40rem`. Because `$$restProps` is spread to the top-level `div` element in `Slider`, the only way to override the style is to do so globally:
```css
:global(.bx--slider-container) {
width: 100%;
}
:global(.bx--slider) {
max-width: none;
}
```
This adds a `fullWidth` prop that sets a full width style using inline style attributes.
This commit is contained in:
metonym
GitHub
parent
a86aa5d363
commit
1ccdf64504
6 changed files with 57 additions and 20 deletions
|
|
@ -3468,25 +3468,26 @@ 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set a name for the slider element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -11074,6 +11074,18 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "fullWidth",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` for the slider to span\nthe full width of its containing element.",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"kind": "let",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,12 @@ components: ["Slider", "SliderSkeleton"]
|
|||
|
||||
<Slider />
|
||||
|
||||
### Full width
|
||||
|
||||
Set `fullWidth` to `true` for the slider to span the full width of its containing element.
|
||||
|
||||
<Slider fullWidth />
|
||||
|
||||
### Hidden text input
|
||||
|
||||
<Slider hideTextInput />
|
||||
|
|
|
|||
|
|
@ -35,6 +35,12 @@
|
|||
/** Set to `true` to hide the text input */
|
||||
export let hideTextInput = false;
|
||||
|
||||
/**
|
||||
* Set to `true` for the slider to span
|
||||
* the full width of its containing element.
|
||||
*/
|
||||
export let fullWidth = false;
|
||||
|
||||
/** Set an id for the slider div element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
|
|
@ -143,7 +149,10 @@
|
|||
{labelText}
|
||||
</slot>
|
||||
</label>
|
||||
<div class:bx--slider-container="{true}">
|
||||
<div
|
||||
class:bx--slider-container="{true}"
|
||||
style="{fullWidth ? 'width: 100%' : undefined}"
|
||||
>
|
||||
<span class:bx--slider__range-label="{true}">{minLabel || min}</span>
|
||||
<div
|
||||
bind:this="{ref}"
|
||||
|
|
@ -151,6 +160,7 @@
|
|||
tabindex="-1"
|
||||
class:bx--slider="{true}"
|
||||
class:bx--slider--disabled="{disabled}"
|
||||
style="{fullWidth ? 'max-width: none' : undefined}"
|
||||
on:mousedown="{startDragging}"
|
||||
on:mousedown="{startHolding}"
|
||||
on:touchstart="{startHolding}"
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
max="{990}"
|
||||
maxLabel="990 MB"
|
||||
value="{100}"
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<Slider
|
||||
|
|
|
|||
7
types/Slider/Slider.svelte.d.ts
vendored
7
types/Slider/Slider.svelte.d.ts
vendored
|
|
@ -75,6 +75,13 @@ export interface SliderProps
|
|||
*/
|
||||
hideTextInput?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the slider to span
|
||||
* the full width of its containing element.
|
||||
* @default false
|
||||
*/
|
||||
fullWidth?: boolean;
|
||||
|
||||
/**
|
||||
* Set an id for the slider div element
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue