mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 12:39:49 +08:00
chore: update demo
This commit is contained in:
MadCcc
parent
73a1555637
commit
028265d3ba
@ -34,7 +34,7 @@ Alert component for feedback.
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ----------- | -------------------------------------------------------------------- | ----------------------- | --------------------------------------------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| action | The action of Alert | ReactNode | - | 4.9.0 |
|
||||
| afterClose | Called when close animation is finished | () => void | - | |
|
||||
| banner | Whether to show as banner | boolean | false | |
|
||||
|
||||
@ -35,7 +35,7 @@ group:
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | -------------------------------------------------------------------- | ----------------------- | ----------------------------------------- | ------ |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| action | 自定义操作项 | ReactNode | - | 4.9.0 |
|
||||
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
|
||||
| banner | 是否用作顶部公告 | boolean | false | |
|
||||
@ -52,6 +52,6 @@ group:
|
||||
### Alert.ErrorBoundary
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | -------------------------------------------- | --------- | ----------------- | ---- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
|
||||
| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |
|
||||
|
||||
@ -16,8 +16,8 @@ import {
|
||||
} from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import enUS from 'antd/es/locale/en_US';
|
||||
import zhCN from 'antd/es/locale/zh_CN';
|
||||
import enUS from 'antd/locale/en_US';
|
||||
import zhCN from 'antd/locale/zh_CN';
|
||||
|
||||
dayjs.locale('en');
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true | |
|
||||
| componentDisabled | Config antd component `disabled` | boolean | - | 4.21.0 |
|
||||
| componentSize | Config antd component size | `small` \| `middle` \| `large` | - | |
|
||||
|
||||
@ -47,7 +47,7 @@ export default () => (
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true | |
|
||||
| componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 |
|
||||
| componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | |
|
||||
|
||||
@ -8,7 +8,6 @@ type RangeValue = [Dayjs | null, Dayjs | null] | null;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [dates, setDates] = useState<RangeValue>(null);
|
||||
const [hackValue, setHackValue] = useState<RangeValue>(null);
|
||||
const [value, setValue] = useState<RangeValue>(null);
|
||||
|
||||
const disabledDate = (current: Dayjs) => {
|
||||
@ -22,16 +21,15 @@ const App: React.FC = () => {
|
||||
|
||||
const onOpenChange = (open: boolean) => {
|
||||
if (open) {
|
||||
setHackValue([null, null]);
|
||||
setDates([null, null]);
|
||||
} else {
|
||||
setHackValue(null);
|
||||
setDates(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<RangePicker
|
||||
value={hackValue || value}
|
||||
value={dates || value}
|
||||
disabledDate={disabledDate}
|
||||
onCalendarChange={val => setDates(val)}
|
||||
onChange={val => setValue(val)}
|
||||
|
||||
@ -33,7 +33,7 @@ By clicking the input box, you can select a date from a popup calendar.
|
||||
<code src="./demo/mode.tsx" debug>Controlled Panels</code>
|
||||
<code src="./demo/start-end.tsx" debug>Customized Range Picker</code>
|
||||
<code src="./demo/suffix.tsx" debug>Suffix</code>
|
||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
|
||||
## API
|
||||
|
||||
@ -75,7 +75,7 @@ import locale from 'antd/locale/zh_CN';
|
||||
The following APIs are shared by DatePicker, RangePicker.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | Whether to show clear button | boolean | true | |
|
||||
| autoFocus | If get focus when component mounted | boolean | false | |
|
||||
| bordered | Whether has border style | boolean | true | |
|
||||
@ -115,7 +115,7 @@ The following APIs are shared by DatePicker, RangePicker.
|
||||
### DatePicker
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------- | -------------------------------------------------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [dayjs](https://day.js.org/) | - | |
|
||||
| disabledTime | To specify the time that cannot be selected | function(date) | - | |
|
||||
@ -133,7 +133,7 @@ The following APIs are shared by DatePicker, RangePicker.
|
||||
### DatePicker\[picker=year]
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ------------------ | --------------------------------------------------------------------- | ----------------------------------------- | ------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY` | |
|
||||
@ -146,7 +146,7 @@ The following APIs are shared by DatePicker, RangePicker.
|
||||
Added in `4.1.0`.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ------------------ | --------------------------------------------------------------------- | ----------------------------------------- | ---------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-\QQ` | |
|
||||
@ -157,7 +157,7 @@ Added in `4.1.0`.
|
||||
### DatePicker\[picker=month]
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ------------------ | --------------------------------------------------------------------- | ----------------------------------------- | --------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-MM` | |
|
||||
@ -169,7 +169,7 @@ Added in `4.1.0`.
|
||||
### DatePicker\[picker=week]
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ------------------ | --------------------------------------------------------------------- | ----------------------------------------- | --------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-wo` | |
|
||||
@ -180,7 +180,7 @@ Added in `4.1.0`.
|
||||
### RangePicker
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] | |
|
||||
| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: dayjs, today: dayjs, info: { range: `start` \| `end` }) => React.ReactNode | - | |
|
||||
| defaultPickerValue | To set default picker date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |
|
||||
|
||||
@ -34,7 +34,7 @@ demo:
|
||||
<code src="./demo/mode.tsx" debug>受控面板</code>
|
||||
<code src="./demo/start-end.tsx" debug>自定义日期范围选择</code>
|
||||
<code src="./demo/suffix.tsx" debug>后缀图标</code>
|
||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
|
||||
## API
|
||||
|
||||
@ -76,7 +76,7 @@ import locale from 'antd/locale/zh_CN';
|
||||
以下 API 为 DatePicker、 RangePicker 共享的 API。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | 是否显示清除按钮 | boolean | true | |
|
||||
| autoFocus | 自动获取焦点 | boolean | false | |
|
||||
| bordered | 是否有边框 | boolean | true | |
|
||||
@ -116,7 +116,7 @@ import locale from 'antd/locale/zh_CN';
|
||||
### DatePicker
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------- | ----- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [dayjs](https://day.js.org/) | - | |
|
||||
| disabledTime | 不可选择的时间 | function(date) | - | |
|
||||
@ -134,7 +134,7 @@ import locale from 'antd/locale/zh_CN';
|
||||
### DatePicker\[picker=year]
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------------ | ----------------------------------------------------- | ----------------------------------------- | ------ | ---- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY` | |
|
||||
@ -147,7 +147,7 @@ import locale from 'antd/locale/zh_CN';
|
||||
`4.1.0` 新增。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------------ | ----------------------------------------------------- | ----------------------------------------- | ---------- | ---- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-\QQ` | |
|
||||
@ -158,7 +158,7 @@ import locale from 'antd/locale/zh_CN';
|
||||
### DatePicker\[picker=month]
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------------ | ----------------------------------------------------- | ----------------------------------------- | --------- | ---- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-MM` | |
|
||||
@ -170,7 +170,7 @@ import locale from 'antd/locale/zh_CN';
|
||||
### DatePicker\[picker=week]
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------------ | ----------------------------------------------------- | ----------------------------------------- | --------- | ---- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-wo` | |
|
||||
@ -181,7 +181,7 @@ import locale from 'antd/locale/zh_CN';
|
||||
### RangePicker
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ---- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | |
|
||||
| dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: dayjs, today: dayjs, info: { range: `start` \| `end` }) => React.ReactNode | - | |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/)\[] | - | |
|
||||
|
||||
@ -24,14 +24,14 @@ FloatButton. Available since `5.0.0`.
|
||||
<code src="./demo/group.tsx">FloatButton Group</code>
|
||||
<code src="./demo/group-menu.tsx">Menu mode</code>
|
||||
<code src="./demo/back-top.tsx">BackTop</code>
|
||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
|
||||
## API
|
||||
|
||||
### common API
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ----------- | ----------------------------------------- | ---------------------------- | --------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| icon | Set the icon component of button | ReactNode | - | |
|
||||
| description | Text and other | ReactNode | - | |
|
||||
| tooltip | The text shown in the tooltip | ReactNode \| () => ReactNode | | |
|
||||
@ -44,7 +44,7 @@ FloatButton. Available since `5.0.0`.
|
||||
### FloatButton.Group
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ------------ | --------------------------------------------- | ----------------------- | -------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| shape | Setting button shape of children | `circle` \| `square` | `circle` | |
|
||||
| trigger | Which action can trigger menu open/close | `click` \| `hover` | - | |
|
||||
| open | Whether the menu is visible or not | boolean | - | |
|
||||
@ -53,7 +53,7 @@ FloatButton. Available since `5.0.0`.
|
||||
### FloatButton.BackTop
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ---------------- | --------------------------------------------------------------------------- | ----------------- | ------------ | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| duration | Time to return to top（ms） | number | 450 | |
|
||||
| target | Specifies the scrollable area dom node | () => HTMLElement | () => window | |
|
||||
| visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 | |
|
||||
|
||||
@ -25,14 +25,14 @@ demo:
|
||||
<code src="./demo/group.tsx">浮动按钮组</code>
|
||||
<code src="./demo/group-menu.tsx">菜单模式</code>
|
||||
<code src="./demo/back-top.tsx">回到顶部</code>
|
||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
|
||||
## API
|
||||
|
||||
### 共同的 API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | ----------------------------------------------------- | ---------------------------- | --------- | ---- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| icon | 自定义图标 | ReactNode | - | |
|
||||
| description | 文字及其它内容 | ReactNode | - | |
|
||||
| tooltip | 气泡卡片的内容 | ReactNode \| () => ReactNode | - | |
|
||||
|
||||
@ -59,7 +59,7 @@ If the Ant Design grid layout component does not meet your needs, you can use th
|
||||
### Row
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 |
|
||||
| gutter | Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \| object \| array | 0 | |
|
||||
| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 |
|
||||
@ -68,7 +68,7 @@ If the Ant Design grid layout component does not meet your needs, you can use th
|
||||
### Col
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------- | ------------------------------------------------------------------------------------------------------ | ---------------- | ------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| flex | Flex layout style | string \| number | - | |
|
||||
| offset | The number of cells to offset Col from the left | number | 0 | |
|
||||
| order | Raster order | number | 0 | |
|
||||
|
||||
@ -58,7 +58,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
|
||||
### Row
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------- | -------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 |
|
||||
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 | |
|
||||
| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 |
|
||||
@ -67,7 +67,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
|
||||
### Col
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------ | -------------------------------------------------------------- | ---------------- | ------ | ---- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| flex | flex 布局属性 | string \| number | - | |
|
||||
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | |
|
||||
| order | 栅格顺序 | number | 0 | |
|
||||
|
||||
@ -43,7 +43,7 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
|
||||
### Input
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------- | ------------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - | |
|
||||
| addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | |
|
||||
| allowClear | If allow to remove input content with clear icon | boolean \| { clearIcon: ReactNode } | false | |
|
||||
@ -69,7 +69,7 @@ The rest of the props of Input are exactly the same as the original [input](http
|
||||
### Input.TextArea
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ------------ | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------ |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | If allow to remove input content with clear icon | boolean | false | |
|
||||
| autoSize | Height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false | |
|
||||
| bordered | Whether has border style | boolean | true | 4.5.0 |
|
||||
@ -85,7 +85,7 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea
|
||||
#### Input.Search
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | -------------------------------------------------------------------------------------------------------- | ---------------------- | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| enterButton | Whether to show an enter button after input. This property conflicts with the `addonAfter` property | boolean \| ReactNode | false |
|
||||
| loading | Search box with loading | boolean | false |
|
||||
| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event) | - |
|
||||
@ -95,7 +95,7 @@ Supports all props of `Input`.
|
||||
#### Input.Group
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------------------------------------------------------------------------------------------------------------- | ------- | --------- |
|
||||
| --- | --- | --- | --- |
|
||||
| compact | Whether use compact style | boolean | false |
|
||||
| size | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string | `default` |
|
||||
|
||||
@ -109,14 +109,14 @@ Supports all props of `Input`.
|
||||
#### Input.Password
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ---------------- | -------------------------- | ---------------------- | ------------------------------------------------------------------------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| iconRender | Custom toggle button | (visible) => ReactNode | (visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 |
|
||||
| visibilityToggle | Whether show toggle button | boolean | true | |
|
||||
|
||||
#### Input Methods
|
||||
|
||||
| Name | Description | Parameters | Version |
|
||||
| ----- | ------------ | -------------------------------------------------------------------------- | --------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| blur | Remove focus | - | |
|
||||
| focus | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
|
||||
|
||||
|
||||
@ -44,7 +44,7 @@ demo:
|
||||
### Input
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------ | ------------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | |
|
||||
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | |
|
||||
| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | |
|
||||
@ -70,7 +70,7 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el
|
||||
### Input.TextArea
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------ | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------ | ------------------------------------------ |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | 可以点击清除图标删除内容 | boolean | false | |
|
||||
| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | |
|
||||
| bordered | 是否有边框 | boolean | true | 4.5.0 |
|
||||
@ -86,7 +86,7 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el
|
||||
#### Input.Search
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | -------------------------------------------------------------- | ---------------------- | ------ |
|
||||
| --- | --- | --- | --- |
|
||||
| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 `addonAfter` 冲突。 | boolean \| ReactNode | false |
|
||||
| loading | 搜索 loading | boolean | false |
|
||||
| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event) | - |
|
||||
@ -96,7 +96,7 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el
|
||||
#### Input.Group
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------- | --------------------------------------------------------------------- | ------- | --------- |
|
||||
| --- | --- | --- | --- |
|
||||
| compact | 是否用紧凑模式 | boolean | false |
|
||||
| size | `Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small` | string | `default` |
|
||||
|
||||
@ -110,14 +110,14 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el
|
||||
#### Input.Password
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ---------------- | ---------------- | ---------------------- | ------------------------------------------------------------------------- | ----- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 |
|
||||
| visibilityToggle | 是否显示切换按钮 | boolean | true | |
|
||||
|
||||
#### Input Methods
|
||||
|
||||
| 名称 | 说明 | 参数 | 版本 |
|
||||
| ----- | -------- | -------------------------------------------------------------------------- | --------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| blur | 取消焦点 | - | |
|
||||
| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ Set components spacing.
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------- | ------------------------------------------- | ---------------------------------------- | ------------ | --------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | Align items | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
|
||||
| direction | The space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
|
||||
| size | The space size | [Size](#Size) \| [Size\[\]](#Size) | `small` | 4.1.0 \| Array: 4.9.0 |
|
||||
@ -59,7 +59,7 @@ Use Space.Compact when child form components are compactly connected and the bor
|
||||
- TreeSelect
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------- | ------------------------------------------ | ------------------------------ | ------------ | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| block | Option to fit width to its parent\'s width | boolean | false | 4.24.0 |
|
||||
| direction | Set direction of layout | `vertical` \| `horizontal` | `horizontal` | 4.24.0 |
|
||||
| size | Set child component size | `large` \| `middle` \| `small` | `middle` | 4.24.0 |
|
||||
|
||||
@ -40,7 +40,7 @@ demo:
|
||||
### Space
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | -------------------------------------- | ---------------------------------------- | ------------ | --------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | 对齐方式 | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
|
||||
| direction | 间距方向 | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
|
||||
| size | 间距大小 | [Size](#Size) \| [Size\[\]](#Size) | `small` | 4.1.0 \| Array: 4.9.0 |
|
||||
@ -67,7 +67,7 @@ demo:
|
||||
- TreeSelect
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | ---------------------------- | ------------------------------ | ------------ | ------ |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| block | 将宽度调整为父元素宽度的选项 | boolean | false | 4.24.0 |
|
||||
| direction | 指定排列方向 | `vertical` \| `horizontal` | `horizontal` | 4.24.0 |
|
||||
| size | 子组件大小 | `large` \| `middle` \| `small` | `middle` | 4.24.0 |
|
||||
|
||||
@ -109,7 +109,7 @@ const columns = [
|
||||
### Table
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| bordered | Whether to show all table borders | boolean | false | |
|
||||
| columns | Columns of table | [ColumnsType](#Column)\[] | - | |
|
||||
| components | Override default table elements | [TableComponents](https://github.com/react-component/table/blob/75ee0064e54a4b3215694505870c9d6c817e9e4a/src/interface.ts#L129) | - | |
|
||||
@ -164,7 +164,7 @@ Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell`
|
||||
One of the Table `columns` prop for describing the table's columns, Column has the same API.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------ |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | The specify which way that column is aligned | `left` \| `right` \| `center` | `left` | |
|
||||
| className | The className of this column | string | - | |
|
||||
| colSpan | Span of this column's title | number | - | |
|
||||
@ -209,7 +209,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
||||
Properties for pagination.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | -------------------------------------------------------------------------------------------------------------------------------------- | ----- | ---------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| position | Specify the position of `Pagination`, could be`topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight` | Array | \[`bottomRight`] |
|
||||
|
||||
More about pagination, please check [`Pagination`](/components/pagination/).
|
||||
@ -219,7 +219,7 @@ More about pagination, please check [`Pagination`](/components/pagination/).
|
||||
Properties for expandable.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ---------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| childrenColumnName | The column contains children to display | string | children | |
|
||||
| columnTitle | Set the title of the expand column | ReactNode | - | 4.23.0 |
|
||||
| columnWidth | Set the width of the expand column | string \| number | - | |
|
||||
@ -242,7 +242,7 @@ Properties for expandable.
|
||||
Properties for row selection.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ----------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------- | ---------- | ------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 4.4.0 |
|
||||
| columnTitle | Set the title of the selection column | ReactNode | - | |
|
||||
| columnWidth | Set the width of the selection column | string \| number | `32px` | |
|
||||
@ -264,7 +264,7 @@ Properties for row selection.
|
||||
### scroll
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - |
|
||||
| x | Set horizontal scrolling, can also be used to specify the width of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | string \| number \| true | - |
|
||||
| y | Set vertical scrolling, can also be used to specify the height of the scroll area, could be string or number | string \| number | - |
|
||||
@ -272,7 +272,7 @@ Properties for row selection.
|
||||
### selection
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ------------------------------------------------ | --------------------------- | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| key | Unique key of this selection | string | - |
|
||||
| text | Display text of this selection | ReactNode | - |
|
||||
| onSelect | Callback executed when this selection is clicked | function(changeableRowKeys) | - |
|
||||
|
||||
@ -13,9 +13,11 @@ interface RecordType {
|
||||
}
|
||||
|
||||
interface DataType {
|
||||
key: string;
|
||||
title: string;
|
||||
tag: string;
|
||||
description: string;
|
||||
disabled: boolean;
|
||||
tag: string;
|
||||
}
|
||||
|
||||
interface TableTransferProps extends TransferProps<TransferItem> {
|
||||
|
||||
@ -71,8 +71,7 @@ const App: React.FC = () => {
|
||||
>
|
||||
{customIconStr}
|
||||
</Paragraph>
|
||||
Trigger edit with:{' '}
|
||||
<Radio.Group
|
||||
Trigger edit with: <Radio.Group
|
||||
onChange={e => setChooseTrigger(radioToState(e.target.value))}
|
||||
value={stateToRadio()}
|
||||
>
|
||||
|
||||
@ -31,7 +31,7 @@ Basic text writing, including headings, body text, lists, and more.
|
||||
### Typography.Text
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------- | --------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| code | Code style | boolean | false | |
|
||||
| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
|
||||
| delete | Deleted line style | boolean | false | |
|
||||
@ -49,7 +49,7 @@ Basic text writing, including headings, body text, lists, and more.
|
||||
### Typography.Title
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------- | --------------------------------------------------------------------------------------- | ------------------------------------------------- | ------- | --------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| code | Code style | boolean | false | |
|
||||
| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
|
||||
| delete | Deleted line style | boolean | false | |
|
||||
@ -66,7 +66,7 @@ Basic text writing, including headings, body text, lists, and more.
|
||||
### Typography.Paragraph
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------- | --------------------------------------------------------------------------------------- | ------------------------------------------------- | ------- | --------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| code | Code style | boolean | false | |
|
||||
| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
|
||||
| delete | Deleted line style | boolean | false | |
|
||||
@ -91,7 +91,7 @@ Basic text writing, including headings, body text, lists, and more.
|
||||
}
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------- | ------------------------------------------ | --------------------------- | ------------------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| format | The Mime Type of the text | 'text/plain' \| 'text/html' | - | 4.21.0 |
|
||||
| icon | Custom copy icon: \[copyIcon, copiedIcon] | \[ReactNode, ReactNode] | - | 4.6.0 |
|
||||
| text | The text to copy | string | - | |
|
||||
@ -116,7 +116,7 @@ Basic text writing, including headings, body text, lists, and more.
|
||||
}
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ----------- | -------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| autoSize | `autoSize` attribute of textarea | boolean \| { minRows: number, maxRows: number } | - | 4.4.0 |
|
||||
| editing | Whether to be editable | boolean | false | |
|
||||
| icon | Custom editable icon | ReactNode | <EditOutlined /> | 4.6.0 |
|
||||
@ -143,7 +143,7 @@ Basic text writing, including headings, body text, lists, and more.
|
||||
}
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ---------- | ----------------------------------------- | ---------------------------------------------------------------- | -------- | ------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| expandable | Whether to be expandable | boolean | - | |
|
||||
| rows | Max rows of content | number | - | |
|
||||
| suffix | Suffix of ellipsis content | string | - | |
|
||||
|
||||
@ -32,7 +32,7 @@ demo:
|
||||
### Typography.Text
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------ | --------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| code | 添加代码样式 | boolean | false | |
|
||||
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
|
||||
| delete | 添加删除线样式 | boolean | false | |
|
||||
@ -50,7 +50,7 @@ demo:
|
||||
### Typography.Title
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | ------------------------------------------------------------ | ------------------------------------------------- | ------ | --------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| code | 添加代码样式 | boolean | false | |
|
||||
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
|
||||
| delete | 添加删除线样式 | boolean | false | |
|
||||
@ -67,7 +67,7 @@ demo:
|
||||
### Typography.Paragraph
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | ------------------------------------------------------------ | ------------------------------------------------- | ------ | --------------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| code | 添加代码样式 | boolean | false | |
|
||||
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
|
||||
| delete | 添加删除线样式 | boolean | false | |
|
||||
@ -92,7 +92,7 @@ demo:
|
||||
}
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | ----------------------------------------- | --------------------------- | --------------------- | ------ |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| format | 剪切板数据的 Mime Type | 'text/plain' \| 'text/html' | - | 4.21.0 |
|
||||
| icon | 自定义拷贝图标：\[默认图标, 拷贝后的图标] | \[ReactNode, ReactNode] | - | 4.6.0 |
|
||||
| text | 拷贝到剪切板里的文本 | string | - | |
|
||||
@ -117,7 +117,7 @@ demo:
|
||||
}
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | ------------------------------------------------------------------------------ | ----------------------------------------------- | ------------------- | ------ |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| autoSize | 自动 resize 文本域 | boolean \| { minRows: number, maxRows: number } | - | 4.4.0 |
|
||||
| editing | 控制是否是编辑中状态 | boolean | false | |
|
||||
| icon | 自定义编辑图标 | ReactNode | <EditOutlined /> | 4.6.0 |
|
||||
@ -144,7 +144,7 @@ demo:
|
||||
}
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ---------- | -------------------- | ---------------------------------------------------------------- | ------ | ------ |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| expandable | 是否可展开 | boolean | - | |
|
||||
| rows | 最多显示的行数 | number | - | |
|
||||
| suffix | 自定义省略内容后缀 | string | - | |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user