mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +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:
parent
a86aa5d363
commit
1ccdf64504
6 changed files with 57 additions and 20 deletions
|
@ -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}"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue