Slider滑动输入条

滑动型输入器，展示当前值和可选范围。

何时使用

当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。

代码演示

Disabled:

基本

基本滑动条。当 range 为 true 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态。

TypeScript
JavaScript
import React, { useState } from 'react';
import { Slider, Switch } from 'antd';

const App: React.FC = () => {
  const [disabled, setDisabled] = useState(false);

  const onChange = (checked: boolean) => {
    setDisabled(checked);
  };

  return (
    <>
      <Slider defaultValue={30} disabled={disabled} />
      <Slider range defaultValue={[20, 50]} disabled={disabled} />
      Disabled: <Switch size="small" checked={disabled} onChange={onChange} />
    </>
  );
};

export default App;

带 icon 的滑块

滑块左右可以设置图标来表达业务含义。

TypeScript
JavaScript
import React, { useState } from 'react';
import { FrownOutlined, SmileOutlined } from '@ant-design/icons';
import { Slider } from 'antd';

interface IconSliderProps {
  max: number;
  min: number;
}

const IconSlider: React.FC<IconSliderProps> = (props) => {
  const { max, min } = props;
  const [value, setValue] = useState(0);

  const mid = Number(((max - min) / 2).toFixed(5));
  const preColorCls = value >= mid ? '' : 'icon-wrapper-active';
  const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';

  return (
    <div className="icon-wrapper">
      <FrownOutlined className={preColorCls} />
      <Slider {...props} onChange={setValue} value={value} />
      <SmileOutlined className={nextColorCls} />
    </div>
  );
};

const App: React.FC = () => <IconSlider min={0} max={20} />;

export default App;
.icon-wrapper {
  position: relative;
  padding: 0px 30px;
}

.icon-wrapper .anticon {
  position: absolute;
  top: -2px;
  width: 16px;
  height: 16px;
  color: rgba(0, 0, 0, 0.25);
  font-size: 16px;
  line-height: 1;
}

.icon-wrapper .icon-wrapper-active {
  color: rgba(0, 0, 0, 0.45);
}

.icon-wrapper .anticon:first-child {
  left: 0;
}

.icon-wrapper .anticon:last-child {
  right: 0;
}

事件

当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。在 onmouseup 时，会触发 onAfterChange 事件，并把当前值作为参数传入。

TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';

const onChange = (value: number | [number, number]) => {
  console.log('onChange: ', value);
};

const onAfterChange = (value: number | [number, number]) => {
  console.log('onAfterChange: ', value);
};

const App: React.FC = () => (
  <>
    <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} />
    <Slider
      range
      step={10}
      defaultValue={[20, 50]}
      onChange={onChange}
      onAfterChange={onAfterChange}
    />
  </>
);

export default App;

0°C26°C37°C100°C

垂直

垂直方向的 Slider。

TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';
import type { SliderMarks } from 'antd/es/slider';

const style: React.CSSProperties = {
  display: 'inline-block',
  height: 300,
  marginLeft: 70,
};

const marks: SliderMarks = {
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: {
    style: { color: '#f50' },
    label: <strong>100°C</strong>,
  },
};

const App: React.FC = () => (
  <>
    <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>
  </>
);

export default App;

Reversed:

反向

设置 reverse 可以将滑动条置反。

TypeScript
JavaScript
import React, { useState } from 'react';
import { Slider, Switch } from 'antd';

const App: React.FC = () => {
  const [reverse, setReverse] = useState(true);

  return (
    <>
      <Slider defaultValue={30} reverse={reverse} />
      <Slider range defaultValue={[20, 50]} reverse={reverse} />
      Reversed: <Switch size="small" checked={reverse} onChange={setReverse} />
    </>
  );
};

export default App;

带输入框的滑块

和数字输入框组件保持同步。

TypeScript
JavaScript
import React, { useState } from 'react';
import { Col, InputNumber, Row, Slider, Space } from 'antd';

const IntegerStep: React.FC = () => {
  const [inputValue, setInputValue] = useState(1);

  const onChange = (newValue: number) => {
    setInputValue(newValue);
  };

  return (
    <Row>
      <Col span={12}>
        <Slider
          min={1}
          max={20}
          onChange={onChange}
          value={typeof inputValue === 'number' ? inputValue : 0}
        />
      </Col>
      <Col span={4}>
        <InputNumber
          min={1}
          max={20}
          style={{ margin: '0 16px' }}
          value={inputValue}
          onChange={onChange}
        />
      </Col>
    </Row>
  );
};

const DecimalStep: React.FC = () => {
  const [inputValue, setInputValue] = useState(0);

  const onChange = (value: number) => {
    if (isNaN(value)) {
      return;
    }
    setInputValue(value);
  };

  return (
    <Row>
      <Col span={12}>
        <Slider
          min={0}
          max={1}
          onChange={onChange}
          value={typeof inputValue === 'number' ? inputValue : 0}
          step={0.01}
        />
      </Col>
      <Col span={4}>
        <InputNumber
          min={0}
          max={1}
          style={{ margin: '0 16px' }}
          step={0.01}
          value={inputValue}
          onChange={onChange}
        />
      </Col>
    </Row>
  );
};

const App: React.FC = () => (
  <Space style={{ width: '100%' }} direction="vertical">
    <IntegerStep />
    <DecimalStep />
  </Space>
);

export default App;

自定义提示

使用 tooltip.formatter 可以格式化 Tooltip 的内容，设置 tooltip.formatter={null}，则隐藏 Tooltip。

TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';

const formatter = (value: number) => `${value}%`;

const App: React.FC = () => (
  <>
    <Slider tooltip={{ formatter }} />
    <Slider tooltip={{ formatter: null }} />
  </>
);

export default App;

included=true

0°C26°C37°C100°C

included=false

0°C26°C37°C100°C

marks & step

0°C26°C37°C100°C

step=null

0°C26°C37°C100°C

带标签的滑块

使用 marks 属性标注分段式滑块，使用 value / defaultValue 指定滑块位置。当 included=false 时，表明不同标记间为并列关系。当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。

TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';
import type { SliderMarks } from 'antd/es/slider';

const marks: SliderMarks = {
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: {
    style: {
      color: '#f50',
    },
    label: <strong>100°C</strong>,
  },
};

const App: React.FC = () => (
  <>
    <h4>included=true</h4>
    <Slider marks={marks} defaultValue={37} />
    <Slider range marks={marks} defaultValue={[26, 37]} />

    <h4>included=false</h4>
    <Slider marks={marks} included={false} defaultValue={37} />

    <h4>marks & step</h4>
    <Slider marks={marks} step={10} defaultValue={37} />

    <h4>step=null</h4>
    <Slider marks={marks} step={null} defaultValue={37} />
  </>
);

export default App;
#components-slider-demo-mark h4 {
  margin: 0 0 16px;
}
#components-slider-demo-mark .ant-slider-with-marks {
  margin-bottom: 44px;
}

控制 ToolTip 的显示

当 tooltip.open 为 true 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。

TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';

const App: React.FC = () => <Slider defaultValue={30} tooltip={{ open: true }} />;

export default App;

范围可拖拽

可以设置 range.draggableTrack，使得范围刻度整体可拖拽。

TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';

const App: React.FC = () => <Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />;

export default App;

API

参数	说明	类型	默认值	版本
allowClear	支持清除, 单选模式有效	boolean	false
defaultValue	设置初始取值。当 `range` 为 false 时，使用 number，否则用 [number, number]	number \| [number, number]	0 \| [0, 0]
disabled	值为 true 时，滑块为禁用状态	boolean	false
keyboard	支持使用键盘操作 handler	boolean	true	5.2.0+
dots	是否只能拖拽到刻度上	boolean	false
included	`marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列	boolean	true
marks	刻度标记，key 的类型必须为 `number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式	object	{ number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } }
max	最大值	number	100
min	最小值	number	0
range	双滑块模式	boolean \| range	false
reverse	反向坐标轴	boolean	false
step	步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分	number \| null	1
tooltip	设置 Tooltip 相关属性	tooltip	-	4.23.0
value	设置当前取值。当 `range` 为 false 时，使用 number，否则用 [number, number]	number \| [number, number]	-
vertical	值为 true 时，Slider 为垂直方向	boolean	false
onAfterChange	与 `onmouseup` 触发时机一致，把当前值作为参数传入	(value) => void	-
onChange	当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入	(value) => void	-

range

参数	说明	类型	默认值	版本
draggableTrack	范围刻度是否可被拖拽	boolean	false	4.10.0

参数	说明	类型	默认值	版本
open	值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时	boolean	-	4.23.0
placement	设置 Tooltip 展示位置。参考 Tooltip	string	-	4.23.0
getPopupContainer	Tooltip 渲染父节点，默认渲染到 body 上	(triggerNode) => HTMLElement	() => document.body	4.23.0
formatter	Slider 会把当前值传给 `formatter`，并在 Tooltip 中显示 `formatter` 的返回值，若为 null，则隐藏 Tooltip	value => ReactNode \| null	IDENTITY	4.23.0

方法

名称	描述	版本
blur()	移除焦点
focus()	获取焦点

Design Token

Global Token

Token 名称	描述	类型	默认值
colorBgContainer	组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。	string	#ffffff
colorBgElevated	浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。	string	#ffffff
colorBorderSecondary	比默认使用的边框色要浅一级，此颜色和 colorSplit 的颜色一致。使用的是实色。	string	#f0f0f0
colorFillContentHover	控制内容区域背景色在鼠标悬停时的样式。	string	rgba(0, 0, 0, 0.15)
colorFillSecondary	二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。	string	rgba(0, 0, 0, 0.06)
colorFillTertiary	三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。	string	rgba(0, 0, 0, 0.04)
colorPrimary	品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义	string	#1677ff
colorPrimaryBorder	主色梯度下的描边用色，用在 Slider 等组件的描边上。	string	#91caff
colorPrimaryBorderHover	主色梯度下的描边用色的悬浮态，Slider 、Button 等组件的描边 Hover 时会使用。	string	#69b1ff
colorText	最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。	string	rgba(0, 0, 0, 0.88)
colorTextDescription	控制文本描述字体颜色。	string	rgba(0, 0, 0, 0.45)
colorTextDisabled	控制禁用状态下的字体颜色。	string	rgba(0, 0, 0, 0.25)
borderRadiusXS	XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。	number	2
controlHeight	Ant Design 中按钮和输入框等基础控件的高度	number	32
controlHeightLG	较高的组件高度	number	40
controlHeightSM	较小的组件高度	number	24
fontFamily	Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
lineHeight	文本行高	number	1.5714285714285714
lineWidth	用于控制组件边框、分割线等的宽度	number	1
motionDurationMid	动效播放速度，中速。用于中型元素动画交互	string	0.2s
motionDurationSlow	动效播放速度，慢速。用于大型元素如面板动画交互	string	0.3s

import React, { useState } from 'react'; import { Slider, Switch } from 'antd'; const App: React.FC = () => { const [disabled, setDisabled] = useState(false); const onChange = (checked: boolean) => { setDisabled(checked); }; return ( <> <Slider defaultValue={30} disabled={disabled} /> <Slider range defaultValue={[20, 50]} disabled={disabled} /> Disabled: <Switch size="small" checked={disabled} onChange={onChange} /> </> ); }; export default App;

import React, { useState } from 'react'; import { FrownOutlined, SmileOutlined } from '@ant-design/icons'; import { Slider } from 'antd'; interface IconSliderProps { max: number; min: number; } const IconSlider: React.FC<IconSliderProps> = (props) => { const { max, min } = props; const [value, setValue] = useState(0); const mid = Number(((max - min) / 2).toFixed(5)); const preColorCls = value >= mid ? '' : 'icon-wrapper-active'; const nextColorCls = value >= mid ? 'icon-wrapper-active' : ''; return ( <div className="icon-wrapper"> <FrownOutlined className={preColorCls} /> <Slider {...props} onChange={setValue} value={value} /> <SmileOutlined className={nextColorCls} /> </div> ); }; const App: React.FC = () => <IconSlider min={0} max={20} />; export default App;

.icon-wrapper { position: relative; padding: 0px 30px; } .icon-wrapper .anticon { position: absolute; top: -2px; width: 16px; height: 16px; color: rgba(0, 0, 0, 0.25); font-size: 16px; line-height: 1; } .icon-wrapper .icon-wrapper-active { color: rgba(0, 0, 0, 0.45); } .icon-wrapper .anticon:first-child { left: 0; } .icon-wrapper .anticon:last-child { right: 0; }

import React from 'react'; import { Slider } from 'antd'; const onChange = (value: number | [number, number]) => { console.log('onChange: ', value); }; const onAfterChange = (value: number | [number, number]) => { console.log('onAfterChange: ', value); }; const App: React.FC = () => ( <> <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} /> <Slider range step={10} defaultValue={[20, 50]} onChange={onChange} onAfterChange={onAfterChange} /> </> ); export default App;

import React from 'react'; import { Slider } from 'antd'; import type { SliderMarks } from 'antd/es/slider'; const style: React.CSSProperties = { display: 'inline-block', height: 300, marginLeft: 70, }; const marks: SliderMarks = { 0: '0°C', 26: '26°C', 37: '37°C', 100: { style: { color: '#f50' }, label: <strong>100°C</strong>, }, }; const App: React.FC = () => ( <> <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> </> ); export default App;

import React, { useState } from 'react'; import { Slider, Switch } from 'antd'; const App: React.FC = () => { const [reverse, setReverse] = useState(true); return ( <> <Slider defaultValue={30} reverse={reverse} /> <Slider range defaultValue={[20, 50]} reverse={reverse} /> Reversed: <Switch size="small" checked={reverse} onChange={setReverse} /> </> ); }; export default App;

import React, { useState } from 'react'; import { Col, InputNumber, Row, Slider, Space } from 'antd'; const IntegerStep: React.FC = () => { const [inputValue, setInputValue] = useState(1); const onChange = (newValue: number) => { setInputValue(newValue); }; return ( <Row> <Col span={12}> <Slider min={1} max={20} onChange={onChange} value={typeof inputValue === 'number' ? inputValue : 0} /> </Col> <Col span={4}> <InputNumber min={1} max={20} style={{ margin: '0 16px' }} value={inputValue} onChange={onChange} /> </Col> </Row> ); }; const DecimalStep: React.FC = () => { const [inputValue, setInputValue] = useState(0); const onChange = (value: number) => { if (isNaN(value)) { return; } setInputValue(value); }; return ( <Row> <Col span={12}> <Slider min={0} max={1} onChange={onChange} value={typeof inputValue === 'number' ? inputValue : 0} step={0.01} /> </Col> <Col span={4}> <InputNumber min={0} max={1} style={{ margin: '0 16px' }} step={0.01} value={inputValue} onChange={onChange} /> </Col> </Row> ); }; const App: React.FC = () => ( <Space style={{ width: '100%' }} direction="vertical"> <IntegerStep /> <DecimalStep /> </Space> ); export default App;

import React from 'react'; import { Slider } from 'antd'; const formatter = (value: number) => `${value}%`; const App: React.FC = () => ( <> <Slider tooltip={{ formatter }} /> <Slider tooltip={{ formatter: null }} /> </> ); export default App;

import React from 'react'; import { Slider } from 'antd'; import type { SliderMarks } from 'antd/es/slider'; const marks: SliderMarks = { 0: '0°C', 26: '26°C', 37: '37°C', 100: { style: { color: '#f50', }, label: <strong>100°C</strong>, }, }; const App: React.FC = () => ( <> <h4>included=true</h4> <Slider marks={marks} defaultValue={37} /> <Slider range marks={marks} defaultValue={[26, 37]} /> <h4>included=false</h4> <Slider marks={marks} included={false} defaultValue={37} /> <h4>marks & step</h4> <Slider marks={marks} step={10} defaultValue={37} /> <h4>step=null</h4> <Slider marks={marks} step={null} defaultValue={37} /> </> ); export default App;

API

参数	说明	类型	默认值	版本
allowClear	支持清除, 单选模式有效	boolean	false
defaultValue	设置初始取值。当 `range` 为 false 时，使用 number，否则用 [number, number]	number \| [number, number]	0 \| [0, 0]
disabled	值为 true 时，滑块为禁用状态	boolean	false
keyboard	支持使用键盘操作 handler	boolean	true	5.2.0+
dots	是否只能拖拽到刻度上	boolean	false
included	`marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列	boolean	true
marks	刻度标记，key 的类型必须为 `number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式	object	{ number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } }
max	最大值	number	100
min	最小值	number	0
range	双滑块模式	boolean \| range	false
reverse	反向坐标轴	boolean	false
step	步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分	number \| null	1
tooltip	设置 Tooltip 相关属性	tooltip	-	4.23.0
value	设置当前取值。当 `range` 为 false 时，使用 number，否则用 [number, number]	number \| [number, number]	-
vertical	值为 true 时，Slider 为垂直方向	boolean	false
onAfterChange	与 `onmouseup` 触发时机一致，把当前值作为参数传入	(value) => void	-
onChange	当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入	(value) => void	-

range

参数	说明	类型	默认值	版本
draggableTrack	范围刻度是否可被拖拽	boolean	false	4.10.0

参数	说明	类型	默认值	版本
open	值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时	boolean	-	4.23.0
placement	设置 Tooltip 展示位置。参考 Tooltip	string	-	4.23.0
getPopupContainer	Tooltip 渲染父节点，默认渲染到 body 上	(triggerNode) => HTMLElement	() => document.body	4.23.0
formatter	Slider 会把当前值传给 `formatter`，并在 Tooltip 中显示 `formatter` 的返回值，若为 null，则隐藏 Tooltip	value => ReactNode \| null	IDENTITY	4.23.0

名称

描述

版本

blur()

移除焦点

focus()

获取焦点

Token 名称

描述

类型

默认值

colorBgContainer

组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。

string

#ffffff

colorBgElevated

浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。

string

#ffffff

colorBorderSecondary

比默认使用的边框色要浅一级，此颜色和 colorSplit 的颜色一致。使用的是实色。

string

#f0f0f0

colorFillContentHover

控制内容区域背景色在鼠标悬停时的样式。

string

rgba(0, 0, 0, 0.15)

colorFillSecondary

二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。

string

rgba(0, 0, 0, 0.06)

colorFillTertiary

三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。

string

rgba(0, 0, 0, 0.04)

colorPrimary

品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义

string

#1677ff

colorPrimaryBorder

主色梯度下的描边用色，用在 Slider 等组件的描边上。

string

#91caff

colorPrimaryBorderHover

主色梯度下的描边用色的悬浮态，Slider 、Button 等组件的描边 Hover 时会使用。

string

#69b1ff

colorText

最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。

string

rgba(0, 0, 0, 0.88)

colorTextDescription

控制文本描述字体颜色。

string

rgba(0, 0, 0, 0.45)

colorTextDisabled

控制禁用状态下的字体颜色。

string

rgba(0, 0, 0, 0.25)

borderRadiusXS

XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。

number

controlHeight

Ant Design 中按钮和输入框等基础控件的高度

number

controlHeightLG

较高的组件高度

number

controlHeightSM

较小的组件高度

number

fontFamily

Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。

string

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'

fontSize

设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。

number

lineHeight

文本行高

number

1.5714285714285714

lineWidth

用于控制组件边框、分割线等的宽度

number

motionDurationMid

动效播放速度，中速。用于中型元素动画交互

string

0.2s

motionDurationSlow

动效播放速度，慢速。用于大型元素如面板动画交互

string

0.3s