mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(slider): add fullWidth prop (#1354)

Browse source 
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 2022-06-18 12:47:10 -07:00 • committed by GitHub
commit 1ccdf64504
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 57 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

39
COMPONENT_INDEX.md
View file

@ -3468,25 +3468,26 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ------------------------------------------ |
| ref | No | <code>let</code> | Yes | <code>null &#124; 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 &#124; 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