mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 13:09:40 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

Merge pull request #16798 from ant-design/feature-merge-master

Browse Source 
chore: Feature merge master
This commit is contained in:
zombieJ 2019-05-26 13:57:48 +08:00 committed by GitHub
commit a3e19cecba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 1412 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
components/calendar/Header.tsx
View File

@ -5,6 +5,13 @@ import { Group, Button, RadioChangeEvent } from '../radio';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
const Option = Select.Option;
export interface RenderHeader {
value: moment.Moment;
onChange?: (value: moment.Moment) => void;
type: string;
onTypeChange: (type: string) => void;
}
export interface HeaderProps {
prefixCls?: string;
locale?: any;
@ -14,8 +21,9 @@ export interface HeaderProps {
type?: string;
onValueChange?: (value: moment.Moment) => void;
onTypeChange?: (type: string) => void;
value: any;
value: moment.Moment;
validRange?: [moment.Moment, moment.Moment];
headerRender: (header: RenderHeader) => React.ReactNode;
}
export default class Header extends React.Component<HeaderProps, any> {
@ -79,6 +87,7 @@ export default class Header extends React.Component<HeaderProps, any> {
start = rangeStart.get('month');
}
}
for (let index = start; index < end; index++) {
options.push(<Option key={`${index}`}>{months[index]}</Option>);
}
@ -128,10 +137,14 @@ export default class Header extends React.Component<HeaderProps, any> {
}
};
onTypeChange = (e: RadioChangeEvent) => {
onInternalTypeChange = (e: RadioChangeEvent) => {
this.onTypeChange(e.target.value);
};
onTypeChange = (type: string) => {
const onTypeChange = this.props.onTypeChange;
if (onTypeChange) {
onTypeChange(e.target.value);
onTypeChange(type);
}
};
@ -139,26 +152,53 @@ export default class Header extends React.Component<HeaderProps, any> {
this.calenderHeaderNode = node;
};
renderHeader = ({ getPrefixCls }: ConfigConsumerProps) => {
const { prefixCls: customizePrefixCls, type, value, locale, fullscreen } = this.props;
getMonthYearSelections = (getPrefixCls: ConfigConsumerProps['getPrefixCls']) => {
const { prefixCls: customizePrefixCls, type, value } = this.props;
const prefixCls = getPrefixCls('fullcalendar', customizePrefixCls);
const yearSelect = this.getYearSelectElement(prefixCls, value.year());
const monthSelect =
const yearReactNode = this.getYearSelectElement(prefixCls, value.year());
const monthReactNode =
type === 'month'
? this.getMonthSelectElement(prefixCls, value.month(), this.getMonthsLocale(value))
: null;
return {
yearReactNode,
monthReactNode,
};
};
getTypeSwitch = () => {
const { locale, type, fullscreen } = this.props;
const size = fullscreen ? 'default' : 'small';
const typeSwitch = (
<Group onChange={this.onTypeChange} value={type} size={size}>
return (
<Group onChange={this.onInternalTypeChange} value={type} size={size}>
<Button value="month">{locale.month}</Button>
<Button value="year">{locale.year}</Button>
</Group>
);
};
return (
headerRenderCustom = (): React.ReactNode => {
const { headerRender, type, onValueChange, value } = this.props;
return headerRender({
value,
type: type || 'month',
onChange: onValueChange,
onTypeChange: this.onTypeChange,
});
};
renderHeader = ({ getPrefixCls }: ConfigConsumerProps) => {
const { prefixCls, headerRender } = this.props;
const typeSwitch = this.getTypeSwitch();
const { yearReactNode, monthReactNode } = this.getMonthYearSelections(getPrefixCls);
return headerRender ? (
this.headerRenderCustom()
) : (
<div className={`${prefixCls}-header`} ref={this.getCalenderHeaderNode}>
{yearSelect}
{monthSelect}
{yearReactNode}
{monthReactNode}
{typeSwitch}
</div>
);

1069
components/calendar/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

106
components/calendar/__tests__/index.test.js
View File

@ -4,6 +4,9 @@ import { mount } from 'enzyme';
import MockDate from 'mockdate';
import Calendar from '..';
import Header from '../Header';
import Select from '../../select';
import Group from '../../radio/group';
import Button from '../../radio/radioButton';
describe('Calendar', () => {
it('Calendar should be selectable', () => {
@ -256,4 +259,107 @@ describe('Calendar', () => {
.simulate('change');
expect(onTypeChange).toHaveBeenCalledWith('year');
});
it('headerRender should work correctly', () => {
const onMonthChange = jest.fn();
const onYearChange = jest.fn();
const onTypeChange = jest.fn();
const headerRender = jest.fn(({ value }) => {
const year = value.year();
const options = [];
for (let i = year - 100; i < year + 100; i += 1) {
options.push(
<Select.Option className="year-item" key={i} value={i}>
{i}
</Select.Option>,
);
}
return (
<Select
size="small"
dropdownMatchSelectWidth={false}
className="my-year-select"
onChange={onYearChange}
value={String(year)}
>
{options}
</Select>
);
});
const wrapperWithYear = mount(<Calendar fullscreen={false} headerRender={headerRender} />);
wrapperWithYear.find('.ant-select').simulate('click');
wrapperWithYear.update();
wrapperWithYear
.find('.year-item')
.last()
.simulate('click');
expect(onYearChange).toHaveBeenCalled();
const headerRenderWithMonth = jest.fn(({ value }) => {
const start = 0;
const end = 12;
const monthOptions = [];
const current = value.clone();
const localeData = value.localeData();
const months = [];
for (let i = 0; i < 12; i += 1) {
current.month(i);
months.push(localeData.monthsShort(current));
}
for (let index = start; index < end; index += 1) {
monthOptions.push(
<Select.Option className="month-item" key={`${index}`}>
{months[index]}
</Select.Option>,
);
}
const month = value.month();
return (
<Select
size="small"
dropdownMatchSelectWidth={false}
value={String(month)}
className="my-mont-select"
onChange={onMonthChange}
>
{monthOptions}
</Select>
);
});
const wrapperWithMonth = mount(
<Calendar fullscreen={false} headerRender={headerRenderWithMonth} />,
);
wrapperWithMonth.find('.ant-select').simulate('click');
wrapperWithMonth.update();
wrapperWithMonth
.find('.month-item')
.last()
.simulate('click');
expect(onMonthChange).toHaveBeenCalled();
const headerRenderWithTypeChange = jest.fn(({ type }) => {
return (
<Group size="small" onChange={onTypeChange} value={type}>
<Button value="month">Month</Button>
<Button value="year">Year</Button>
</Group>
);
});
const wrapperWithTypeChange = mount(
<Calendar fullscreen={false} headerRender={headerRenderWithTypeChange} />,
);
wrapperWithTypeChange
.find('.ant-radio-button-input')
.last()
.simulate('change');
expect(onTypeChange).toHaveBeenCalled();
});
});

107
components/calendar/demo/customize-header.md Normal file
View File

@ -0,0 +1,107 @@
---
order: 4
title:
zh-CN: 自定义头部
en-US: Customize Header
---
## zh-CN
自定义日历头部内容。
## en-US
Customize Calendar header content.
```jsx
import { Calendar, Select, Radio, Col, Row } from 'antd';
const { Group, Button } = Radio;
function onPanelChange(value, mode) {
console.log(value, mode);
}
ReactDOM.render(
<div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
<Calendar
fullscreen={false}
headerRender={({ value, type, onChange, onTypeChange }) => {
const start = 0;
const end = 12;
const monthOptions = [];
const current = value.clone();
const localeData = value.localeData();
const months = [];
for (let i = 0; i < 12; i++) {
current.month(i);
months.push(localeData.monthsShort(current));
}
for (let index = start; index < end; index++) {
monthOptions.push(
<Select.Option className="month-item" key={`${index}`}>
{months[index]}
</Select.Option>,
);
}
const month = value.month();
const year = value.year();
const options = [];
for (let i = year - 10; i < year + 10; i += 1) {
options.push(
<Select.Option key={i} value={i} className="year-item">
{i}
</Select.Option>,
);
}
return (
<div style={{ padding: 10 }}>
<div style={{ marginBottom: '10px' }}>Custom header </div>
<Row type="flex" justify="space-between">
<Col>
<Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
<Button value="month">Month</Button>
<Button value="year">Year</Button>
</Group>
</Col>
<Col>
<Select
size="small"
dropdownMatchSelectWidth={false}
className="my-year-select"
onChange={newYear => {
const now = value.clone().year(newYear);
onChange(now);
}}
value={String(year)}
>
{options}
</Select>
</Col>
<Col>
<Select
size="small"
dropdownMatchSelectWidth={false}
value={String(month)}
onChange={selectedMonth => {
const newValue = value.clone();
newValue.month(parseInt(selectedMonth, 10));
onChange(newValue);
}}
>
{monthOptions}
</Select>
</Col>
</Row>
</div>
);
}}
onPanelChange={onPanelChange}
/>
</div>,
mountNode,
);
```

31
components/calendar/index.en-US.md
View File

@ -29,19 +29,20 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
/>
```
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - |
| defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date |
| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - |
| fullscreen | Whether to display in full-screen | boolean | `true` |
| locale | The calendar's locale | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| mode | The display mode of the calendar | `month` \| `year` | `month` |
| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: moment): ReactNode | - |
| validRange | to set valid range | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - | |
| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - | |
| defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date | |
| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - | |
| fullscreen | Whether to display in full-screen | boolean | `true` | |
| locale | The calendar's locale | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
| mode | The display mode of the calendar | `month` \| `year` | `month` | |
| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - | |
| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: moment): ReactNode | - | |
| validRange | to set valid range | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
| value | The current selected date | [moment](http://momentjs.com/) | current date |
| onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - |
| onSelect | Callback for when a date is selected | function(date: moment） | - |
| onChange | Callback for when date changes | function(date: moment） | - |
| onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - | |
| onSelect | Callback for when a date is selected | function(date: moment） | - | |
| onChange | Callback for when date changes | function(date: moment） | - | |
| headerRender | render custom header in panel | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | 3.19.0 |

7
components/calendar/index.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import * as PropTypes from 'prop-types';
import * as moment from 'moment';
import FullCalendar from 'rc-calendar/lib/FullCalendar';
import Header from './Header';
import Header, { RenderHeader } from './Header';
import enUS from './locale/en_US';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
@ -23,7 +23,6 @@ function zerofixed(v: number) {
}
export type CalendarMode = 'month' | 'year';
export interface CalendarProps {
prefixCls?: string;
className?: string;
@ -42,6 +41,7 @@ export interface CalendarProps {
onChange?: (date?: moment.Moment) => void;
disabledDate?: (current: moment.Moment) => boolean;
validRange?: [moment.Moment, moment.Moment];
headerRender: (header: RenderHeader) => React.ReactNode;
}
export interface CalendarState {
@ -56,6 +56,7 @@ class Calendar extends React.Component<CalendarProps, CalendarState> {
onSelect: noop,
onPanelChange: noop,
onChange: noop,
headerRender: null,
};
static propTypes = {
@ -205,6 +206,7 @@ class Calendar extends React.Component<CalendarProps, CalendarState> {
style,
className,
fullscreen,
headerRender,
dateFullCellRender,
monthFullCellRender,
} = props;
@ -237,6 +239,7 @@ class Calendar extends React.Component<CalendarProps, CalendarState> {
<Header
fullscreen={fullscreen}
type={mode}
headerRender={headerRender}
value={value}
locale={locale.lang}
prefixCls={prefixCls}

27
components/calendar/index.zh-CN.md
View File

@ -30,19 +30,20 @@ title: Calendar
/>
```
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |
| dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 | |
| dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 | |
| defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | 默认日期 |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
| fullscreen | 是否全屏显示 | boolean | true |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 | |
| fullscreen | 是否全屏显示 | boolean | true | |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
| mode | 初始模式，`month/year` | string | month |
| monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |
| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |
| validRange | 设置可以显示的日期 | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | 无 |
| monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 | |
| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 | |
| validRange | 设置可以显示的日期 | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | 无 | |
| value | 展示日期 | [moment](http://momentjs.com/) | 当前日期 |
| onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | 无 |
| onSelect | 点击选择日期回调 | function(date: moment） | 无 |
| onChange | 日期变化回调 | function(date: moment） | 无 |
| onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | 无 | |
| onSelect | 点击选择日期回调 | function(date: moment） | 无 | |
| onChange | 日期变化回调 | function(date: moment） | 无 | |
| headerRender | 自定义头部内容 | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | 无 | 3.19.0 |

37
components/slider/index.en-US.md
View File

@ -12,25 +12,26 @@ To input a value in a range.
## API
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| autoFocus | get focus when component mounted | boolean | false |
| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | 0 or \[0, 0] |
| disabled | If true, the slider will not be interactable. | boolean | false |
| dots | Whether the thumb can drag over tick only. | boolean | false |
| included | Make effect when `marks` not null, `true` means containment and `false` means coordinative | boolean | true |
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style. | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |
| max | The maximum value the slider can slide to | number | 100 |
| min | The minimum value the slider can slide to. | number | 0 |
| range | dual thumb mode | boolean | false |
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1 |
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoFocus | get focus when component mounted | boolean | false | |
| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | 0 or \[0, 0] | |
| disabled | If true, the slider will not be interactable. | boolean | false | |
| dots | Whether the thumb can drag over tick only. | boolean | false | |
| included | Make effect when `marks` not null, `true` means containment and `false` means coordinative | boolean | true | |
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style. | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } | |
| max | The maximum value the slider can slide to | number | 100 | |
| min | The minimum value the slider can slide to. | number | 0 | |
| range | dual thumb mode | boolean | false | |
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1 | |
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY | |
| value | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | |
| vertical | If true, the slider will be vertical. | Boolean | false |
| onAfterChange | Fire when `onmouseup` is fired. | Function(value) | NOOP |
| onChange | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP |
| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean | |
| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body. | Function | () => document.body |
| vertical | If true, the slider will be vertical. | Boolean | false | |
| onAfterChange | Fire when `onmouseup` is fired. | Function(value) | NOOP | |
| onChange | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP | |
| tooltipPlacement | Set Tooltip display position. Ref [`Tooltip`](/components/tooltip/). | string | | 3.19.0 |
| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean | | |
| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body. | Function | () => document.body | 3.19.0 |
## Methods

7
components/slider/index.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import RcSlider from 'rc-slider/lib/Slider';
import RcRange from 'rc-slider/lib/Range';
import RcHandle from 'rc-slider/lib/Handle';
import Tooltip from '../tooltip';
import Tooltip, { TooltipPlacement } from '../tooltip';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
export interface SliderMarks {
@ -48,6 +48,7 @@ export interface SliderProps {
id?: string;
style?: React.CSSProperties;
tooltipVisible?: boolean;
tooltipPlacement?: TooltipPlacement;
getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
}
@ -83,7 +84,7 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
tooltipPrefixCls: string,
{ value, dragging, index, ...restProps },
) => {
const { tipFormatter, tooltipVisible, getTooltipPopupContainer } = this.props;
const { tipFormatter, tooltipVisible, tooltipPlacement, getTooltipPopupContainer } = this.props;
const { visibles } = this.state;
const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
@ -92,7 +93,7 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
prefixCls={tooltipPrefixCls}
title={tipFormatter ? tipFormatter(value) : ''}
visible={visible}
placement="top"
placement={tooltipPlacement || 'top'}
transitionName="zoom-down"
key={index}
getPopupContainer={

39
components/slider/index.zh-CN.md
View File

@ -13,25 +13,26 @@ title: Slider
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 支持清除, 单选模式有效 | boolean | false |
| defaultValue | 设置初始取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | 0 or \[0, 0] |
| disabled | 值为 `true` 时，滑块为禁用状态 | boolean | false |
| dots | 是否只能拖拽到刻度上 | boolean | false |
| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true |
| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |
| max | 最大值 | number | 100 |
| min | 最小值 | number | 0 |
| range | 双滑块模式 | boolean | false |
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 |
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY |
| value | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | |
| vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false |
| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP |
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function(value) | NOOP |
| tooltipVisible | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean | |
| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上。 | Function | () => document.body |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| allowClear | 支持清除, 单选模式有效 | boolean | false | |
| defaultValue | 设置初始取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | 0 or \[0, 0] | |
| disabled | 值为 `true` 时，滑块为禁用状态 | boolean | false | |
| dots | 是否只能拖拽到刻度上 | boolean | false | |
| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true | |
| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } | |
| max | 最大值 | number | 100 | |
| min | 最小值 | number | 0 | |
| range | 双滑块模式 | boolean | false | |
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 | |
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY | |
| value | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | | |
| vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false | |
| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP | |
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function(value) | NOOP | |
| tooltipPlacement | 设置 Tooltip 展示位置。参考 [`Tooltip`](/components/tooltip/)。 | string | | | 3.19.0 |
| tooltipVisible | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean | | |
| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上。 | Function | () => document.body | 3.19.0 |
## 方法