mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
docs: fix demo (#38094)
* chore: update migrate.js * docs: update md * docs: update demo * test: fix snapshot * chore: move debug to code attr in migrate script * chore: update md Co-authored-by: PeachScript <scdzwyxst@gmail.com>
This commit is contained in:
MadCcc
GitHub
parent
0d1b7019a5
commit
e8cd2e5d3a
1
.jest.js
1
.jest.js
@ -40,6 +40,7 @@ module.exports = {
|
||||
'!components/**/*/interface.{ts,tsx}',
|
||||
'!components/*/__tests__/image.test.{ts,tsx}',
|
||||
'!components/__tests__/node.test.tsx',
|
||||
'!components/*/demo/*.tsx',
|
||||
],
|
||||
transformIgnorePatterns,
|
||||
globals: {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Affix, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [top, setTop] = useState(10);
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
/*
|
||||
* debug: true
|
||||
*/
|
||||
|
||||
import { Affix, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [top, setTop] = useState(10);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Affix, Button } from 'antd';
|
||||
import React from 'react';
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Affix, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [container, setContainer] = useState<HTMLDivElement | null>(null);
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
title: Affix
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
|
||||
demo:
|
||||
cols: 2
|
||||
group:
|
||||
title: Navigation
|
||||
order: 3
|
||||
---
|
||||
|
||||
Wrap Affix around another component to make it stick the viewport.
|
||||
@ -20,16 +22,16 @@ Please note that Affix should not cover other content on the page, especially wh
|
||||
<code src="./demo/basic.tsx">Basic</code>
|
||||
<code src="./demo/on-change.tsx">Callback</code>
|
||||
<code src="./demo/target.tsx">Container to scroll.</code>
|
||||
<code src="./demo/debug.tsx">debug</code>
|
||||
<code src="./demo/debug.tsx" debug>debug</code>
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ------------ | -------------------------------------------------- | --------------------------- | ------------ |
|
||||
| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |
|
||||
| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 |
|
||||
| target | Specifies the scrollable area DOM node | () => HTMLElement | () => window |
|
||||
| onChange | Callback for when Affix state is changed | (affixed?: boolean) => void | - |
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |
|
||||
| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 |
|
||||
| target | Specifies the scrollable area DOM node | () => HTMLElement | () => window |
|
||||
| onChange | Callback for when Affix state is changed | (affixed?: boolean) => void | - |
|
||||
|
||||
**Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
|
||||
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 固钉
|
||||
type: 导航
|
||||
title: Affix
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
|
||||
demo:
|
||||
cols: 2
|
||||
group:
|
||||
title: 导航
|
||||
order: 3
|
||||
---
|
||||
|
||||
将页面元素钉在可视范围。
|
||||
@ -21,16 +23,16 @@ demo:
|
||||
<code src="./demo/basic.tsx">基本</code>
|
||||
<code src="./demo/on-change.tsx">固定状态改变的回调</code>
|
||||
<code src="./demo/target.tsx">滚动容器</code>
|
||||
<code src="./demo/debug.tsx">调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678</code>
|
||||
<code src="./demo/debug.tsx" debug>调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678</code>
|
||||
|
||||
## API
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | ---------------------------------------------------------------------- | --------------------------- | ------------ |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - |
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | 0 |
|
||||
| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
|
||||
| onChange | 固定状态改变时触发的回调函数 | (affixed?: boolean) => void | - |
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - |
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | 0 |
|
||||
| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
|
||||
| onChange | 固定状态改变时触发的回调函数 | (affixed?: boolean) => void | - |
|
||||
|
||||
**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Alert, Button, Space } from 'antd';
|
||||
import React from 'react';
|
||||
import { Alert, Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
/*
|
||||
* iframe: 250
|
||||
*/
|
||||
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const App: React.FC = () => <Alert message="Success Text" type="success" />;
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
||||
console.log(e, 'I was closed.');
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const App: React.FC = () => <Alert message="Info Text" type="info" closeText="Close Now" />;
|
||||
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
/*
|
||||
* debug: true
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const icon = <SmileOutlined />;
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Alert, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { Alert, Button } from 'antd';
|
||||
|
||||
const { ErrorBoundary } = Alert;
|
||||
const ThrowError: React.FC = () => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import Marquee from 'react-fast-marquee';
|
||||
|
||||
const App: React.FC = () => (
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Alert } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [visible, setVisible] = useState(true);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
---
|
||||
category: Components
|
||||
type: Feedback
|
||||
title: Alert
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
|
||||
demo:
|
||||
cols: 2
|
||||
group:
|
||||
title: Feedback
|
||||
order: 6
|
||||
---
|
||||
|
||||
Alert component for feedback.
|
||||
@ -26,25 +28,25 @@ Alert component for feedback.
|
||||
<code src="./demo/loop-banner.tsx">Loop Banner</code>
|
||||
<code src="./demo/smooth-closed.tsx">Smoothly Unmount</code>
|
||||
<code src="./demo/error-boundary.tsx">ErrorBoundary</code>
|
||||
<code src="./demo/custom-icon.tsx">Custom Icon</code>
|
||||
<code src="./demo/custom-icon.tsx" debug>Custom Icon</code>
|
||||
<code src="./demo/action.tsx">Custom action</code>
|
||||
|
||||
## 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 | |
|
||||
| closable | Whether Alert can be closed | boolean | - | |
|
||||
| closeText | Close text to show | ReactNode | - | |
|
||||
| closeIcon | Custom close icon | ReactNode | `<CloseOutlined />` | 4.17.0 |
|
||||
| description | Additional content of Alert | ReactNode | - | |
|
||||
| icon | Custom icon, effective when `showIcon` is true | ReactNode | - | |
|
||||
| message | Content of Alert | ReactNode | - | |
|
||||
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true | |
|
||||
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` | |
|
||||
| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - | |
|
||||
| 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 | |
|
||||
| closable | Whether Alert can be closed | boolean | - | |
|
||||
| closeText | Close text to show | ReactNode | - | |
|
||||
| closeIcon | Custom close icon | ReactNode | `<CloseOutlined />` | 4.17.0 |
|
||||
| description | Additional content of Alert | ReactNode | - | |
|
||||
| icon | Custom icon, effective when `showIcon` is true | ReactNode | - | |
|
||||
| message | Content of Alert | ReactNode | - | |
|
||||
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true | |
|
||||
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` | |
|
||||
| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - | |
|
||||
|
||||
### Alert.ErrorBoundary
|
||||
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 警告提示
|
||||
type: 反馈
|
||||
title: Alert
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
|
||||
demo:
|
||||
cols: 2
|
||||
group:
|
||||
title: 反馈
|
||||
order: 6
|
||||
---
|
||||
|
||||
警告提示，展现需要关注的信息。
|
||||
@ -27,29 +29,29 @@ demo:
|
||||
<code src="./demo/loop-banner.tsx">轮播的公告</code>
|
||||
<code src="./demo/smooth-closed.tsx">平滑地卸载</code>
|
||||
<code src="./demo/error-boundary.tsx">React 错误处理</code>
|
||||
<code src="./demo/custom-icon.tsx">自定义图标</code>
|
||||
<code src="./demo/custom-icon.tsx" debug>自定义图标</code>
|
||||
<code src="./demo/action.tsx">操作</code>
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | -------------------------------------------------------------------- | ----------------------- | ----------------------------------------- | ------ |
|
||||
| action | 自定义操作项 | ReactNode | - | 4.9.0 |
|
||||
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
|
||||
| banner | 是否用作顶部公告 | boolean | false | |
|
||||
| closable | 默认不显示关闭按钮 | boolean | - | |
|
||||
| closeText | 自定义关闭按钮 | ReactNode | - | |
|
||||
| closeIcon | 自定义关闭 Icon | ReactNode | `<CloseOutlined />` | 4.17.0 |
|
||||
| description | 警告提示的辅助性文字介绍 | ReactNode | - | |
|
||||
| icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - | |
|
||||
| message | 警告提示内容 | ReactNode | - | |
|
||||
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true | |
|
||||
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` | |
|
||||
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| action | 自定义操作项 | ReactNode | - | 4.9.0 |
|
||||
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
|
||||
| banner | 是否用作顶部公告 | boolean | false | |
|
||||
| closable | 默认不显示关闭按钮 | boolean | - | |
|
||||
| closeText | 自定义关闭按钮 | ReactNode | - | |
|
||||
| closeIcon | 自定义关闭 Icon | ReactNode | `<CloseOutlined />` | 4.17.0 |
|
||||
| description | 警告提示的辅助性文字介绍 | ReactNode | - | |
|
||||
| icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - | |
|
||||
| message | 警告提示内容 | ReactNode | - | |
|
||||
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true | |
|
||||
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` | |
|
||||
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - | |
|
||||
|
||||
### Alert.ErrorBoundary
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | -------------------------------------------- | --------- | ----------------- | ---- |
|
||||
| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
|
||||
| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
|
||||
| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
import { Anchor } from 'antd';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
import { Anchor } from 'antd';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
import { Anchor } from 'antd';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
import { Anchor } from 'antd';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
import { Anchor } from 'antd';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Anchor } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Anchor } from 'antd';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
---
|
||||
category: Components
|
||||
type: Other
|
||||
cols: 2
|
||||
title: Anchor
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
|
||||
group:
|
||||
title: Other
|
||||
order: 7
|
||||
---
|
||||
|
||||
Hyperlinks to scroll on one page.
|
||||
@ -25,17 +27,17 @@ For displaying anchor hyperlinks on page and jumping between them.
|
||||
|
||||
### Anchor Props
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ---------------- | --------------------------------------------------------------------------------------------- | ----------------------------------- | ------------ | ------- |
|
||||
| affix | Fixed mode of Anchor | boolean | true | |
|
||||
| bounds | Bounding distance of anchor area | number | 5 | |
|
||||
| getContainer | Scrolling container | () => HTMLElement | () => window | |
|
||||
| getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - | |
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
|
||||
| showInkInFixed | Whether show ink-balls when `affix={false}` | boolean | false | |
|
||||
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | - | |
|
||||
| onChange | Listening for anchor link change | (currentActiveLink: string) => void | | |
|
||||
| onClick | Set the handler to handle `click` event | function(e: Event, link: Object) | - | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| affix | Fixed mode of Anchor | boolean | true | |
|
||||
| bounds | Bounding distance of anchor area | number | 5 | |
|
||||
| getContainer | Scrolling container | () => HTMLElement | () => window | |
|
||||
| getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - | |
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
|
||||
| showInkInFixed | Whether show ink-balls when `affix={false}` | boolean | false | |
|
||||
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | - | |
|
||||
| onChange | Listening for anchor link change | (currentActiveLink: string) => void | | |
|
||||
| onClick | Set the handler to handle `click` event | function(e: Event, link: Object) | - | |
|
||||
|
||||
### Link Props
|
||||
|
||||
|
||||
@ -2,9 +2,11 @@
|
||||
category: Components
|
||||
subtitle: 锚点
|
||||
cols: 2
|
||||
type: 其他
|
||||
title: Anchor
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
|
||||
group:
|
||||
title: 其他
|
||||
order: 7
|
||||
---
|
||||
|
||||
用于跳转到页面指定位置。
|
||||
@ -26,17 +28,17 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
|
||||
|
||||
### Anchor Props
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ---------------- | ----------------------------------------------------------------------------------- | ----------------------------------- | ------------ | ---- |
|
||||
| affix | 固定模式 | boolean | true | |
|
||||
| bounds | 锚点区域边界 | number | 5 | |
|
||||
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
|
||||
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
|
||||
| showInkInFixed | `affix={false}` 时是否显示小圆点 | boolean | false | |
|
||||
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | - | |
|
||||
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
|
||||
| onClick | `click` 事件的 handler | function(e: Event, link: Object) | - | |
|
||||
| 成员 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| affix | 固定模式 | boolean | true | |
|
||||
| bounds | 锚点区域边界 | number | 5 | |
|
||||
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
|
||||
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
|
||||
| showInkInFixed | `affix={false}` 时是否显示小圆点 | boolean | false | |
|
||||
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | - | |
|
||||
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
|
||||
| onClick | `click` 事件的 handler | function(e: Event, link: Object) | - | |
|
||||
|
||||
### Link Props
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { AutoComplete } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { AutoComplete } from 'antd';
|
||||
|
||||
const mockVal = (str: string, repeat = 1) => ({
|
||||
value: str.repeat(repeat),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const renderTitle = (title: string) => (
|
||||
<span>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
/*
|
||||
* debug: true
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { AutoComplete, Button, Form, Input, TreeSelect } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { AutoComplete } from 'antd';
|
||||
import React from 'react';
|
||||
import { AutoComplete } from 'antd';
|
||||
|
||||
const options = [
|
||||
{ value: 'Burns Bay Road' },
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { AutoComplete } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { AutoComplete } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
/*
|
||||
* debug: true
|
||||
*/
|
||||
|
||||
import { AutoComplete, Switch, Space } from 'antd';
|
||||
import React from 'react';
|
||||
import { AutoComplete, Switch, Space } from 'antd';
|
||||
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalAutoComplete } = AutoComplete;
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React, { useState } from 'react';
|
||||
/*
|
||||
* version: 4.19.0
|
||||
*/
|
||||
|
||||
import { AutoComplete, Space } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const mockVal = (str: string, repeat = 1) => ({
|
||||
value: str.repeat(repeat),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
import type { SelectProps } from 'antd/es/select';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
cols: 2
|
||||
title: AutoComplete
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
|
||||
group:
|
||||
title: Data Entry
|
||||
order: 4
|
||||
---
|
||||
|
||||
Autocomplete function of input field.
|
||||
@ -27,38 +29,38 @@ The differences with Select are:
|
||||
<code src="./demo/certain-category.tsx">Lookup-Patterns - Certain Category</code>
|
||||
<code src="./demo/uncertain-category.tsx">Lookup-Patterns - Uncertain Category</code>
|
||||
<code src="./demo/status.tsx">Status</code>
|
||||
<code src="./demo/form-debug.tsx">Debug in Form</code>
|
||||
<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/form-debug.tsx" debug>Debug in Form</code>
|
||||
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------ | ------- |
|
||||
| allowClear | Show clear button | boolean | false | |
|
||||
| autoFocus | If get focus when component mounted | boolean | false | |
|
||||
| backfill | If backfill selected item the input when using keyboard | boolean | false | |
|
||||
| children (for customize input element) | Customize input element | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps> | <Input /> | |
|
||||
| children (for dataSource) | Data source to auto complete | React.ReactElement<OptionProps> \| Array<React.ReactElement<OptionProps>> | - | |
|
||||
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
|
||||
| defaultOpen | Initial open state of dropdown | boolean | - | |
|
||||
| defaultValue | Initial selected option | string | - | |
|
||||
| disabled | Whether disabled select | boolean | false | |
|
||||
| popupClassName | The className of dropdown menu | string | - | 4.23.0 |
|
||||
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | |
|
||||
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true | |
|
||||
| notFoundContent | Specify content to show when no result matches | string | `Not Found` | |
|
||||
| open | Controlled open state of dropdown | boolean | - | |
|
||||
| options | Select options. Will get better perf than jsx definition | { label, value }\[] | - | |
|
||||
| placeholder | The placeholder of input | string | - | |
|
||||
| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
|
||||
| value | Selected option | string | - | |
|
||||
| onBlur | Called when leaving the component | function() | - | |
|
||||
| onChange | Called when selecting an option or changing an input value | function(value) | - | |
|
||||
| onDropdownVisibleChange | Call when dropdown open | function(open) | - | |
|
||||
| onFocus | Called when entering the component | function() | - | |
|
||||
| onSearch | Called when searching items | function(value) | - | |
|
||||
| onSelect | Called when a option is selected. param is option's value and option instance | function(value, option) | - | |
|
||||
| onClear | Called when clear | function | - | 4.6.0 |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | Show clear button | boolean | false | |
|
||||
| autoFocus | If get focus when component mounted | boolean | false | |
|
||||
| backfill | If backfill selected item the input when using keyboard | boolean | false | |
|
||||
| children (for customize input element) | Customize input element | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps> | <Input /> | |
|
||||
| children (for dataSource) | Data source to auto complete | React.ReactElement<OptionProps> \| Array<React.ReactElement<OptionProps>> | - | |
|
||||
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
|
||||
| defaultOpen | Initial open state of dropdown | boolean | - | |
|
||||
| defaultValue | Initial selected option | string | - | |
|
||||
| disabled | Whether disabled select | boolean | false | |
|
||||
| popupClassName | The className of dropdown menu | string | - | 4.23.0 |
|
||||
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | |
|
||||
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true | |
|
||||
| notFoundContent | Specify content to show when no result matches | string | `Not Found` | |
|
||||
| open | Controlled open state of dropdown | boolean | - | |
|
||||
| options | Select options. Will get better perf than jsx definition | { label, value }\[] | - | |
|
||||
| placeholder | The placeholder of input | string | - | |
|
||||
| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
|
||||
| value | Selected option | string | - | |
|
||||
| onBlur | Called when leaving the component | function() | - | |
|
||||
| onChange | Called when selecting an option or changing an input value | function(value) | - | |
|
||||
| onDropdownVisibleChange | Call when dropdown open | function(open) | - | |
|
||||
| onFocus | Called when entering the component | function() | - | |
|
||||
| onSearch | Called when searching items | function(value) | - | |
|
||||
| onSelect | Called when a option is selected. param is option's value and option instance | function(value, option) | - | |
|
||||
| onClear | Called when clear | function | - | 4.6.0 |
|
||||
|
||||
## Methods
|
||||
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 自动完成
|
||||
type: 数据录入
|
||||
cols: 2
|
||||
title: AutoComplete
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
|
||||
group:
|
||||
title: 数据录入
|
||||
order: 4
|
||||
---
|
||||
|
||||
输入框自动完成功能。
|
||||
@ -28,39 +30,39 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
|
||||
<code src="./demo/certain-category.tsx">查询模式 - 确定类目</code>
|
||||
<code src="./demo/uncertain-category.tsx">查询模式 - 不确定类目</code>
|
||||
<code src="./demo/status.tsx">自定义状态</code>
|
||||
<code src="./demo/form-debug.tsx">在 Form 中 Debug</code>
|
||||
<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/form-debug.tsx" debug>在 Form 中 Debug</code>
|
||||
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------- | ------ |
|
||||
| allowClear | 支持清除 | boolean | false | |
|
||||
| autoFocus | 自动获取焦点 | boolean | false | |
|
||||
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
|
||||
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> \| Array<React.ReactElement<OptionProps>> | - | |
|
||||
| children (自定义输入框) | 自定义输入框 | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps> | <Input /> | |
|
||||
| defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | |
|
||||
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
|
||||
| defaultValue | 指定默认选中的条目 | string | - | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| popupClassName | 下拉菜单的 className 属性 | string | - | 4.23.0 |
|
||||
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true | |
|
||||
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true | |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
|
||||
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | - | |
|
||||
| open | 是否展开下拉菜单 | boolean | - | |
|
||||
| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }\[] | - | |
|
||||
| placeholder | 输入框提示 | string | - | |
|
||||
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
||||
| value | 指定当前选中的条目 | string | - | |
|
||||
| onBlur | 失去焦点时的回调 | function() | - | |
|
||||
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | - | |
|
||||
| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | |
|
||||
| onFocus | 获得焦点时的回调 | function() | - | |
|
||||
| onSearch | 搜索补全项的时候调用 | function(value) | - | |
|
||||
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | - | |
|
||||
| onClear | 清除内容时回调 | function | - | 4.6.0 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | 支持清除 | boolean | false | |
|
||||
| autoFocus | 自动获取焦点 | boolean | false | |
|
||||
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
|
||||
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> \| Array<React.ReactElement<OptionProps>> | - | |
|
||||
| children (自定义输入框) | 自定义输入框 | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps> | <Input /> | |
|
||||
| defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | |
|
||||
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
|
||||
| defaultValue | 指定默认选中的条目 | string | - | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| popupClassName | 下拉菜单的 className 属性 | string | - | 4.23.0 |
|
||||
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true | |
|
||||
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true | |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
|
||||
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | - | |
|
||||
| open | 是否展开下拉菜单 | boolean | - | |
|
||||
| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }\[] | - | |
|
||||
| placeholder | 输入框提示 | string | - | |
|
||||
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
||||
| value | 指定当前选中的条目 | string | - | |
|
||||
| onBlur | 失去焦点时的回调 | function() | - | |
|
||||
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | - | |
|
||||
| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | |
|
||||
| onFocus | 获得焦点时的回调 | function() | - | |
|
||||
| onSearch | 搜索补全项的时候调用 | function(value) | - | |
|
||||
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | - | |
|
||||
| onClear | 清除内容时回调 | function | - | 4.6.0 |
|
||||
|
||||
## 方法
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Avatar, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { Avatar, Button } from 'antd';
|
||||
|
||||
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
|
||||
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
/*
|
||||
* debug: true
|
||||
*/
|
||||
|
||||
import { Avatar } from 'antd';
|
||||
import React from 'react';
|
||||
import { Avatar } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Divider, Tooltip } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { AntDesignOutlined } from '@ant-design/icons';
|
||||
import { Avatar } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Avatar
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
/*
|
||||
* debug: true
|
||||
*/
|
||||
|
||||
import { Avatar, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { Avatar, Button } from 'antd';
|
||||
|
||||
type SizeType = 'large' | 'small' | 'default' | number;
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Image } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Avatar
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
|
||||
demo:
|
||||
cols: 2
|
||||
group:
|
||||
title: Data Display
|
||||
order: 5
|
||||
---
|
||||
|
||||
Avatars can be used to represent people or objects. It supports images, `Icon`s, or letters.
|
||||
@ -16,35 +18,35 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
|
||||
<code src="./demo/dynamic.tsx">Autoset Font Size</code>
|
||||
<code src="./demo/badge.tsx">With Badge</code>
|
||||
<code src="./demo/group.tsx">Avatar.Group</code>
|
||||
<code src="./demo/toggle-debug.tsx">Calculate text style when hiding</code>
|
||||
<code src="./demo/toggle-debug.tsx" debug>Calculate text style when hiding</code>
|
||||
<code src="./demo/responsive.tsx">Responsive Size</code>
|
||||
<code src="./demo/fallback.tsx">Fallback</code>
|
||||
<code src="./demo/fallback.tsx" debug>Fallback</code>
|
||||
|
||||
## API
|
||||
|
||||
### Avatar
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ----------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | --------- | ---------------- |
|
||||
| alt | This attribute defines the alternative text describing the image | string | - | |
|
||||
| gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |
|
||||
| icon | Custom icon type for an icon avatar | ReactNode | - | |
|
||||
| shape | The shape of avatar | `circle` \| `square` | `circle` | |
|
||||
| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
|
||||
| src | The address of the image for an image avatar or image element | string \| ReactNode | - | ReactNode: 4.8.0 |
|
||||
| srcSet | A list of sources to use for different screen resolutions | string | - | |
|
||||
| draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | - | |
|
||||
| crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.17.0 |
|
||||
| onError | Handler when img load error, return false to prevent default fallback behavior | () => boolean | - | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| alt | This attribute defines the alternative text describing the image | string | - | |
|
||||
| gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |
|
||||
| icon | Custom icon type for an icon avatar | ReactNode | - | |
|
||||
| shape | The shape of avatar | `circle` \| `square` | `circle` | |
|
||||
| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
|
||||
| src | The address of the image for an image avatar or image element | string \| ReactNode | - | ReactNode: 4.8.0 |
|
||||
| srcSet | A list of sources to use for different screen resolutions | string | - | |
|
||||
| draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | - | |
|
||||
| crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.17.0 |
|
||||
| onError | Handler when img load error, return false to prevent default fallback behavior | () => boolean | - | |
|
||||
|
||||
> Tip: You can set `icon` or `children` as the fallback for image load error, with the priority of `icon` > `children`
|
||||
|
||||
### Avatar.Group (4.5.0+)
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ------------------- | ---------------------------------------- | --------------------------------------------------------------------------- | --------- | ------- |
|
||||
| maxCount | Max avatars to show | number | - | |
|
||||
| maxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` | |
|
||||
| maxPopoverTrigger | Set the trigger of excess avatar Popover | `hover` \| `focus` \| `click` | `hover` | 4.17.0 |
|
||||
| maxStyle | The style of excess avatar style | CSSProperties | - | |
|
||||
| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| maxCount | Max avatars to show | number | - | |
|
||||
| maxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` | |
|
||||
| maxPopoverTrigger | Set the trigger of excess avatar Popover | `hover` \| `focus` \| `click` | `hover` | 4.17.0 |
|
||||
| maxStyle | The style of excess avatar style | CSSProperties | - | |
|
||||
| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 头像
|
||||
type: 数据展示
|
||||
title: Avatar
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
|
||||
demo:
|
||||
cols: 2
|
||||
group:
|
||||
title: 数据展示
|
||||
order: 5
|
||||
---
|
||||
|
||||
用来代表用户或事物，支持图片、图标或字符展示。
|
||||
@ -21,35 +23,35 @@ demo:
|
||||
<code src="./demo/dynamic.tsx">自动调整字符大小</code>
|
||||
<code src="./demo/badge.tsx">带徽标的头像</code>
|
||||
<code src="./demo/group.tsx">Avatar.Group</code>
|
||||
<code src="./demo/toggle-debug.tsx">隐藏情况下计算字符对齐</code>
|
||||
<code src="./demo/toggle-debug.tsx" debug>隐藏情况下计算字符对齐</code>
|
||||
<code src="./demo/responsive.tsx">响应式尺寸</code>
|
||||
<code src="./demo/fallback.tsx">图片不存在时</code>
|
||||
<code src="./demo/fallback.tsx" debug>图片不存在时</code>
|
||||
|
||||
## API
|
||||
|
||||
### Avatar
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | ------------------------------------------------------------- | --------------------------------------------------------------------------- | --------- | ---------------- |
|
||||
| alt | 图像无法显示时的替代文本 | string | - | |
|
||||
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
|
||||
| icon | 设置头像的自定义图标 | ReactNode | - | |
|
||||
| shape | 指定头像的形状 | `circle` \| `square` | `circle` | |
|
||||
| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
|
||||
| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
|
||||
| srcSet | 设置图片类头像响应式资源地址 | string | - | |
|
||||
| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | - | |
|
||||
| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.17.0 |
|
||||
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| alt | 图像无法显示时的替代文本 | string | - | |
|
||||
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
|
||||
| icon | 设置头像的自定义图标 | ReactNode | - | |
|
||||
| shape | 指定头像的形状 | `circle` \| `square` | `circle` | |
|
||||
| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
|
||||
| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
|
||||
| srcSet | 设置图片类头像响应式资源地址 | string | - | |
|
||||
| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | - | |
|
||||
| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.17.0 |
|
||||
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
|
||||
|
||||
> Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
|
||||
|
||||
### Avatar.Group (4.5.0+)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------------- | ------------------------------- | --------------------------------------------------------------------------- | --------- | ------ |
|
||||
| maxCount | 显示的最大头像个数 | number | - | |
|
||||
| maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` | |
|
||||
| maxPopoverTrigger | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click` | `hover` | 4.17.0 |
|
||||
| maxStyle | 多余头像样式 | CSSProperties | - | |
|
||||
| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| maxCount | 显示的最大头像个数 | number | - | |
|
||||
| maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` | |
|
||||
| maxPopoverTrigger | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click` | `hover` | 4.17.0 |
|
||||
| maxStyle | 多余头像样式 | CSSProperties | - | |
|
||||
| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { BackTop } from 'antd';
|
||||
import React from 'react';
|
||||
import { BackTop } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
/*
|
||||
* iframe: 400
|
||||
*/
|
||||
|
||||
import { BackTop } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
height: 40,
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
category: Components
|
||||
type: Other
|
||||
title: BackTop
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
|
||||
demo:
|
||||
cols: 2
|
||||
group: Other
|
||||
---
|
||||
|
||||
`BackTop` makes it easy to go back to the top of the page.
|
||||
@ -25,9 +25,9 @@ demo:
|
||||
>
|
||||
> If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ---------------- | --------------------------------------------------------------------------- | ----------------- | ------------ | ------- |
|
||||
| duration | Time to return to top（ms） | number | 450 | 4.4.0 |
|
||||
| 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 | |
|
||||
| onClick | A callback function, which can be executed when you click the button | function | - | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| duration | Time to return to top（ms） | number | 450 | 4.4.0 |
|
||||
| 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 | |
|
||||
| onClick | A callback function, which can be executed when you click the button | function | - | |
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
---
|
||||
category: Components
|
||||
type: 其他
|
||||
subtitle: 回到顶部
|
||||
title: BackTop
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
|
||||
demo:
|
||||
cols: 2
|
||||
group: 其他
|
||||
---
|
||||
|
||||
返回页面顶部的操作按钮。
|
||||
@ -26,9 +26,9 @@ demo:
|
||||
>
|
||||
> 自定义样式宽高不大于 40px \* 40px。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ---------------- | ------------------------------------------------------------- | ----------------- | ------------ | ----- |
|
||||
| duration | 回到顶部所需时间（ms） | number | 450 | 4.4.0 |
|
||||
| target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window | |
|
||||
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
||||
| onClick | 点击按钮的回调函数 | function | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| duration | 回到顶部所需时间（ms） | number | 450 | 4.4.0 |
|
||||
| target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window | |
|
||||
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
||||
| onClick | 点击按钮的回调函数 | function | - | |
|
||||
|
||||
@ -566,10 +566,7 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
<<<<<<< HEAD
|
||||
exports[`renders ./components/badge/demo/dot.tsx extend context correctly 1`] = `
|
||||
=======
|
||||
exports[`renders ./components/badge/demo/colorful-with-count-debug.md extend context correctly 1`] = `
|
||||
exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
@ -1081,8 +1078,7 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/dot.md extend context correctly 1`] = `
|
||||
>>>>>>> next
|
||||
exports[`renders ./components/badge/demo/dot.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-badge"
|
||||
|
||||
@ -566,10 +566,7 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
<<<<<<< HEAD
|
||||
exports[`renders ./components/badge/demo/dot.tsx correctly 1`] = `
|
||||
=======
|
||||
exports[`renders ./components/badge/demo/colorful-with-count-debug.md correctly 1`] = `
|
||||
exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
style="display:inline-block;vertical-align:middle"
|
||||
@ -1081,8 +1078,7 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
|
||||
>>>>>>> next
|
||||
exports[`renders ./components/badge/demo/dot.tsx correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-badge"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { ClockCircleOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Badge, Button, Divider, Switch } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const ButtonGroup = Button.Group;
|
||||
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
/*
|
||||
* debug: true
|
||||
*/
|
||||
|
||||
import { Badge } from 'antd';
|
||||
import React from 'react';
|
||||
import { Badge } from 'antd';
|
||||
|
||||
const colors = [
|
||||
'pink',
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Badge, Divider, Space } from 'antd';
|
||||
import React from 'react';
|
||||
import { Badge, Divider, Space } from 'antd';
|
||||
|
||||
const colors = [
|
||||
'pink',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { NotificationOutlined } from '@ant-design/icons';
|
||||
import { Badge } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<a href="#">
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
/*
|
||||
* debug: true
|
||||
*/
|
||||
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ClockCircleOutlined } from '@ant-design/icons';
|
||||
import { Badge, Space, Switch } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [show, setShow] = useState(true);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Badge count={5} offset={[10, 10]}>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Badge, Card } from 'antd';
|
||||
import React from 'react';
|
||||
import { Badge, Card } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
/*
|
||||
* debug: true
|
||||
*/
|
||||
|
||||
import { Badge, Card, Space } from 'antd';
|
||||
import React from 'react';
|
||||
import { Badge, Card, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Badge, Space } from 'antd';
|
||||
import React from 'react';
|
||||
import { Badge, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
/*
|
||||
* debug: true
|
||||
*/
|
||||
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Badge
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
|
||||
demo:
|
||||
cols: 2
|
||||
group: Data Display
|
||||
---
|
||||
|
||||
Small numerical value or status descriptor for UI elements.
|
||||
@ -26,32 +26,32 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
|
||||
<code src="./demo/status.tsx">Status</code>
|
||||
<code src="./demo/colorful.tsx">Colorful Badge</code>
|
||||
<code src="./demo/ribbbon.tsx">Ribbon</code>
|
||||
<code src="./demo/ribbon-debug.tsx">Ribbon Debug</code>
|
||||
<code src="./demo/mix.tsx">Mixed usage</code>
|
||||
<code src="./demo/title.tsx">Title</code>
|
||||
<code src="./demo/colorful-with-count-debug.tsx">Colorful Badge support count Debug</code>
|
||||
<code src="./demo/ribbon-debug.tsx" debug>Ribbon Debug</code>
|
||||
<code src="./demo/mix.tsx" debug>Mixed usage</code>
|
||||
<code src="./demo/title.tsx" debug>Title</code>
|
||||
<code src="./demo/colorful-with-count-debug.tsx" debug>Colorful Badge support count Debug</code>
|
||||
|
||||
## API
|
||||
|
||||
### Badge
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ------------- | -------------------------------------------------------------------- | -------------------------------------------------------------- | ------- | ------- |
|
||||
| color | Customize Badge dot color | string | - | |
|
||||
| count | Number to show in badge | ReactNode | - | |
|
||||
| dot | Whether to display a red dot instead of `count` | boolean | false | |
|
||||
| offset | Set offset of the badge dot | \[number, number] | - | |
|
||||
| overflowCount | Max count to show | number | 99 | |
|
||||
| showZero | Whether to show badge when `count` is zero | boolean | false | |
|
||||
| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | 4.6.0 |
|
||||
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - | |
|
||||
| text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - | |
|
||||
| title | Text to show when hovering over the badge | string | - | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | Customize Badge dot color | string | - | |
|
||||
| count | Number to show in badge | ReactNode | - | |
|
||||
| dot | Whether to display a red dot instead of `count` | boolean | false | |
|
||||
| offset | Set offset of the badge dot | \[number, number] | - | |
|
||||
| overflowCount | Max count to show | number | 99 | |
|
||||
| showZero | Whether to show badge when `count` is zero | boolean | false | |
|
||||
| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | 4.6.0 |
|
||||
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - | |
|
||||
| text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - | |
|
||||
| title | Text to show when hovering over the badge | string | - | |
|
||||
|
||||
### Badge.Ribbon (4.5.0+)
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------- | --------------------------------------------------------------------------------- | ---------------- | ------- | ------- |
|
||||
| color | Customize Ribbon color | string | - | |
|
||||
| placement | The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR) | `start` \| `end` | `end` | |
|
||||
| text | Content inside the Ribbon | ReactNode | - | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | Customize Ribbon color | string | - | |
|
||||
| placement | The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR) | `start` \| `end` | `end` | |
|
||||
| text | Content inside the Ribbon | ReactNode | - | |
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 徽标数
|
||||
type: 数据展示
|
||||
title: Badge
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
|
||||
demo:
|
||||
cols: 2
|
||||
group: 数据展示
|
||||
---
|
||||
|
||||
图标右上角的圆形徽标数字。
|
||||
@ -27,32 +27,32 @@ demo:
|
||||
<code src="./demo/status.tsx">状态点</code>
|
||||
<code src="./demo/colorful.tsx">多彩徽标</code>
|
||||
<code src="./demo/ribbbon.tsx">缎带</code>
|
||||
<code src="./demo/ribbon-debug.tsx">Ribbon Debug</code>
|
||||
<code src="./demo/mix.tsx">各种混用的情况</code>
|
||||
<code src="./demo/title.tsx">自定义标题</code>
|
||||
<code src="./demo/colorful-with-count-debug.tsx">多彩徽标支持 count 显示 Debug</code>
|
||||
<code src="./demo/ribbon-debug.tsx" debug>Ribbon Debug</code>
|
||||
<code src="./demo/mix.tsx" debug>各种混用的情况</code>
|
||||
<code src="./demo/title.tsx" debug>自定义标题</code>
|
||||
<code src="./demo/colorful-with-count-debug.tsx" debug>多彩徽标支持 count 显示 Debug</code>
|
||||
|
||||
## API
|
||||
|
||||
### Badge
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------- | ------ | ----- |
|
||||
| color | 自定义小圆点的颜色 | string | - | |
|
||||
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode | - | |
|
||||
| dot | 不展示数字，只有一个小红点 | boolean | false | |
|
||||
| offset | 设置状态点的位置偏移 | \[number, number] | - | |
|
||||
| overflowCount | 展示封顶的数字值 | number | 99 | |
|
||||
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | |
|
||||
| size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | 4.6.0 |
|
||||
| status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - | |
|
||||
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | ReactNode | - | |
|
||||
| title | 设置鼠标放在状态点上时显示的文字 | string | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | 自定义小圆点的颜色 | string | - | |
|
||||
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode | - | |
|
||||
| dot | 不展示数字，只有一个小红点 | boolean | false | |
|
||||
| offset | 设置状态点的位置偏移 | \[number, number] | - | |
|
||||
| overflowCount | 展示封顶的数字值 | number | 99 | |
|
||||
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | |
|
||||
| size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | 4.6.0 |
|
||||
| status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - | |
|
||||
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | ReactNode | - | |
|
||||
| title | 设置鼠标放在状态点上时显示的文字 | string | - | |
|
||||
|
||||
### Badge.Ribbon (4.5.0+)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | --------------------------------------------------------- | ---------------- | ------ | ---- |
|
||||
| color | 自定义缎带的颜色 | string | - | |
|
||||
| placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end` | |
|
||||
| text | 缎带中填入的内容 | ReactNode | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | 自定义缎带的颜色 | string | - | |
|
||||
| placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end` | |
|
||||
| text | 缎带中填入的内容 | ReactNode | - | |
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Breadcrumb } from 'antd';
|
||||
import React from 'react';
|
||||
import { Breadcrumb } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Breadcrumb>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Breadcrumb, Menu } from 'antd';
|
||||
import React from 'react';
|
||||
import { Breadcrumb, Menu } from 'antd';
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
/*
|
||||
* iframe: 200
|
||||
* reactRouter: react-router-dom
|
||||
*/
|
||||
|
||||
import { Alert, Breadcrumb } from 'antd';
|
||||
import React from 'react';
|
||||
import { HashRouter, Link, Route, Routes, useLocation } from 'react-router-dom';
|
||||
|
||||
const Apps = () => (
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Breadcrumb } from 'antd';
|
||||
import React from 'react';
|
||||
import { Breadcrumb } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Breadcrumb separator="">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Breadcrumb } from 'antd';
|
||||
import React from 'react';
|
||||
import { Breadcrumb } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Breadcrumb separator=">">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { Breadcrumb } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Breadcrumb>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
group: Navigation
|
||||
title: Breadcrumb
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
|
||||
demo:
|
||||
@ -28,28 +28,28 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
|
||||
|
||||
### Breadcrumb
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ---------- | --------------------------------------- | ------------------------------------------- | ------- | ------- |
|
||||
| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | - | |
|
||||
| params | Routing parameters | object | - | |
|
||||
| routes | The routing stack information of router | [routes\[\]](#routes) | - | |
|
||||
| separator | Custom separator | ReactNode | `/` | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | - | |
|
||||
| params | Routing parameters | object | - | |
|
||||
| routes | The routing stack information of router | [routes\[\]](#routes) | - | |
|
||||
| separator | Custom separator | ReactNode | `/` | |
|
||||
|
||||
### Breadcrumb.Item
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ------------- | ------------------------------------- | -------------------------------------- | ------- | ------- |
|
||||
| className | The additional css class | string | - | |
|
||||
| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - | |
|
||||
| href | Target of hyperlink | string | - | |
|
||||
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| onClick | Set the handler to handle click event | (e:MouseEvent) => void | - | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| className | The additional css class | string | - | |
|
||||
| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - | |
|
||||
| href | Target of hyperlink | string | - | |
|
||||
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| onClick | Set the handler to handle click event | (e:MouseEvent) => void | - | |
|
||||
|
||||
### Breadcrumb.Separator
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------- | ---------------- | --------- | ------- | ------- |
|
||||
| children | Custom separator | ReactNode | `/` | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| children | Custom separator | ReactNode | `/` | |
|
||||
|
||||
> When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 面包屑
|
||||
type: 导航
|
||||
group: 导航
|
||||
title: Breadcrumb
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
|
||||
demo:
|
||||
@ -29,28 +29,28 @@ demo:
|
||||
|
||||
### Breadcrumb
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ---------- | ---------------------------------------- | ------------------------------------------- | ------ | ---- |
|
||||
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | |
|
||||
| params | 路由的参数 | object | - | |
|
||||
| routes | router 的路由栈信息 | [routes\[\]](#routes) | - | |
|
||||
| separator | 分隔符自定义 | ReactNode | `/` | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | |
|
||||
| params | 路由的参数 | object | - | |
|
||||
| routes | router 的路由栈信息 | [routes\[\]](#routes) | - | |
|
||||
| separator | 分隔符自定义 | ReactNode | `/` | |
|
||||
|
||||
### Breadcrumb.Item
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------- | ------------------------ | -------------------------------------- | ------ | ---- |
|
||||
| className | 自定义类名 | string | - | |
|
||||
| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - | |
|
||||
| href | 链接的目的地 | string | - | |
|
||||
| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| onClick | 单击事件 | (e:MouseEvent) => void | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| className | 自定义类名 | string | - | |
|
||||
| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - | |
|
||||
| href | 链接的目的地 | string | - | |
|
||||
| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| onClick | 单击事件 | (e:MouseEvent) => void | - | |
|
||||
|
||||
### Breadcrumb.Separator
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | -------------- | --------- | ------ | ---- |
|
||||
| children | 要显示的分隔符 | ReactNode | `/` | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| children | 要显示的分隔符 | ReactNode | `/` | |
|
||||
|
||||
> 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
/*
|
||||
* debug: true
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { PoweroffOutlined } from '@ant-design/icons';
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const Text1 = () => '部署';
|
||||
const Text2 = () => <span>部署</span>;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div className="site-button-ghost-wrapper">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { Button, Tooltip } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -1,11 +1,7 @@
|
||||
/*
|
||||
* debug: true
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { DownloadOutlined } from '@ant-design/icons';
|
||||
import { Button, Tooltip } from 'antd';
|
||||
import type { ButtonGroupProps } from 'antd/es/button';
|
||||
import React from 'react';
|
||||
|
||||
const getGroup = (props?: ButtonGroupProps) => (
|
||||
<div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { PoweroffOutlined } from '@ant-design/icons';
|
||||
import { Button, Space } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [loadings, setLoadings] = useState<boolean[]>([]);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown, Menu } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const onMenuClick: MenuProps['onClick'] = e => {
|
||||
console.log('click', e);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { DownloadOutlined } from '@ant-design/icons';
|
||||
import { Button, Radio } from 'antd';
|
||||
import type { SizeType } from 'antd/es/config-provider/SizeContext';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [size, setSize] = useState<SizeType>('large');
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
---
|
||||
category: Components
|
||||
type: General
|
||||
title: Button
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
|
||||
demo:
|
||||
cols: 2
|
||||
group:
|
||||
title: General
|
||||
order: 1
|
||||
---
|
||||
|
||||
To trigger an operation.
|
||||
@ -39,28 +41,28 @@ And 4 other properties additionally.
|
||||
<code src="./demo/ghost.tsx">Ghost Button</code>
|
||||
<code src="./demo/danger.tsx">Danger Buttons</code>
|
||||
<code src="./demo/block.tsx">Block Button</code>
|
||||
<code src="./demo/legacy-group.tsx">Deprecated Button Group</code>
|
||||
<code src="./demo/chinese-chars-loading.tsx">Loading style bug</code>
|
||||
<code src="./demo/legacy-group.tsx" debug>Deprecated Button Group</code>
|
||||
<code src="./demo/chinese-chars-loading.tsx" debug>Loading style bug</code>
|
||||
|
||||
## API
|
||||
|
||||
Different button styles can be generated by setting Button properties. The recommended order is: `type` -> `shape` -> `size` -> `loading` -> `disabled`.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------- | ------- |
|
||||
| block | Option to fit button width to its parent width | boolean | false | |
|
||||
| danger | Set the danger status of button | boolean | false | |
|
||||
| disabled | Disabled state of button | boolean | false | |
|
||||
| ghost | Make background transparent and invert text and border colors | boolean | false | |
|
||||
| href | Redirect url of link button | string | - | |
|
||||
| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
|
||||
| icon | Set the icon component of button | ReactNode | - | |
|
||||
| loading | Set the loading status of button | boolean \| { delay: number } | false | |
|
||||
| shape | Can be set button shape | `default` \| `circle` \| `round` | 'default' | |
|
||||
| size | Set the size of button | `large` \| `middle` \| `small` | `middle` | |
|
||||
| target | Same as target attribute of a, works when href is specified | string | - | |
|
||||
| type | Can be set to `primary` `ghost` `dashed` `link` `text` `default` | string | `default` | |
|
||||
| onClick | Set the handler to handle `click` event | (event) => void | - | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| block | Option to fit button width to its parent width | boolean | false | |
|
||||
| danger | Set the danger status of button | boolean | false | |
|
||||
| disabled | Disabled state of button | boolean | false | |
|
||||
| ghost | Make background transparent and invert text and border colors | boolean | false | |
|
||||
| href | Redirect url of link button | string | - | |
|
||||
| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
|
||||
| icon | Set the icon component of button | ReactNode | - | |
|
||||
| loading | Set the loading status of button | boolean \| { delay: number } | false | |
|
||||
| shape | Can be set button shape | `default` \| `circle` \| `round` | 'default' | |
|
||||
| size | Set the size of button | `large` \| `middle` \| `small` | `middle` | |
|
||||
| target | Same as target attribute of a, works when href is specified | string | - | |
|
||||
| type | Can be set to `primary` `ghost` `dashed` `link` `text` `default` | string | `default` | |
|
||||
| onClick | Set the handler to handle `click` event | (event) => void | - | |
|
||||
|
||||
It accepts all props which native buttons support.
|
||||
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
---
|
||||
category: Components
|
||||
type: 通用
|
||||
title: Button
|
||||
subtitle: 按钮
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
|
||||
demo:
|
||||
cols: 2
|
||||
group:
|
||||
title: 通用
|
||||
order: 1
|
||||
---
|
||||
|
||||
按钮用于开始一个即时操作。
|
||||
@ -42,8 +44,8 @@ demo:
|
||||
<code src="./demo/ghost.tsx">幽灵按钮</code>
|
||||
<code src="./demo/danger.tsx">危险按钮</code>
|
||||
<code src="./demo/block.tsx">Block 按钮</code>
|
||||
<code src="./demo/legacy-group.tsx">废弃的 Block 组</code>
|
||||
<code src="./demo/chinese-chars-loading.tsx">加载中状态 bug 还原</code>
|
||||
<code src="./demo/legacy-group.tsx" debug>废弃的 Block 组</code>
|
||||
<code src="./demo/chinese-chars-loading.tsx" debug>加载中状态 bug 还原</code>
|
||||
|
||||
## API
|
||||
|
||||
@ -51,21 +53,21 @@ demo:
|
||||
|
||||
按钮的属性说明如下：
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- | --------- | ---- |
|
||||
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
||||
| danger | 设置危险按钮 | boolean | false | |
|
||||
| disabled | 按钮失效状态 | boolean | false | |
|
||||
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
||||
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
||||
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
|
||||
| icon | 设置按钮的图标组件 | ReactNode | - | |
|
||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | |
|
||||
| shape | 设置按钮形状 | `default` \| `circle` \| `round` | 'default' | |
|
||||
| size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` | |
|
||||
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
||||
| type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
|
||||
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
||||
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
||||
| danger | 设置危险按钮 | boolean | false | |
|
||||
| disabled | 按钮失效状态 | boolean | false | |
|
||||
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
||||
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
||||
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
|
||||
| icon | 设置按钮的图标组件 | ReactNode | - | |
|
||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | |
|
||||
| shape | 设置按钮形状 | `default` \| `circle` \| `round` | 'default' | |
|
||||
| size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` | |
|
||||
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
||||
| type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
|
||||
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
||||
|
||||
支持原生 button 的其他所有属性。
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Calendar } from 'antd';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Calendar } from 'antd';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import { Calendar, Col, Radio, Row, Select, Typography } from 'antd';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import dayLocaleData from 'dayjs/plugin/localeData';
|
||||
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
|
||||
import React from 'react';
|
||||
|
||||
dayjs.extend(dayLocaleData);
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import type { BadgeProps } from 'antd';
|
||||
import { Badge, Calendar } from 'antd';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import React from 'react';
|
||||
|
||||
const getListData = (value: Dayjs) => {
|
||||
let listData;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Alert, Calendar } from 'antd';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import dayjs from 'dayjs';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [value, setValue] = useState(() => dayjs('2017-01-25'));
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
group: Data Display
|
||||
title: Calendar
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
Container for displaying data in calendar form.
|
||||
@ -37,23 +39,23 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
|
||||
/>
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------- |
|
||||
| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: Dayjs): ReactNode | - | |
|
||||
| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: Dayjs): ReactNode | - | |
|
||||
| defaultValue | The date selected by default | [dayjs](https://day.js.org/) | - | |
|
||||
| disabledDate | Function that specifies the dates that cannot be selected, `currentDate` is same dayjs object as `value` prop which you shouldn't mutate it](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - | |
|
||||
| fullscreen | Whether to display in full-screen | boolean | true | |
|
||||
| headerRender | Render custom header in panel | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - | |
|
||||
| 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: Dayjs): ReactNode | - | |
|
||||
| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: Dayjs): ReactNode | - | |
|
||||
| validRange | To set valid range | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |
|
||||
| value | The current selected date | [dayjs](https://day.js.org/) | - | |
|
||||
| onChange | Callback for when date changes | function(date: Dayjs) | - | |
|
||||
| onPanelChange | Callback for when panel changes | function(date: Dayjs, mode: string) | - | |
|
||||
| onSelect | Callback for when a date is selected | function(date: Dayjs） | - | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: Dayjs): ReactNode | - | |
|
||||
| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: Dayjs): ReactNode | - | |
|
||||
| defaultValue | The date selected by default | [dayjs](https://day.js.org/) | - | |
|
||||
| disabledDate | Function that specifies the dates that cannot be selected, `currentDate` is same dayjs object as `value` prop which you shouldn't mutate it](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - | |
|
||||
| fullscreen | Whether to display in full-screen | boolean | true | |
|
||||
| headerRender | Render custom header in panel | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - | |
|
||||
| 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: Dayjs): ReactNode | - | |
|
||||
| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: Dayjs): ReactNode | - | |
|
||||
| validRange | To set valid range | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |
|
||||
| value | The current selected date | [dayjs](https://day.js.org/) | - | |
|
||||
| onChange | Callback for when date changes | function(date: Dayjs) | - | |
|
||||
| onPanelChange | Callback for when panel changes | function(date: Dayjs, mode: string) | - | |
|
||||
| onSelect | Callback for when a date is selected | function(date: Dayjs） | - | |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user