mirror of
https://github.com/apache/superset.git
synced 2026-08-04 13:02:41 +00:00
feat(build): migrate from Prettier to Oxfmt for docs
Signed-off-by: hainenber <dotronghai96@gmail.com>
This commit is contained in:
hainenber
@@ -33,105 +33,106 @@ A slider input for selecting a value or range from a continuous or stepped inter
|
||||
<StoryWithControls
|
||||
component="Slider"
|
||||
props={{
|
||||
min: 0,
|
||||
max: 100,
|
||||
defaultValue: 70,
|
||||
step: 1,
|
||||
disabled: false,
|
||||
reverse: false,
|
||||
vertical: false,
|
||||
keyboard: true,
|
||||
dots: false,
|
||||
included: true
|
||||
}}
|
||||
min: 0,
|
||||
max: 100,
|
||||
defaultValue: 70,
|
||||
step: 1,
|
||||
disabled: false,
|
||||
reverse: false,
|
||||
vertical: false,
|
||||
keyboard: true,
|
||||
dots: false,
|
||||
included: true,
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "min",
|
||||
label: "Min",
|
||||
type: "number",
|
||||
description: "Minimum value of the slider."
|
||||
},
|
||||
{
|
||||
name: "max",
|
||||
label: "Max",
|
||||
type: "number",
|
||||
description: "Maximum value of the slider."
|
||||
},
|
||||
{
|
||||
name: "defaultValue",
|
||||
label: "Default Value",
|
||||
type: "number",
|
||||
description: "Initial value of the slider."
|
||||
},
|
||||
{
|
||||
name: "step",
|
||||
label: "Step",
|
||||
type: "number",
|
||||
description: "Step increment between values. Use null for marks-only mode."
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
label: "Disabled",
|
||||
type: "boolean",
|
||||
description: "Whether the slider is disabled."
|
||||
},
|
||||
{
|
||||
name: "reverse",
|
||||
label: "Reverse",
|
||||
type: "boolean",
|
||||
description: "Whether to reverse the slider direction."
|
||||
},
|
||||
{
|
||||
name: "vertical",
|
||||
label: "Vertical",
|
||||
type: "boolean",
|
||||
description: "Whether to display the slider vertically."
|
||||
},
|
||||
{
|
||||
name: "keyboard",
|
||||
label: "Keyboard",
|
||||
type: "boolean",
|
||||
description: "Whether keyboard arrow keys can control the slider."
|
||||
},
|
||||
{
|
||||
name: "dots",
|
||||
label: "Dots",
|
||||
type: "boolean",
|
||||
description: "Whether to show dots at each step mark."
|
||||
},
|
||||
{
|
||||
name: "included",
|
||||
label: "Included",
|
||||
type: "boolean",
|
||||
description: "Whether to highlight the filled portion of the track."
|
||||
},
|
||||
{
|
||||
name: "tooltipOpen",
|
||||
label: "Tooltip Open",
|
||||
type: "boolean",
|
||||
description: "Whether the value tooltip is always visible."
|
||||
},
|
||||
{
|
||||
name: "tooltipPosition",
|
||||
label: "Tooltip Position",
|
||||
type: "select",
|
||||
options: [
|
||||
"top",
|
||||
"left",
|
||||
"bottom",
|
||||
"right",
|
||||
"topLeft",
|
||||
"topRight",
|
||||
"bottomLeft",
|
||||
"bottomRight",
|
||||
"leftTop",
|
||||
"leftBottom",
|
||||
"rightTop",
|
||||
"rightBottom"
|
||||
],
|
||||
description: "Position of the value tooltip relative to the handle."
|
||||
}
|
||||
]}
|
||||
{
|
||||
name: 'min',
|
||||
label: 'Min',
|
||||
type: 'number',
|
||||
description: 'Minimum value of the slider.',
|
||||
},
|
||||
{
|
||||
name: 'max',
|
||||
label: 'Max',
|
||||
type: 'number',
|
||||
description: 'Maximum value of the slider.',
|
||||
},
|
||||
{
|
||||
name: 'defaultValue',
|
||||
label: 'Default Value',
|
||||
type: 'number',
|
||||
description: 'Initial value of the slider.',
|
||||
},
|
||||
{
|
||||
name: 'step',
|
||||
label: 'Step',
|
||||
type: 'number',
|
||||
description:
|
||||
'Step increment between values. Use null for marks-only mode.',
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
label: 'Disabled',
|
||||
type: 'boolean',
|
||||
description: 'Whether the slider is disabled.',
|
||||
},
|
||||
{
|
||||
name: 'reverse',
|
||||
label: 'Reverse',
|
||||
type: 'boolean',
|
||||
description: 'Whether to reverse the slider direction.',
|
||||
},
|
||||
{
|
||||
name: 'vertical',
|
||||
label: 'Vertical',
|
||||
type: 'boolean',
|
||||
description: 'Whether to display the slider vertically.',
|
||||
},
|
||||
{
|
||||
name: 'keyboard',
|
||||
label: 'Keyboard',
|
||||
type: 'boolean',
|
||||
description: 'Whether keyboard arrow keys can control the slider.',
|
||||
},
|
||||
{
|
||||
name: 'dots',
|
||||
label: 'Dots',
|
||||
type: 'boolean',
|
||||
description: 'Whether to show dots at each step mark.',
|
||||
},
|
||||
{
|
||||
name: 'included',
|
||||
label: 'Included',
|
||||
type: 'boolean',
|
||||
description: 'Whether to highlight the filled portion of the track.',
|
||||
},
|
||||
{
|
||||
name: 'tooltipOpen',
|
||||
label: 'Tooltip Open',
|
||||
type: 'boolean',
|
||||
description: 'Whether the value tooltip is always visible.',
|
||||
},
|
||||
{
|
||||
name: 'tooltipPosition',
|
||||
label: 'Tooltip Position',
|
||||
type: 'select',
|
||||
options: [
|
||||
'top',
|
||||
'left',
|
||||
'bottom',
|
||||
'right',
|
||||
'topLeft',
|
||||
'topRight',
|
||||
'bottomLeft',
|
||||
'bottomRight',
|
||||
'leftTop',
|
||||
'leftBottom',
|
||||
'rightTop',
|
||||
'rightBottom',
|
||||
],
|
||||
description: 'Position of the value tooltip relative to the handle.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
@@ -142,12 +143,7 @@ Edit the code below to experiment with the component:
|
||||
function Demo() {
|
||||
return (
|
||||
<div style={{ width: 400, padding: '20px 0' }}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
defaultValue={70}
|
||||
step={1}
|
||||
/>
|
||||
<Slider min={0} max={100} defaultValue={70} step={1} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -163,7 +159,12 @@ function RangeSliderDemo() {
|
||||
<Slider range defaultValue={[20, 70]} min={0} max={100} />
|
||||
<br />
|
||||
<h4>Draggable Track</h4>
|
||||
<Slider range={{ draggableTrack: true }} defaultValue={[30, 60]} min={0} max={100} />
|
||||
<Slider
|
||||
range={{ draggableTrack: true }}
|
||||
defaultValue={[30, 60]}
|
||||
min={0}
|
||||
max={100}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -202,8 +203,14 @@ function SteppedDemo() {
|
||||
<Slider min={0} max={100} defaultValue={30} step={10} dots />
|
||||
<br />
|
||||
<h4>Step = 25</h4>
|
||||
<Slider min={0} max={100} defaultValue={50} step={25} dots
|
||||
marks={{ 0: '0', 25: '25', 50: '50', 75: '75', 100: '100' }} />
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
defaultValue={50}
|
||||
step={25}
|
||||
dots
|
||||
marks={{ 0: '0', 25: '25', 50: '50', 75: '75', 100: '100' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -217,8 +224,13 @@ function VerticalDemo() {
|
||||
<div style={{ height: 300, display: 'flex', gap: 40, padding: '0 40px' }}>
|
||||
<Slider vertical defaultValue={30} />
|
||||
<Slider vertical range defaultValue={[20, 60]} />
|
||||
<Slider vertical defaultValue={50} dots step={10}
|
||||
marks={{ 0: '0', 50: '50', 100: '100' }} />
|
||||
<Slider
|
||||
vertical
|
||||
defaultValue={50}
|
||||
dots
|
||||
step={10}
|
||||
marks={{ 0: '0', 50: '50', 100: '100' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -226,18 +238,18 @@ function VerticalDemo() {
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `min` | `number` | `0` | Minimum value of the slider. |
|
||||
| `max` | `number` | `100` | Maximum value of the slider. |
|
||||
| `defaultValue` | `number` | `70` | Initial value of the slider. |
|
||||
| `step` | `number` | `1` | Step increment between values. Use null for marks-only mode. |
|
||||
| `disabled` | `boolean` | `false` | Whether the slider is disabled. |
|
||||
| `reverse` | `boolean` | `false` | Whether to reverse the slider direction. |
|
||||
| `vertical` | `boolean` | `false` | Whether to display the slider vertically. |
|
||||
| `keyboard` | `boolean` | `true` | Whether keyboard arrow keys can control the slider. |
|
||||
| `dots` | `boolean` | `false` | Whether to show dots at each step mark. |
|
||||
| `included` | `boolean` | `true` | Whether to highlight the filled portion of the track. |
|
||||
| Prop | Type | Default | Description |
|
||||
| -------------- | --------- | ------- | ------------------------------------------------------------ |
|
||||
| `min` | `number` | `0` | Minimum value of the slider. |
|
||||
| `max` | `number` | `100` | Maximum value of the slider. |
|
||||
| `defaultValue` | `number` | `70` | Initial value of the slider. |
|
||||
| `step` | `number` | `1` | Step increment between values. Use null for marks-only mode. |
|
||||
| `disabled` | `boolean` | `false` | Whether the slider is disabled. |
|
||||
| `reverse` | `boolean` | `false` | Whether to reverse the slider direction. |
|
||||
| `vertical` | `boolean` | `false` | Whether to display the slider vertically. |
|
||||
| `keyboard` | `boolean` | `true` | Whether keyboard arrow keys can control the slider. |
|
||||
| `dots` | `boolean` | `false` | Whether to show dots at each step mark. |
|
||||
| `included` | `boolean` | `true` | Whether to highlight the filled portion of the track. |
|
||||
|
||||
## Import
|
||||
|
||||
|
||||
Reference in New Issue
Block a user