`;
-exports[`renders ./antdv-demo/docs/affix/demo/on-change.md correctly 1`] = `
+exports[`renders ./components/affix/demo/on-change.vue correctly 1`] = `
`;
-exports[`renders ./antdv-demo/docs/affix/demo/target.md correctly 1`] = `
+exports[`renders ./components/affix/demo/target.vue correctly 1`] = `
diff --git a/components/affix/demo/basic.vue b/components/affix/demo/basic.vue
new file mode 100644
index 0000000000..a1baee459d
--- /dev/null
+++ b/components/affix/demo/basic.vue
@@ -0,0 +1,41 @@
+
+---
+order: 0
+title:
+ zh-CN: 基本
+ en-US: Basic
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+The simplest usage.
+
+
+
+
+
+ Affix top
+
+
+
+ Affix bottom
+
+
+
+
diff --git a/components/affix/demo/index.vue b/components/affix/demo/index.vue
new file mode 100644
index 0000000000..a0d301bea8
--- /dev/null
+++ b/components/affix/demo/index.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
diff --git a/components/affix/demo/on-change.vue b/components/affix/demo/on-change.vue
new file mode 100644
index 0000000000..ab9df60764
--- /dev/null
+++ b/components/affix/demo/on-change.vue
@@ -0,0 +1,37 @@
+
+---
+order: 1
+title:
+ zh-CN: 固定状态改变的回调
+ en-US: Callback
+---
+
+## zh-CN
+
+可以获得是否固定的状态。
+
+## en-US
+
+Callback with affixed state.
+
+
+
+
+
+ 120px to affix top
+
+
+
diff --git a/components/affix/demo/target.vue b/components/affix/demo/target.vue
new file mode 100644
index 0000000000..8256c26b1c
--- /dev/null
+++ b/components/affix/demo/target.vue
@@ -0,0 +1,50 @@
+
+---
+order: 2
+title:
+ zh-CN: 滚动容器
+ en-US: Container to scroll.
+---
+
+## zh-CN
+
+用 `target` 设置 `Affix` 需要监听其滚动事件的元素，默认为 `window`。
+
+## en-US
+
+Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
+
+
+
+
+
+ ...
+
+```
+
+## FAQ
+
+### Affix bind container with `target`, sometime move out of container.
+
+We don't listen window scroll for performance consideration.
+
+Related issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
index 82d062476b..e403f96e69 100644
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -12,7 +12,6 @@ import {
} from 'vue';
import PropTypes from '../_util/vue-types';
import classNames from '../_util/classNames';
-import omit from 'omit.js';
import ResizeObserver from '../vc-resize-observer';
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
import { withInstall } from '../_util/type';
@@ -24,6 +23,7 @@ import {
getFixedBottom,
} from './utils';
import useConfigInject from '../_util/hooks/useConfigInject';
+import omit from '../_util/omit';
function getDefaultTarget() {
return typeof window !== 'undefined' ? window : null;
@@ -46,7 +46,6 @@ const affixProps = {
* 距离窗口顶部达到指定偏移量后触发
*/
offsetTop: PropTypes.number,
- offset: PropTypes.number,
/** 距离窗口底部达到指定偏移量后触发 */
offsetBottom: PropTypes.number,
/** 固定状态改变时触发的回调函数 */
diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md
new file mode 100644
index 0000000000..e492b6957d
--- /dev/null
+++ b/components/affix/index.zh-CN.md
@@ -0,0 +1,45 @@
+---
+category: Components
+subtitle: 固钉
+type: 导航
+title: Affix
+cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
+---
+
+将页面元素钉在可视范围。
+
+## 何时使用
+
+当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
+
+页面可视范围过小时，慎用此功能以免遮挡页面内容。
+
+## API
+
+| 成员 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | | |
+| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
+| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window | |
+
+### 事件
+
+| 事件名称 | 说明 | 回调参数 | 版本 |
+| -------- | ---------------------------- | ----------------- | ---- |
+| change | 固定状态改变时触发的回调函数 | Function(affixed) | 无 | |
+
+**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
+
+```html
+
+ ...
+
+```
+
+## FAQ
+
+### Affix 使用 `target` 绑定容器时，元素会跑到容器外。
+
+从性能角度考虑，我们只监听容器滚动事件。
+
+相关 issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
diff --git a/components/alert/__tests__/__snapshots__/demo.test.js.snap b/components/alert/__tests__/__snapshots__/demo.test.js.snap
index 21de61f530..7c10e97ce7 100644
--- a/components/alert/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/alert/__tests__/__snapshots__/demo.test.js.snap
@@ -1,139 +1,320 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`renders ./antdv-demo/docs/alert/demo/banner.md correctly 1`] = `
-
+
+
+
+
+
diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md
new file mode 100644
index 0000000000..009f922994
--- /dev/null
+++ b/components/affix/index.en-US.md
@@ -0,0 +1,44 @@
+---
+category: Components
+type: Navigation
+title: Affix
+cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
+---
+
+Wrap Affix around another component to make it stick the viewport.
+
+## When To Use
+
+On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.
+
+Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
+
+## API
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| 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 | |
+
+### events
+
+| Events Name | Description | Arguments | Version |
+| ----------- | ---------------------------------------- | ----------------- | ------- |
+| change | Callback for when Affix state is changed | Function(affixed) |
+
+**Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
+
+```html
+
+
+ Fixed at the top of container
+
+
+
+exports[`renders ./components/alert/demo/banner.vue correctly 1`] = `
+
-
+
-
-
+
-
+
`;
-exports[`renders ./antdv-demo/docs/alert/demo/basic.md correctly 1`] = `
+exports[`renders ./components/alert/demo/basic.vue correctly 1`] = `
`;
-exports[`renders ./antdv-demo/docs/alert/demo/closable.md correctly 1`] = `
+exports[`renders ./components/alert/demo/closable.vue correctly 1`] = `
`;
-exports[`renders ./antdv-demo/docs/alert/demo/close-text.md correctly 1`] = `
+exports[`renders ./components/alert/demo/close-text.vue correctly 1`] = `
`;
-exports[`renders ./antdv-demo/docs/alert/demo/custom-icon.md correctly 1`] = `
+exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
-
+
+
-
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
-
+
+
+
+
+ Detailed description and advices about successful copywriting.
+
+
-
+
+
Detailed description and advices about successful copywriting.
+ Additional description and informations about copywriting.
+
+
-
+
+
Additional description and informations about copywriting.
+ This is a warning notice about copywriting.
+
+
-
+
+
This is a warning notice about copywriting.
+ This is an error message about copywriting.
+
+
`;
-exports[`renders ./antdv-demo/docs/alert/demo/description.md correctly 1`] = `
+exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
`;
-exports[`renders ./antdv-demo/docs/alert/demo/icon.md correctly 1`] = `
-
+
+
This is an error message about copywriting.
+
+exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
+
+
-
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
-
+
+
+
+
+ Detailed description and advices about successful copywriting.
+
+
-
+
+
Detailed description and advices about successful copywriting.
+ Additional description and informations about copywriting.
+
+
-
+
+
Additional description and informations about copywriting.
+ This is a warning notice about copywriting.
+
+
-
+
+
This is a warning notice about copywriting.
+ This is an error message about copywriting.
+
+---
+order: 6
+title:
+ zh-CN: 顶部公告
+ en-US: Banner
+---
+
+## zh-CN
+
+最简单的用法，适用于简短的警告提示。
+
+## en-US
+
+Display Alert as a banner at top of page.
+
+
+
+
+
+
+
+
+---
+order: 0
+title:
+ zh-CN: 基本用法
+ en-US: Basic usage
+---
+
+## zh-CN
+
+最简单的用法，适用于简短的警告提示。
+
+## en-US
+
+The simplest usage for short messages.
+
+
+
+
+
+---
+order: 2
+title:
+ zh-CN: 可关闭的警告提示
+ en-US: Customized Close Text
+---
+
+## zh-CN
+
+显示关闭按钮，点击可关闭警告提示。
+
+## en-US
+
+To show close button.
+
+
+
+
+
+---
+order: 5
+title:
+ zh-CN: 自定义关闭
+ en-US: Customized Close Text
+---
+
+## zh-CN
+
+自定义图标让信息类型更加醒目。
+
+## en-US
+
+Replace the default icon with customized text.
+
+
+
+
+
+---
+order: 7
+title:
+ zh-CN: 自定义图标
+ en-US: Custom Icon
+---
+
+## zh-CN
+
+可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
+
+## en-US
+
+Custom Icon make information more clear and more friendly.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/alert/demo/description.vue b/components/alert/demo/description.vue
new file mode 100644
index 0000000000..f1e3bdf881
--- /dev/null
+++ b/components/alert/demo/description.vue
@@ -0,0 +1,44 @@
+
+---
+order: 3
+title:
+ zh-CN: 含有辅助性文字介绍
+ en-US: Description
+---
+
+## zh-CN
+
+含有辅助性文字介绍的警告提示。
+
+## en-US
+
+Additional description for alert message.
+
+
+
+
+
+
+
+
+---
+order: 4
+title:
+ zh-CN: 图标
+ en-US: Icon
+---
+
+## zh-CN
+
+可口的图标让信息类型更加醒目。
+
+## en-US
+
+Decent icon make information more clear and more friendly.
+
+
+
+
+
+
+
+
+
diff --git a/components/alert/demo/smooth-closed.vue b/components/alert/demo/smooth-closed.vue
new file mode 100644
index 0000000000..ec55b7fd2d
--- /dev/null
+++ b/components/alert/demo/smooth-closed.vue
@@ -0,0 +1,42 @@
+
+---
+order: 8
+title:
+ zh-CN: 平滑地卸载
+ en-US: Smoothly Unmount
+---
+
+## zh-CN
+
+平滑、自然的卸载提示。
+
+## en-US
+
+Smoothly and unaffectedly unmount Alert.
+
+
+
+
+
+---
+order: 1
+title:
+ zh-CN: 四种样式
+ en-US: More types
+---
+
+## zh-CN
+
+共有四种样式 `success`、`info`、`warning`、`error`。
+
+## en-US
+
+There are 4 types of Alert: `success`, `info`, `warning`, `error`.
+
+
+
+
+
+
`;
-exports[`renders ./antdv-demo/docs/alert/demo/smooth-closed.md correctly 1`] = `
+exports[`renders ./components/alert/demo/smooth-closed.vue correctly 1`] = `
`;
-exports[`renders ./antdv-demo/docs/alert/demo/style.md correctly 1`] = `
+exports[`renders ./components/alert/demo/style.vue correctly 1`] = `
`;
diff --git a/components/alert/demo/banner.vue b/components/alert/demo/banner.vue
new file mode 100644
index 0000000000..71240270d0
--- /dev/null
+++ b/components/alert/demo/banner.vue
@@ -0,0 +1,31 @@
+
+
+
This is an error message about copywriting.
+ +
+
+
+ Success Description + Success + Description Success Description +
+ +
@@ -29,7 +29,7 @@ exports[`renders ./antdv-demo/docs/anchor/demo/basic.md correctly 1`] = `
`;
-exports[`renders ./antdv-demo/docs/anchor/demo/customizeHighlight.md correctly 1`] = `
+exports[`renders ./components/anchor/demo/customizeHighlight.vue correctly 1`] = `
@@ -51,7 +51,7 @@ exports[`renders ./antdv-demo/docs/anchor/demo/customizeHighlight.md correctly 1
@@ -73,7 +73,7 @@ exports[`renders ./antdv-demo/docs/anchor/demo/onChange.md correctly 1`] = `
@@ -95,7 +95,7 @@ exports[`renders ./antdv-demo/docs/anchor/demo/onClick.md correctly 1`] = `
@@ -117,7 +117,7 @@ exports[`renders ./antdv-demo/docs/anchor/demo/static.md correctly 1`] = `
diff --git a/components/anchor/demo/basic.vue b/components/anchor/demo/basic.vue
new file mode 100644
index 0000000000..6b480e0541
--- /dev/null
+++ b/components/anchor/demo/basic.vue
@@ -0,0 +1,32 @@
+
+---
+order: 0
+title:
+ zh-CN: 基本使用
+ en-US: Basic Usage
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+The simplest usage.
+
+
+
+
+
+
+
+
diff --git a/components/anchor/demo/customizeHighlight.vue b/components/anchor/demo/customizeHighlight.vue
new file mode 100644
index 0000000000..ca7ee08438
--- /dev/null
+++ b/components/anchor/demo/customizeHighlight.vue
@@ -0,0 +1,42 @@
+
+---
+order: 3
+title:
+ zh-CN: 自定义锚点高亮
+ en-US: Customize the anchor highlight
+---
+
+## zh-CN
+
+自定义锚点高亮。
+
+## en-US
+
+Customize the anchor highlight.
+
+
+
+
+
+
+
+
+
+
diff --git a/components/anchor/demo/index.vue b/components/anchor/demo/index.vue
new file mode 100644
index 0000000000..0ba8272b90
--- /dev/null
+++ b/components/anchor/demo/index.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
diff --git a/components/anchor/demo/onChange.vue b/components/anchor/demo/onChange.vue
new file mode 100644
index 0000000000..fe1d25ae6d
--- /dev/null
+++ b/components/anchor/demo/onChange.vue
@@ -0,0 +1,42 @@
+
+---
+order: 5
+title:
+ zh-CN: 监听锚点链接改变
+ en-US: Listening for anchor link change
+---
+
+## zh-CN
+
+监听锚点链接改变。
+
+## en-US
+
+Listening for anchor link change.
+
+
+
+
+
+
+
+
+
+
diff --git a/components/anchor/demo/onClick.vue b/components/anchor/demo/onClick.vue
new file mode 100644
index 0000000000..ca2f5999ae
--- /dev/null
+++ b/components/anchor/demo/onClick.vue
@@ -0,0 +1,43 @@
+
+---
+order: 2
+title:
+ zh-CN: 自定义 click 事件
+ en-US: Customize the click event
+---
+
+## zh-CN
+
+点击锚点不记录历史。
+
+## en-US
+
+Clicking on an anchor does not record history.
+
+
+
+
+
+
+
+
+
+
diff --git a/components/anchor/demo/static.vue b/components/anchor/demo/static.vue
new file mode 100644
index 0000000000..dc90ee451d
--- /dev/null
+++ b/components/anchor/demo/static.vue
@@ -0,0 +1,27 @@
+
+---
+order: 1
+title:
+ zh-CN: 静态位置
+ en-US: Static
+---
+
+## zh-CN
+
+不浮动，状态不随页面滚动变化。
+
+## en-US
+
+Do not change state when page is scrolling.
+
+
+
+
+
+
+
+
diff --git a/components/anchor/demo/targetOffset.vue b/components/anchor/demo/targetOffset.vue
new file mode 100644
index 0000000000..736565fd6a
--- /dev/null
+++ b/components/anchor/demo/targetOffset.vue
@@ -0,0 +1,43 @@
+
+---
+order: 4
+title:
+ zh-CN: 设置锚点滚动偏移量
+ en-US: Set Anchor scroll offset
+---
+
+## zh-CN
+
+锚点目标滚动到屏幕正中间。
+
+## en-US
+
+Anchor target scroll to screen center.
+
+
+
+
+
+
+
+
+
+
diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md
new file mode 100644
index 0000000000..1b7ffe1115
--- /dev/null
+++ b/components/anchor/index.en-US.md
@@ -0,0 +1,45 @@
+---
+category: Components
+type: Other
+cols: 2
+title: Anchor
+cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
+---
+
+Hyperlinks to scroll on one page.
+
+## When To Use
+
+For displaying anchor hyperlinks on page and jumping between them.
+
+## API
+
+### Anchor Props
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| affix | Fixed mode of Anchor | boolean | true | |
+| bounds | Bounding distance of anchor area | number | 5(px) | |
+| getContainer | Scrolling container | () => HTMLElement | () => window | |
+| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - | |
+| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
+| showInkInFixed | Whether show ink-balls when `：affix="false"` | boolean | false | |
+| wrapperClass | The class name of the container | string | - | |
+| wrapperStyle | The style of the container | object | - | |
+| getCurrentAnchor | Customize the anchor highlight | () => string | - | 1.5.0 |
+| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
+
+### Events
+
+| Events Name | Description | Arguments | Version |
+| --- | --- | --- | --- |
+| click | set the handler to handle `click` event | Function(e: Event, link: Object) | |
+| change | Listening for anchor link change | (currentActiveLink: string) => void | | 1.5.0 |
+
+### Link Props
+
+| Property | Description | Type | Default | Version |
+| -------- | ----------------------------------------- | ------------ | ------- | ------- |
+| href | target of hyperlink | string | | |
+| title | content of hyperlink | string\|slot | | |
+| target | Specifies where to display the linked URL | string | | 1.5.0 |
diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx
index 2cb6813477..c4d6e7fdf7 100644
--- a/components/anchor/index.tsx
+++ b/components/anchor/index.tsx
@@ -1,6 +1,8 @@
import type { App, Plugin } from 'vue';
-import Anchor, { AnchorProps } from './Anchor';
-import AnchorLink, { AnchorLinkProps } from './AnchorLink';
+import type { AnchorProps } from './Anchor';
+import type { AnchorLinkProps } from './AnchorLink';
+import Anchor from './Anchor';
+import AnchorLink from './AnchorLink';
Anchor.Link = AnchorLink;
@@ -11,7 +13,8 @@ Anchor.install = function (app: App) {
return app;
};
-export { AnchorLinkProps, AnchorProps, AnchorLink, AnchorLink as Link };
+export type { AnchorLinkProps, AnchorProps };
+export { AnchorLink, AnchorLink as Link };
export default Anchor as typeof Anchor &
Plugin & {
diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md
new file mode 100644
index 0000000000..44412a2a59
--- /dev/null
+++ b/components/anchor/index.zh-CN.md
@@ -0,0 +1,46 @@
+---
+category: Components
+subtitle: 锚点
+cols: 2
+type: 其他
+title: Anchor
+cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
+---
+
+用于跳转到页面指定位置。
+
+## 何时使用
+
+需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
+
+## API
+
+### Anchor Props
+
+| 成员 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| affix | 固定模式 | boolean | true | |
+| bounds | 锚点区域边界 | number | 5(px) | |
+| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | | |
+| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
+| showInkInFixed | `:affix="false"` 时是否显示小圆点 | boolean | false | |
+| wrapperClass | 容器的类名 | string | - | |
+| wrapperStyle | 容器样式 | object | - | |
+| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | 1.5.0 |
+| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
+
+### 事件
+
+| 事件名称 | 说明 | 回调参数 | 版本 |
+| -------- | ---------------------- | ----------------------------------- | ---- |
+| click | `click` 事件的 handler | Function(e: Event, link: Object) | |
+| change | 监听锚点链接改变 | (currentActiveLink: string) => void | | 1.5.0 |
+
+### Link Props
+
+| 成员 | 说明 | 类型 | 默认值 | 版本 |
+| ------ | -------------------------------- | ------------ | ------ | ----- |
+| href | 锚点链接 | string | | |
+| title | 文字内容 | string\|slot | | |
+| target | 该属性指定在何处显示链接的资源。 | string | | 1.5.0 |
diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
index f0d343893e..08de198d6c 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -1,10 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`renders ./antdv-demo/docs/auto-complete/demo/basic.md correctly 1`] = `
-
+exports[`renders ./components/auto-complete/demo/basic.vue correctly 1`] = `
+
-
+
`;
-exports[`renders ./antdv-demo/docs/auto-complete/demo/certain-category.md correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/certain-category.vue correctly 1`] = `
input here
@@ -12,13 +12,13 @@ exports[`renders ./antdv-demo/docs/auto-complete/demo/basic.md correctly 1`] = `
-
+
-
- input here
+
`;
-exports[`renders ./antdv-demo/docs/auto-complete/demo/custom.md correctly 1`] = `
-
+
@@ -26,11 +26,11 @@ exports[`renders ./antdv-demo/docs/auto-complete/demo/certain-category.md correc
+exports[`renders ./components/auto-complete/demo/custom.vue correctly 1`] = `
+
-
+
@@ -38,11 +38,11 @@ exports[`renders ./antdv-demo/docs/auto-complete/demo/custom.md correctly 1`] =
`;
-exports[`renders ./antdv-demo/docs/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
-
+exports[`renders ./components/auto-complete/demo/non-case-sensitive.vue correctly 1`] = `
+
-
+
`;
-exports[`renders ./antdv-demo/docs/auto-complete/demo/options.md correctly 1`] = `
-
input here
@@ -50,11 +50,11 @@ exports[`renders ./antdv-demo/docs/auto-complete/demo/non-case-sensitive.md corr
+exports[`renders ./components/auto-complete/demo/options.vue correctly 1`] = `
+
-
+
`;
-exports[`renders ./antdv-demo/docs/auto-complete/demo/uncertain-category.md correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/uncertain-category.vue correctly 1`] = `
input here
@@ -62,13 +62,13 @@ exports[`renders ./antdv-demo/docs/auto-complete/demo/options.md correctly 1`] =
-
+
-
- input here
+
+---
+order: 0
+title:
+ zh-CN: 基本使用
+ en-US: Basic Usage
+---
+
+## zh-CN
+
+基本使用。通过 options 设置自动完成的数据源。
+
+## en-US
+
+Basic Usage, set datasource of autocomplete with `options` property.
+
+
+
+
+---
+order: 4
+title:
+ zh-CN: 查询模式 - 确定类目
+ en-US: Lookup-Patterns - Certain Category
+---
+
+## zh-CN
+
+查询模式 - 确定类目。
+
+## en-US
+
+Lookup-Patterns - Certain Category.
+
+
+
+
+---
+order: 2
+title:
+ zh-CN: 自定义输入组件
+ en-US: Customize Input Component
+---
+
+## zh-CN
+
+自定义输入组件。
+
+## en-US
+
+Customize Input Component.
+
+
+
+
+
+
+
+
diff --git a/components/auto-complete/demo/index.vue b/components/auto-complete/demo/index.vue
new file mode 100644
index 0000000000..7fd1c94344
--- /dev/null
+++ b/components/auto-complete/demo/index.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
diff --git a/components/auto-complete/demo/non-case-sensitive.vue b/components/auto-complete/demo/non-case-sensitive.vue
new file mode 100644
index 0000000000..60266bd770
--- /dev/null
+++ b/components/auto-complete/demo/non-case-sensitive.vue
@@ -0,0 +1,49 @@
+
+---
+order: 3
+title:
+ zh-CN: 不区分大小写
+ en-US: Non-case-sensitive AutoComplete
+---
+
+## zh-CN
+
+不区分大小写的 AutoComplete。
+
+## en-US
+
+A non-case-sensitive AutoComplete.
+
+
+
+
+---
+order: 1
+title:
+ zh-CN: 自定义选项
+ en-US: Customized
+---
+
+## zh-CN
+
+3.0 以上版本，可以传递 `v-slot:option` 来自定义 Option。
+
+## en-US
+
+For 3.0+, You could pass `v-slot:option` to custom option.
+
+
+
+
+
+ {{ val.split('@')[0] }} @
+ {{ val.split('@')[1] }}
+
+
+
+
+
diff --git a/components/auto-complete/demo/uncertain-category.vue b/components/auto-complete/demo/uncertain-category.vue
new file mode 100644
index 0000000000..372d67ba0d
--- /dev/null
+++ b/components/auto-complete/demo/uncertain-category.vue
@@ -0,0 +1,125 @@
+
+---
+order: 5
+title:
+ zh-CN: 查询模式 - 不确定类目
+ en-US: Lookup-Patterns - Uncertain Category
+---
+
+## zh-CN
+
+查询模式 - 不确定类目。
+
+## en-US
+
+Lookup-Patterns - Uncertain Category.
+
+
+
+ >;
@@ -44,107 +43,101 @@ const AutoComplete = defineComponent({
defaultActiveFirstOption: PropTypes.looseBool.def(true),
},
emits: ['change', 'select', 'focus', 'blur'],
+ slots: ['option'],
Option,
OptGroup,
- setup(props, { slots }) {
+ setup(props, { slots, attrs, expose }) {
warning(
- !(props.dataSource !== undefined || 'dataSource' in slots),
+ !('dataSource' in slots),
'AutoComplete',
- '`dataSource` is deprecated, please use `options` instead.',
+ '`dataSource` slot is deprecated, please use props `options` instead.',
);
- return {
- configProvider: inject('configProvider', defaultConfigProvider),
- popupRef: null,
- select: null,
- };
- },
- created() {
- provide('savePopupRef', this.savePopupRef);
- },
- methods: {
- savePopupRef(ref: VNode) {
- this.popupRef = ref;
- },
- saveSelect(node: VNode) {
- this.select = node;
- },
- getInputElement() {
- const children = getSlot(this);
- const element = children.length ? children[0] : ;
+ warning(
+ !('options' in slots),
+ 'AutoComplete',
+ '`options` slot is deprecated, please use props `options` instead.',
+ );
+ const selectRef = ref();
+ const getInputElement = () => {
+ const children = flattenChildren(slots.default?.());
+ const element = children.length ? children[0] : undefined;
return element;
- },
+ };
- focus() {
- if (this.select) {
- this.select.focus();
- }
- },
+ const focus = () => {
+ selectRef.value?.focus();
+ };
+
+ const blur = () => {
+ selectRef.value?.blur();
+ };
- blur() {
- if (this.select) {
- this.select.blur();
+ expose({
+ focus,
+ blur,
+ });
+ const { prefixCls } = useConfigInject('select', props);
+ return () => {
+ const { size, dataSource, notFoundContent = slots.notFoundContent?.() } = props;
+ let optionChildren: VNode[];
+ const { class: className } = attrs;
+ const cls = {
+ [className as string]: !!className,
+ [`${prefixCls.value}-lg`]: size === 'large',
+ [`${prefixCls.value}-sm`]: size === 'small',
+ [`${prefixCls.value}-show-search`]: true,
+ [`${prefixCls.value}-auto-complete`]: true,
+ };
+ if (props.options === undefined) {
+ const childArray = slots.dataSource?.() || slots.options?.() || [];
+ if (childArray.length && isSelectOptionOrSelectOptGroup(childArray[0])) {
+ optionChildren = childArray;
+ } else {
+ optionChildren = dataSource
+ ? dataSource.map((item: any) => {
+ if (isValidElement(item)) {
+ return item;
+ }
+ switch (typeof item) {
+ case 'string':
+ return (
+
+ );
+ case 'object':
+ return (
+
+ );
+ default:
+ throw new Error(
+ 'AutoComplete[dataSource] only supports type `string[] | Object[]`.',
+ );
+ }
+ })
+ : [];
+ }
}
- },
- },
- render() {
- const { size, prefixCls: customizePrefixCls, dataSource } = this;
- let optionChildren: VNode[];
- const { getPrefixCls } = this.configProvider;
- const prefixCls = getPrefixCls('select', customizePrefixCls);
- const { class: className } = this.$attrs;
- const cls = {
- [className as string]: !!className,
- [`${prefixCls}-lg`]: size === 'large',
- [`${prefixCls}-sm`]: size === 'small',
- [`${prefixCls}-show-search`]: true,
- [`${prefixCls}-auto-complete`]: true,
- };
- let childArray = getSlot(this, 'dataSource');
- if ('options' in this.$slots) {
- childArray = getSlot(this, 'options');
- }
- if (childArray.length && isSelectOptionOrSelectOptGroup(childArray[0])) {
- optionChildren = childArray;
- } else {
- optionChildren = dataSource
- ? dataSource.map((item: any) => {
- if (isValidElement(item)) {
- return item;
- }
- switch (typeof item) {
- case 'string':
- return (
-
- );
- case 'object':
- return (
-
- );
- default:
- throw new Error(
- 'AutoComplete[dataSource] only supports type `string[] | Object[]`.',
- );
- }
- })
- : [];
- }
- const selectProps = {
- ...Omit(getOptionProps(this), ['dataSource', 'optionLabelProp']),
- ...this.$attrs,
- mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE,
- // optionLabelProp,
- getInputElement: this.getInputElement,
- notFoundContent: getComponent(this, 'notFoundContent'),
- // placeholder: '',
- class: cls,
- ref: this.saveSelect,
+ const selectProps = {
+ ...omit(props, ['dataSource', 'optionLabelProp']),
+ ...attrs,
+ mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE,
+ // optionLabelProp,
+ getInputElement,
+ notFoundContent,
+ // placeholder: '',
+ class: cls,
+ ref: selectRef,
+ };
+ return (
+
+ );
};
- return ;
},
});
diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md
new file mode 100644
index 0000000000..53d0c62657
--- /dev/null
+++ b/components/auto-complete/index.zh-CN.md
@@ -0,0 +1,63 @@
+---
+category: Components
+subtitle: 自动完成
+type: 数据录入
+cols: 2
+title: AutoComplete
+cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
+---
+
+输入框自动完成功能。
+
+## 何时使用
+
+- 需要一个输入框而不是选择器。
+- 需要输入建议/辅助提示。
+
+和 Select 的区别是：
+
+- AutoComplete 是一个带提示的文本输入框，用户可以自由输入，关键词是辅助**输入**。
+- Select 是在限定的可选项中进行选择，关键词是**选择**。
+
+## API
+
+```html
+
`; + +exports[`renders ./components/avatar/demo/dynamic.vue correctly 1`] = ` +U `; -exports[`renders ./antdv-demo/docs/avatar/demo/dynamic.md correctly 1`] = ` -
K
+
+
+K
+ +2
+
+K
+ +2
+
`;
-exports[`renders ./antdv-demo/docs/avatar/demo/type.md correctly 1`] = `U`;
diff --git a/components/avatar/demo/badge.vue b/components/avatar/demo/badge.vue
new file mode 100644
index 0000000000..d708d3aa04
--- /dev/null
+++ b/components/avatar/demo/badge.vue
@@ -0,0 +1,50 @@
+
+---
+order: 3
+title:
+ zh-CN: 带徽标的头像
+ en-US: With Badge
+---
+
+## zh-CN
+
+通常用于消息提示。
+
+## en-US
+
+Usually used for reminders and notifications.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/avatar/demo/basic.vue b/components/avatar/demo/basic.vue
new file mode 100644
index 0000000000..7ef6ec695b
--- /dev/null
+++ b/components/avatar/demo/basic.vue
@@ -0,0 +1,54 @@
+
+---
+order: 0
+title:
+ zh-CN: 基本
+ en-US: Basic
+---
+
+## zh-CN
+
+头像有三种尺寸，两种形状可选。
+
+## en-US
+
+Three sizes and two shapes are available.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/avatar/demo/dynamic.vue b/components/avatar/demo/dynamic.vue
new file mode 100644
index 0000000000..db2f8333ce
--- /dev/null
+++ b/components/avatar/demo/dynamic.vue
@@ -0,0 +1,56 @@
+
+---
+order: 2
+title:
+ zh-CN: 自动调整字符大小
+ en-US: Autoset Font Size
+---
+
+## zh-CN
+
+对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。
+
+## en-US
+
+For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.
+
+
+
+
+ {{ avatarValue }}
+
+
+ 改变
+
+
+
+
diff --git a/components/avatar/demo/group.vue b/components/avatar/demo/group.vue
new file mode 100644
index 0000000000..3937062817
--- /dev/null
+++ b/components/avatar/demo/group.vue
@@ -0,0 +1,74 @@
+
+---
+order: 4
+title:
+ zh-CN: Avatar.Group
+ en-US: Avatar.Group
+---
+
+## zh-CN
+
+头像组合展现。
+
+## en-US
+
+Avatar group display.
+
+
+
+
+ K
+
+
+
+
+
+
+
+
+ K
+
+
+
+
+
+
+
+
+ K
+
+
+
+
+
+
+
+
+
+
diff --git a/components/avatar/demo/index.vue b/components/avatar/demo/index.vue
new file mode 100644
index 0000000000..5f84da14c1
--- /dev/null
+++ b/components/avatar/demo/index.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
diff --git a/components/avatar/demo/responsive.vue b/components/avatar/demo/responsive.vue
new file mode 100644
index 0000000000..2cfb535d6f
--- /dev/null
+++ b/components/avatar/demo/responsive.vue
@@ -0,0 +1,34 @@
+
+---
+order: 5
+title:
+ zh-CN: 响应式尺寸
+ en-US: Responsive Size
+---
+
+## zh-CN
+
+头像大小可以根据屏幕大小自动调整。
+
+## en-US
+
+Avatar size can be automatically adjusted based on the screen size.
+
+
+
+
+
+
+
+
+
diff --git a/components/avatar/demo/type.vue b/components/avatar/demo/type.vue
new file mode 100644
index 0000000000..ce5ee5c76a
--- /dev/null
+++ b/components/avatar/demo/type.vue
@@ -0,0 +1,43 @@
+
+---
+order: 1
+title:
+ zh-CN: 类型
+ en-US: Type
+---
+
+## zh-CN
+
+支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。
+
+## en-US
+
+Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.
+
+
+
+
+
+
+ U
+ USER
+ U
+
+
+
+
+
+
diff --git a/components/avatar/index.en-US.md b/components/avatar/index.en-US.md
new file mode 100644
index 0000000000..864131bba8
--- /dev/null
+++ b/components/avatar/index.en-US.md
@@ -0,0 +1,33 @@
+---
+category: Components
+type: Data Display
+title: Avatar
+cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
+---
+
+Avatars can be used to represent people or objects. It supports images, `Icon`s, or letters.
+
+## API
+
+### Avatar
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| icon | the `Icon` type for an icon avatar, see `Icon` Component | VNode \| slot | - |
+| shape | the shape of avatar | `circle` \| `square` | `circle` |
+| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 2.2.0 |
+| src | the address of the image for an image avatar | string | - |
+| srcset | a list of sources to use for different screen resolutions | string | - |
+| alt | This attribute defines the alternative text describing the image | string | - |
+| gap | Letter type unit distance between left and right sides | number | 4 | 2.2.0 |
+| draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
+| loadError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |
+
+### Avatar.Group (2.2.0)
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| maxCount | Max avatars to show | number | - | |
+| maxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` | |
+| maxStyle | The style of excess avatar style | CSSProperties | - | |
+| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | |
diff --git a/components/avatar/index.ts b/components/avatar/index.ts
index 3fceeaf26c..802b0237e2 100644
--- a/components/avatar/index.ts
+++ b/components/avatar/index.ts
@@ -1,9 +1,9 @@
import type { App, Plugin } from 'vue';
import Avatar from './Avatar';
import Group from './Group';
-
-export { AvatarProps, AvatarSize, avatarProps } from './Avatar';
-export { AvatarGroupProps } from './Group';
+export { avatarProps } from './Avatar';
+export type { AvatarProps, AvatarSize } from './Avatar';
+export type { AvatarGroupProps } from './Group';
Avatar.Group = Group;
diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md
new file mode 100644
index 0000000000..484e7a244b
--- /dev/null
+++ b/components/avatar/index.zh-CN.md
@@ -0,0 +1,38 @@
+---
+category: Components
+subtitle: 头像
+type: 数据展示
+title: Avatar
+cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
+---
+
+用来代表用户或事物，支持图片、图标或字符展示。
+
+## 设计师专属
+
+安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，一键填充高逼格头像和文本。
+
+## API
+
+### Avatar
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| icon | 设置头像的图标类型，可设为 Icon 的 `type` 或 VNode | VNode \| slot | - |
+| shape | 指定头像的形状 | `circle` \| `square` | `circle` | |
+| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 2.2.0 |
+| src | 图片类头像的资源地址 | string | - |
+| srcset | 设置图片类头像响应式资源地址 | string | - |
+| alt | 图像无法显示时的替代文本 | string | - |
+| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 2.2.0 |
+| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
+| loadError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |
+
+### Avatar.Group (2.2.0)
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| maxCount | 显示的最大头像个数 | number | - | |
+| maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` | |
+| maxStyle | 多余头像样式 | CSSProperties | - | |
+| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | |
diff --git a/components/back-top/__tests__/__snapshots__/demo.test.js.snap b/components/back-top/__tests__/__snapshots__/demo.test.js.snap
index 31d2c6d54e..d0d5d736eb 100644
--- a/components/back-top/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/back-top/__tests__/__snapshots__/demo.test.js.snap
@@ -1,13 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`renders ./antdv-demo/docs/back-top/demo/basic.md correctly 1`] = `
-
+---
+order: 0
+title:
+ zh-CN: 基本使用
+ en-US: Basic Usage
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+The simplest usage.
+
+
+
+
+---
+order: 1
+title:
+ zh-CN: 自定义样式
+ en-US: Custom style
+---
+
+## zh-CN
+
+可以自定义回到顶部按钮的样式，限制宽高：`40px * 40px`。
+
+## en-US
+
+You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
+
+
+
+
+
+
+
+
diff --git a/components/back-top/index.en-US.md b/components/back-top/index.en-US.md
new file mode 100644
index 0000000000..1fa126df26
--- /dev/null
+++ b/components/back-top/index.en-US.md
@@ -0,0 +1,30 @@
+---
+category: Components
+type: Other
+title: BackTop
+cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
+---
+
+`BackTop` makes it easy to go back to the top of the page.
+
+## When To Use
+
+- When the page content is very long.
+- When you need to go back to the top very frequently in order to view the contents.
+
+## API
+
+> The distance to the bottom is set to `50px` by default, which is overridable.
+>
+> If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| 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 | |
+
+### events
+
+| Events Name | Description | Arguments | Version |
+| --- | --- | --- | --- |
+| click | a callback function, which can be executed when you click the button | Function | |
diff --git a/components/back-top/index.zh-CN.md b/components/back-top/index.zh-CN.md
new file mode 100644
index 0000000000..743e546fc3
--- /dev/null
+++ b/components/back-top/index.zh-CN.md
@@ -0,0 +1,31 @@
+---
+category: Components
+type: 其他
+subtitle: 回到顶部
+title: BackTop
+cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
+---
+
+返回页面顶部的操作按钮。
+
+## 何时使用
+
+- 当页面内容区域比较长时；
+- 当用户需要频繁返回顶部查看相关内容时。
+
+## API
+
+> 有默认样式，距离底部 `50px`，可覆盖。
+>
+> 自定义样式宽高不大于 40px \* 40px。
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window | |
+| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | number | 400 | |
+
+### 事件
+
+| 事件名称 | 说明 | 回调参数 | 版本 |
+| -------- | ------------------ | -------- | ---- |
+| click | 点击按钮的回调函数 | Function | |
diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
index 3f6838167c..20a75da6cc 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -1,28 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`renders ./antdv-demo/docs/badge/demo/basic.md correctly 1`] = `
-
+
diff --git a/components/auto-complete/demo/basic.vue b/components/auto-complete/demo/basic.vue
new file mode 100644
index 0000000000..d121755fdb
--- /dev/null
+++ b/components/auto-complete/demo/basic.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+ {{ item.value }}
+
+ more
+
+
+
+
+
+ View all results
+
+
+
+ {{ item.title }}
+ {{ item.count }} people
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/auto-complete/demo/custom.vue b/components/auto-complete/demo/custom.vue
new file mode 100644
index 0000000000..cf29e71f0f
--- /dev/null
+++ b/components/auto-complete/demo/custom.vue
@@ -0,0 +1,61 @@
+
+
+
+ Found {{ item.query }} on
+
+ {{ item.category }}
+
+ {{ item.count }} results
+
+
+
+
+
+
+
+
diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md
new file mode 100644
index 0000000000..a214505fda
--- /dev/null
+++ b/components/auto-complete/index.en-US.md
@@ -0,0 +1,56 @@
+---
+category: Components
+type: Data Entry
+cols: 2
+title: AutoComplete
+cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
+---
+
+Autocomplete function of input field.
+
+## When To Use
+
+When there is a need for autocomplete functionality.
+
+## API
+
+```html
+0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
- - -1
+ + `; -exports[`renders ./antdv-demo/docs/avatar/demo/basic.md correctly 1`] = ` -
-
-
+exports[`renders ./components/avatar/demo/basic.vue correctly 1`] = `-
-
`; + +exports[`renders ./components/avatar/demo/dynamic.vue correctly 1`] = ` +U `; -exports[`renders ./antdv-demo/docs/avatar/demo/dynamic.md correctly 1`] = ` -
U
+exports[`renders ./components/avatar/demo/group.vue correctly 1`] = `
+K
+
+
+
+
+K
+ +2
+
+
+
+K
+ +2
+UUSERU
`;
+exports[`renders ./components/avatar/demo/responsive.vue correctly 1`] = ``;
+
+exports[`renders ./components/avatar/demo/type.vue correctly 1`] = `UUSERUU`;
diff --git a/components/avatar/demo/badge.vue b/components/avatar/demo/badge.vue
new file mode 100644
index 0000000000..d708d3aa04
--- /dev/null
+++ b/components/avatar/demo/badge.vue
@@ -0,0 +1,50 @@
++
- Scroll down to see the bottom-right gray button.
-
-`;
+exports[`renders ./components/back-top/demo/basic.vue correctly 1`] = ` Scroll down to see the bottom-right gray button.`;
-exports[`renders ./antdv-demo/docs/back-top/demo/custom.md correctly 1`] = `
+exports[`renders ./components/back-top/demo/custom.vue correctly 1`] = `
- Scroll down to see the bottom-right blue button.
+ Scroll down to see the bottom-right blue button.
`;
diff --git a/components/back-top/demo/basic.vue b/components/back-top/demo/basic.vue
new file mode 100644
index 0000000000..e7aef6a706
--- /dev/null
+++ b/components/back-top/demo/basic.vue
@@ -0,0 +1,23 @@
+
+
+
+ Scroll down to see the bottom-right
+ blue
+ button.
+
+
+
+
diff --git a/components/back-top/demo/index.vue b/components/back-top/demo/index.vue
new file mode 100644
index 0000000000..d966a0d884
--- /dev/null
+++ b/components/back-top/demo/index.vue
@@ -0,0 +1,27 @@
+
+ UP
+ 0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
-0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
- +exports[`renders ./components/badge/demo/basic.vue correctly 1`] = ` +5
+0
+ `; -exports[`renders ./antdv-demo/docs/badge/demo/change.md correctly 1`] = ` -