diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx index c041311823..92db7aebe2 100644 --- a/components/calendar/Header.tsx +++ b/components/calendar/Header.tsx @@ -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 { @@ -79,6 +87,7 @@ export default class Header extends React.Component { start = rangeStart.get('month'); } } + for (let index = start; index < end; index++) { options.push(); } @@ -128,10 +137,14 @@ export default class Header extends React.Component { } }; - 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 { 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 = ( - + return ( + ); + }; - 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() + ) : (
- {yearSelect} - {monthSelect} + {yearReactNode} + {monthReactNode} {typeSwitch}
); diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap index 0f444fe610..ad34a8e43f 100644 --- a/components/calendar/__tests__/__snapshots__/demo.test.js.snap +++ b/components/calendar/__tests__/__snapshots__/demo.test.js.snap @@ -2092,6 +2092,1075 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = ` `; +exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] = ` +
+
+
+
+ Custom header +
+
+
+
+ + +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + + + Mo + + + + Tu + + + + We + + + + Th + + + + Fr + + + + Sa + +
+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+
+
+`; + exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
{ 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( + + {i} + , + ); + } + + return ( + + ); + }); + const wrapperWithYear = mount(); + + 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( + + {months[index]} + , + ); + } + const month = value.month(); + return ( + + ); + }); + const wrapperWithMonth = mount( + , + ); + + wrapperWithMonth.find('.ant-select').simulate('click'); + wrapperWithMonth.update(); + + wrapperWithMonth + .find('.month-item') + .last() + .simulate('click'); + expect(onMonthChange).toHaveBeenCalled(); + + const headerRenderWithTypeChange = jest.fn(({ type }) => { + return ( + + + + + ); + }); + + const wrapperWithTypeChange = mount( + , + ); + + wrapperWithTypeChange + .find('.ant-radio-button-input') + .last() + .simulate('change'); + expect(onTypeChange).toHaveBeenCalled(); + }); }); diff --git a/components/calendar/demo/customize-header.md b/components/calendar/demo/customize-header.md new file mode 100644 index 0000000000..a64f13f517 --- /dev/null +++ b/components/calendar/demo/customize-header.md @@ -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( +
+ { + 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( + + {months[index]} + , + ); + } + const month = value.month(); + + const year = value.year(); + const options = []; + for (let i = year - 10; i < year + 10; i += 1) { + options.push( + + {i} + , + ); + } + return ( +
+
Custom header
+ + + onTypeChange(e.target.value)} value={type}> + + + + + + + + + + + +
+ ); + }} + onPanelChange={onPanelChange} + /> +
, + mountNode, +); +``` diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index 0ed680da56..1cd91c9cb8 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -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 | diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx index 65ae98fb60..25ca8e6ff9 100644 --- a/components/calendar/index.tsx +++ b/components/calendar/index.tsx @@ -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 { onSelect: noop, onPanelChange: noop, onChange: noop, + headerRender: null, }; static propTypes = { @@ -205,6 +206,7 @@ class Calendar extends React.Component { style, className, fullscreen, + headerRender, dateFullCellRender, monthFullCellRender, } = props; @@ -237,6 +239,7 @@ class Calendar extends React.Component {
``` -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| 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 | diff --git a/components/slider/index.en-US.md b/components/slider/index.en-US.md index 6484cee496..c4ddea457a 100644 --- a/components/slider/index.en-US.md +++ b/components/slider/index.en-US.md @@ -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 diff --git a/components/slider/index.tsx b/components/slider/index.tsx index c72548fdbd..ea1161ae67 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -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 { 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 { prefixCls={tooltipPrefixCls} title={tipFormatter ? tipFormatter(value) : ''} visible={visible} - placement="top" + placement={tooltipPlacement || 'top'} transitionName="zoom-down" key={index} getPopupContainer={ diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md index 2212a0b171..4fcc0f224f 100644 --- a/components/slider/index.zh-CN.md +++ b/components/slider/index.zh-CN.md @@ -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 | ## 方法