mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
✨ feat: migrate less to token for Slider (#42428)
* ✨ feat: migrate less to token for Slider * ✨ feat: update snap * ✨ feat: update style * ✨ feat: update style * ✨ feat: test ci * ✨ feat: test ci * ✨ feat: test ci * ✨ feat: test ci * ✨ feat: update * ✨ feat: update snap * ✨ feat: update * ✨ feat: update * ✨ feat: 删除未使用token * ✨ feat: update doc * ✨ feat: update dome * ✨ feat: update * ✨ feat: test ci * 📝 doc: update doc * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: add demo * ✨ feat: add demo * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * Apply suggestions from code review --------- Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
黑雨
GitHub
parent
cf961b2c8c
commit
4ae0d6bcf5
@ -141,6 +141,371 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/slider/demo/component-token.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-slider ant-slider-disabled ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="left: 0%; width: 30%;"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left: 30%; transform: translateX(-50%);"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; bottom: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track ant-slider-track-1"
|
||||
style="left: 20%; width: 30%;"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
class="ant-slider-handle ant-slider-handle-1"
|
||||
role="slider"
|
||||
style="left: 20%; transform: translateX(-50%);"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; bottom: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
20
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-slider-handle ant-slider-handle-2"
|
||||
role="slider"
|
||||
style="left: 50%; transform: translateX(-50%);"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; bottom: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
50
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display: inline-block; height: 300px; margin-left: 70px;"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="bottom: 0%; height: 30%;"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="bottom: 30%; transform: translateY(50%);"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display: inline-block; height: 300px; margin-left: 70px;"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track ant-slider-track-1"
|
||||
style="bottom: 20%; height: 30%;"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
class="ant-slider-handle ant-slider-handle-1"
|
||||
role="slider"
|
||||
style="bottom: 20%; transform: translateY(50%);"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
20
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-slider-handle ant-slider-handle-2"
|
||||
role="slider"
|
||||
style="bottom: 50%; transform: translateY(50%);"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
50
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display: inline-block; height: 300px; margin-left: 70px;"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical ant-slider-with-marks"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track ant-slider-track-1"
|
||||
style="bottom: 26%; height: 11%;"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
>
|
||||
<span
|
||||
class="ant-slider-dot"
|
||||
style="bottom: 0%; transform: translateY(50%);"
|
||||
/>
|
||||
<span
|
||||
class="ant-slider-dot ant-slider-dot-active"
|
||||
style="bottom: 26%; transform: translateY(50%);"
|
||||
/>
|
||||
<span
|
||||
class="ant-slider-dot ant-slider-dot-active"
|
||||
style="bottom: 37%; transform: translateY(50%);"
|
||||
/>
|
||||
<span
|
||||
class="ant-slider-dot"
|
||||
style="bottom: 100%; transform: translateY(50%);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="26"
|
||||
class="ant-slider-handle ant-slider-handle-1"
|
||||
role="slider"
|
||||
style="bottom: 26%; transform: translateY(50%);"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
26
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
class="ant-slider-handle ant-slider-handle-2"
|
||||
role="slider"
|
||||
style="bottom: 37%; transform: translateY(50%);"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
37
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-slider-mark"
|
||||
>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="bottom: 0%; transform: translateY(50%);"
|
||||
>
|
||||
0°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="bottom: 26%; transform: translateY(50%);"
|
||||
>
|
||||
26°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="bottom: 37%; transform: translateY(50%);"
|
||||
>
|
||||
37°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="bottom: 100%; transform: translateY(50%); color: rgb(255, 85, 0);"
|
||||
>
|
||||
<strong>
|
||||
100°C
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/slider/demo/draggableTrack.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-slider ant-slider-horizontal"
|
||||
|
||||
@ -84,6 +84,219 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/slider/demo/component-token.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-slider ant-slider-disabled ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="left:0%;width:30%"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left:30%;transform:translateX(-50%)"
|
||||
/>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track ant-slider-track-1"
|
||||
style="left:20%;width:30%"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
class="ant-slider-handle ant-slider-handle-1"
|
||||
role="slider"
|
||||
style="left:20%;transform:translateX(-50%)"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-slider-handle ant-slider-handle-2"
|
||||
role="slider"
|
||||
style="left:50%;transform:translateX(-50%)"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;height:300px;margin-left:70px"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="bottom:0%;height:30%"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="bottom:30%;transform:translateY(50%)"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;height:300px;margin-left:70px"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track ant-slider-track-1"
|
||||
style="bottom:20%;height:30%"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
class="ant-slider-handle ant-slider-handle-1"
|
||||
role="slider"
|
||||
style="bottom:20%;transform:translateY(50%)"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-slider-handle ant-slider-handle-2"
|
||||
role="slider"
|
||||
style="bottom:50%;transform:translateY(50%)"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;height:300px;margin-left:70px"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical ant-slider-with-marks"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track ant-slider-track-1"
|
||||
style="bottom:26%;height:11%"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
>
|
||||
<span
|
||||
class="ant-slider-dot"
|
||||
style="bottom:0%;transform:translateY(50%)"
|
||||
/>
|
||||
<span
|
||||
class="ant-slider-dot ant-slider-dot-active"
|
||||
style="bottom:26%;transform:translateY(50%)"
|
||||
/>
|
||||
<span
|
||||
class="ant-slider-dot ant-slider-dot-active"
|
||||
style="bottom:37%;transform:translateY(50%)"
|
||||
/>
|
||||
<span
|
||||
class="ant-slider-dot"
|
||||
style="bottom:100%;transform:translateY(50%)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="26"
|
||||
class="ant-slider-handle ant-slider-handle-1"
|
||||
role="slider"
|
||||
style="bottom:26%;transform:translateY(50%)"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
class="ant-slider-handle ant-slider-handle-2"
|
||||
role="slider"
|
||||
style="bottom:37%;transform:translateY(50%)"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-mark"
|
||||
>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="bottom:0%;transform:translateY(50%)"
|
||||
>
|
||||
0°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="bottom:26%;transform:translateY(50%)"
|
||||
>
|
||||
26°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="bottom:37%;transform:translateY(50%)"
|
||||
>
|
||||
37°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="bottom:100%;transform:translateY(50%);color:#f50"
|
||||
>
|
||||
<strong>
|
||||
100°C
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/slider/demo/draggableTrack.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-slider ant-slider-horizontal"
|
||||
|
||||
7
components/slider/demo/component-token.md
Normal file
7
components/slider/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
Component Token Debug.
|
||||
|
||||
## en-US
|
||||
|
||||
Component Token Debug.
|
||||
59
components/slider/demo/component-token.tsx
Normal file
59
components/slider/demo/component-token.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import { ConfigProvider, Slider } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
display: 'inline-block',
|
||||
height: 300,
|
||||
marginLeft: 70,
|
||||
};
|
||||
|
||||
const marks = {
|
||||
0: '0°C',
|
||||
26: '26°C',
|
||||
37: '37°C',
|
||||
100: {
|
||||
style: { color: '#f50' },
|
||||
label: <strong>100°C</strong>,
|
||||
},
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Slider: {
|
||||
controlSize: 20,
|
||||
railSize: 4,
|
||||
handleSize: 22,
|
||||
handleSizeHover: 18,
|
||||
dotSize: 8,
|
||||
handleLineWidth: 6,
|
||||
handleLineWidthHover: 2,
|
||||
railBg: '#9f3434',
|
||||
railHoverBg: '#8d2424',
|
||||
trackBg: '#b0b0ef',
|
||||
trackHoverBg: '#c77195',
|
||||
handleColor: '#e6f6a2',
|
||||
handleActiveColor: '#d22bc4',
|
||||
dotBorderColor: '#303030',
|
||||
dotActiveBorderColor: '#918542',
|
||||
trackBgDisabled: '#1a1b80',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Slider defaultValue={30} disabled />
|
||||
<Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />
|
||||
<div style={style}>
|
||||
<Slider vertical defaultValue={30} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<Slider vertical range step={10} defaultValue={[20, 50]} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<Slider vertical range marks={marks} defaultValue={[26, 37]} />
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -27,6 +27,7 @@ To input a value in a range.
|
||||
<code src="./demo/show-tooltip.tsx">Control visible of ToolTip</code>
|
||||
<code src="./demo/reverse.tsx">Reverse</code>
|
||||
<code src="./demo/draggableTrack.tsx">Draggable track</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -28,6 +28,7 @@ demo:
|
||||
<code src="./demo/show-tooltip.tsx">控制 ToolTip 的显示</code>
|
||||
<code src="./demo/reverse.tsx">反向</code>
|
||||
<code src="./demo/draggableTrack.tsx">范围可拖拽</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -19,6 +19,15 @@ export interface ComponentToken {
|
||||
handleLineWidth: number;
|
||||
handleLineWidthHover: number;
|
||||
dotSize: number;
|
||||
railBg: string;
|
||||
railHoverBg: string;
|
||||
trackBg: string;
|
||||
trackHoverBg: string;
|
||||
handleColor: string;
|
||||
handleActiveColor: string;
|
||||
dotBorderColor: string;
|
||||
dotActiveBorderColor: string;
|
||||
trackBgDisabled: string;
|
||||
}
|
||||
|
||||
interface SliderToken extends FullToken<'Slider'> {
|
||||
@ -49,25 +58,25 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
|
||||
|
||||
[`${componentCls}-rail`]: {
|
||||
position: 'absolute',
|
||||
backgroundColor: token.colorFillTertiary,
|
||||
backgroundColor: token.railBg,
|
||||
borderRadius: token.borderRadiusXS,
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
},
|
||||
|
||||
[`${componentCls}-track`]: {
|
||||
position: 'absolute',
|
||||
backgroundColor: token.colorPrimaryBorder,
|
||||
backgroundColor: token.trackBg,
|
||||
borderRadius: token.borderRadiusXS,
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
[`${componentCls}-rail`]: {
|
||||
backgroundColor: token.colorFillSecondary,
|
||||
backgroundColor: token.railHoverBg,
|
||||
},
|
||||
|
||||
[`${componentCls}-track`]: {
|
||||
backgroundColor: token.colorPrimaryBorderHover,
|
||||
backgroundColor: token.trackHoverBg,
|
||||
},
|
||||
|
||||
[`${componentCls}-dot`]: {
|
||||
@ -79,7 +88,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
|
||||
},
|
||||
|
||||
[`${componentCls}-dot-active`]: {
|
||||
borderColor: token.colorPrimary,
|
||||
borderColor: token.dotActiveBorderColor,
|
||||
},
|
||||
},
|
||||
|
||||
@ -112,7 +121,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
|
||||
width: token.handleSize,
|
||||
height: token.handleSize,
|
||||
backgroundColor: token.colorBgElevated,
|
||||
boxShadow: `0 0 0 ${token.handleLineWidth}px ${token.colorPrimaryBorder}`,
|
||||
boxShadow: `0 0 0 ${token.handleLineWidth}px ${token.handleColor}`,
|
||||
borderRadius: '50%',
|
||||
cursor: 'pointer',
|
||||
transition: `
|
||||
@ -139,7 +148,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
boxShadow: `0 0 0 ${token.handleLineWidthHover}px ${token.colorPrimary}`,
|
||||
boxShadow: `0 0 0 ${token.handleLineWidthHover}px ${token.handleActiveColor}`,
|
||||
width: token.handleSizeHover,
|
||||
height: token.handleSizeHover,
|
||||
insetInlineStart: (token.handleSize - token.handleSizeHover) / 2,
|
||||
@ -178,14 +187,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
|
||||
width: dotSize,
|
||||
height: dotSize,
|
||||
backgroundColor: token.colorBgElevated,
|
||||
border: `${token.handleLineWidth}px solid ${token.colorBorderSecondary}`,
|
||||
border: `${token.handleLineWidth}px solid ${token.dotBorderColor}`,
|
||||
borderRadius: '50%',
|
||||
cursor: 'pointer',
|
||||
transition: `border-color ${token.motionDurationSlow}`,
|
||||
pointerEvents: 'auto',
|
||||
|
||||
'&-active': {
|
||||
borderColor: token.colorPrimaryBorder,
|
||||
borderColor: token.dotActiveBorderColor,
|
||||
},
|
||||
},
|
||||
|
||||
@ -193,18 +202,18 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
|
||||
cursor: 'not-allowed',
|
||||
|
||||
[`${componentCls}-rail`]: {
|
||||
backgroundColor: `${token.colorFillSecondary} !important`,
|
||||
backgroundColor: `${token.railBg} !important`,
|
||||
},
|
||||
|
||||
[`${componentCls}-track`]: {
|
||||
backgroundColor: `${token.colorTextDisabled} !important`,
|
||||
backgroundColor: `${token.trackBgDisabled} !important`,
|
||||
},
|
||||
|
||||
[`
|
||||
${componentCls}-dot
|
||||
`]: {
|
||||
backgroundColor: token.colorBgElevated,
|
||||
borderColor: token.colorTextDisabled,
|
||||
borderColor: token.trackBgDisabled,
|
||||
boxShadow: 'none',
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
@ -339,6 +348,15 @@ export default genComponentStyleHook(
|
||||
dotSize: 8,
|
||||
handleLineWidth,
|
||||
handleLineWidthHover,
|
||||
railBg: token.colorFillTertiary,
|
||||
railHoverBg: token.colorFillSecondary,
|
||||
trackBg: token.colorPrimaryBorder,
|
||||
trackHoverBg: token.colorPrimaryBorderHover,
|
||||
handleColor: token.colorPrimaryBorder,
|
||||
handleActiveColor: token.colorPrimary,
|
||||
dotBorderColor: token.colorBorderSecondary,
|
||||
dotActiveBorderColor: token.colorPrimaryBorder,
|
||||
trackBgDisabled: token.colorBgContainerDisabled,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
@ -389,9 +389,33 @@ export default App;
|
||||
| `@skeleton-to-color` | `gradientToColor` | - |
|
||||
| `@skeleton-paragraph-margin-top` | `paragraphMarginTop` | - |
|
||||
| `@skeleton-paragraph-li-height` | `paragraphLiHeight` | - |
|
||||
| `@skeleton-paragraph-li-margin-top` | - | 由于样式变化已废弃 |
|
||||
| `@skeleton-paragraph-li-margin-top` | - | Deprecated for style change |
|
||||
|
||||
<!-- ### Slider -->
|
||||
### Slider
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@slider-margin` | - | Could be customized with `className` or `style` |
|
||||
| `@slider-rail-background-color` | `railBg` | - |
|
||||
| `@slider-rail-background-color-hover` | `railHoverBg` | - |
|
||||
| `@slider-track-background-color` | `trackBg` | - |
|
||||
| `@slider-track-background-color-hover` | `trackHoverBg` | - |
|
||||
| `@slider-handle-border-width` | `handleLineWidth` | - |
|
||||
| `@slider-handle-background-color` | - | Deprecated |
|
||||
| `@slider-handle-color` | `handleColor` | - |
|
||||
| `@slider-handle-color-hover` | `handleActiveColor` | - |
|
||||
| `@slider-handle-color-focus` | `handleActiveColor` | - |
|
||||
| `@slider-handle-color-focus-shadow` | - Deprecated |
|
||||
| `@slider-handle-color-tooltip-open` | `handleActiveColor` | - |
|
||||
| `@slider-handle-size` | `handleSize` | - |
|
||||
| `@slider-handle-margin-top` | - | Deprecated |
|
||||
| `@slider-handle-margin-left` | - | Deprecated |
|
||||
| `@slider-handle-shadow` | - | Deprecated |
|
||||
| `@slider-dot-border-color` | `dotBorderColor` | - |
|
||||
| `@slider-dot-border-color-active` | `dotActiveBorderColor` | - |
|
||||
| `@slider-disabled-color` | `trackBgDisabled` | - |
|
||||
| `@slider-disabled-background-color` | - | Deprecated |
|
||||
|
||||
### Statistic
|
||||
|
||||
|
||||
@ -388,7 +388,31 @@ Mentions 提及
|
||||
| `@skeleton-paragraph-li-height` | `paragraphLiHeight` | - |
|
||||
| `@skeleton-paragraph-li-margin-top` | - | 由于样式变化已废弃 |
|
||||
|
||||
<!-- ### Slider 滑动输入条 -->
|
||||
### Slider 滑动输入条
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@slider-margin` | - | 可由 `className` 或 `style` 直接修改 |
|
||||
| `@slider-rail-background-color` | `railBg` | - |
|
||||
| `@slider-rail-background-color-hover` | `railHoverBg` | - |
|
||||
| `@slider-track-background-color` | `trackBg` | - |
|
||||
| `@slider-track-background-color-hover` | `trackHoverBg` | - |
|
||||
| `@slider-handle-border-width` | `handleLineWidth` | - |
|
||||
| `@slider-handle-background-color` | - | 已废弃 |
|
||||
| `@slider-handle-color` | `handleColor` | - |
|
||||
| `@slider-handle-color-hover` | `handleActiveColor` | - |
|
||||
| `@slider-handle-color-focus` | `handleActiveColor` | - |
|
||||
| `@slider-handle-color-focus-shadow` | - | 已废弃 |
|
||||
| `@slider-handle-color-tooltip-open` | `handleActiveColor` | - |
|
||||
| `@slider-handle-size` | `handleSize` | - |
|
||||
| `@slider-handle-margin-top` | - | 已废弃 |
|
||||
| `@slider-handle-margin-left` | - | 已废弃 |
|
||||
| `@slider-handle-shadow` | - | 已废弃 |
|
||||
| `@slider-dot-border-color` | `dotBorderColor` | - |
|
||||
| `@slider-dot-border-color-active` | `dotActiveBorderColor` | - |
|
||||
| `@slider-disabled-color` | `trackBgDisabled` | - |
|
||||
| `@slider-disabled-background-color` | - | 已废弃 |
|
||||
|
||||
### Statistic 统计数值
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user