doc: merge doc
tangjinzhou
parent
b6ef2b192c
commit
97567f1c8e
|
|
@ -0,0 +1,41 @@
|
|||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest usage.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-affix :offset-top="top">
|
||||
<a-button type="primary" @click="top += 10">Affix top</a-button>
|
||||
</a-affix>
|
||||
<br />
|
||||
<a-affix :offset-bottom="bottom">
|
||||
<a-button type="primary" @click="bottom += 10">Affix bottom</a-button>
|
||||
</a-affix>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const top = ref<number>(10);
|
||||
const bottom = ref<number>(10);
|
||||
return {
|
||||
top,
|
||||
bottom,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<demo-sort>
|
||||
<basic />
|
||||
<on-change />
|
||||
<traget />
|
||||
</demo-sort>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
import Basic from './basic.vue';
|
||||
import OnChange from './on-change.vue';
|
||||
import Traget from './target.vue';
|
||||
|
||||
export default defineComponent({
|
||||
CN,
|
||||
US,
|
||||
components: {
|
||||
Basic,
|
||||
OnChange,
|
||||
Traget,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<docs>
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 固定状态改变的回调
|
||||
en-US: Callback
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以获得是否固定的状态。
|
||||
|
||||
## en-US
|
||||
|
||||
Callback with affixed state.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-affix :offset-top="120" @change="change">
|
||||
<a-button>120px to affix top</a-button>
|
||||
</a-affix>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const change = (affixed: boolean) => {
|
||||
console.log(affixed);
|
||||
};
|
||||
|
||||
return {
|
||||
change,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<docs>
|
||||
---
|
||||
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`).
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div id="components-affix-demo-target" ref="containerRef" class="scrollable-container">
|
||||
<div class="background">
|
||||
<a-affix :target="() => containerRef">
|
||||
<a-button type="primary">Fixed at the top of container</a-button>
|
||||
</a-affix>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, VNode } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const containerRef = ref<VNode>();
|
||||
return {
|
||||
containerRef,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#components-affix-demo-target.scrollable-container {
|
||||
height: 100px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
#components-affix-demo-target .background {
|
||||
padding-top: 60px;
|
||||
height: 300px;
|
||||
background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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
|
||||
<a-affix :style="{ position: 'absolute', top: y, left: x}">
|
||||
...
|
||||
</a-affix>
|
||||
```
|
||||
|
||||
## 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)
|
||||
|
|
@ -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
|
||||
<a-affix :style="{ position: 'absolute', top: y, left: x}">
|
||||
...
|
||||
</a-affix>
|
||||
```
|
||||
|
||||
## 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)
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<docs>
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 顶部公告
|
||||
en-US: Banner
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法，适用于简短的警告提示。
|
||||
|
||||
## en-US
|
||||
|
||||
Display Alert as a banner at top of page.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-alert message="Warning text" banner />
|
||||
<br />
|
||||
<a-alert
|
||||
message="Very long warning text warning text text text text text text text"
|
||||
banner
|
||||
closable
|
||||
/>
|
||||
<br />
|
||||
<a-alert :show-icon="false" message="Warning text without icon" banner />
|
||||
<br />
|
||||
<a-alert type="error" message="Error text" banner />
|
||||
</template>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本用法
|
||||
en-US: Basic usage
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法，适用于简短的警告提示。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest usage for short messages.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-alert message="Success Text" type="success" />
|
||||
</template>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<docs>
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 可关闭的警告提示
|
||||
en-US: Customized Close Text
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
显示关闭按钮，点击可关闭警告提示。
|
||||
|
||||
## en-US
|
||||
|
||||
To show close button.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-alert
|
||||
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
|
||||
type="warning"
|
||||
closable
|
||||
@close="onClose"
|
||||
/>
|
||||
<a-alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
closable
|
||||
@close="onClose"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const onClose = (e: MouseEvent) => {
|
||||
console.log(e, 'I was closed.');
|
||||
};
|
||||
return {
|
||||
onClose,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<docs>
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 自定义关闭
|
||||
en-US: Customized Close Text
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
自定义图标让信息类型更加醒目。
|
||||
|
||||
## en-US
|
||||
|
||||
Replace the default icon with customized text.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-alert message="Info Text" type="info" close-text="Close Now" />
|
||||
</template>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<docs>
|
||||
---
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 自定义图标
|
||||
en-US: Custom Icon
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
|
||||
|
||||
## en-US
|
||||
|
||||
Custom Icon make information more clear and more friendly.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-alert message="showIcon = false" type="success">
|
||||
<template #icon><smile-outlined /></template>
|
||||
</a-alert>
|
||||
<a-alert message="Success Tips" type="success" showIcon>
|
||||
<template #icon><smile-outlined /></template>
|
||||
</a-alert>
|
||||
<a-alert message="Informational Notes" type="info" showIcon>
|
||||
<template #icon><smile-outlined /></template>
|
||||
</a-alert>
|
||||
<a-alert message="Warning" type="warning" showIcon>
|
||||
<template #icon><smile-outlined /></template>
|
||||
</a-alert>
|
||||
<a-alert message="Error" type="error" showIcon>
|
||||
<template #icon><smile-outlined /></template>
|
||||
</a-alert>
|
||||
<a-alert
|
||||
message="Success Tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
type="success"
|
||||
show-icon
|
||||
>
|
||||
<template #icon><smile-outlined /></template>
|
||||
</a-alert>
|
||||
<a-alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and informations about copywriting."
|
||||
type="info"
|
||||
show-icon
|
||||
>
|
||||
<template #icon><smile-outlined /></template>
|
||||
</a-alert>
|
||||
<a-alert
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
type="warning"
|
||||
show-icon
|
||||
>
|
||||
<template #icon><smile-outlined /></template>
|
||||
</a-alert>
|
||||
<a-alert
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
type="error"
|
||||
show-icon
|
||||
>
|
||||
<template #icon><smile-outlined /></template>
|
||||
</a-alert>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { SmileOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SmileOutlined,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<docs>
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 含有辅助性文字介绍
|
||||
en-US: Description
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
含有辅助性文字介绍的警告提示。
|
||||
|
||||
## en-US
|
||||
|
||||
Additional description for alert message.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-alert message="Success Text" type="success">
|
||||
<template #description>
|
||||
<p>
|
||||
Success Description
|
||||
<span style="color: red">Success</span>
|
||||
Description Success Description
|
||||
</p>
|
||||
</template>
|
||||
</a-alert>
|
||||
<a-alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
/>
|
||||
<a-alert
|
||||
message="Warning Text"
|
||||
description="Warning Description Warning Description Warning Description Warning Description"
|
||||
type="warning"
|
||||
/>
|
||||
<a-alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<docs>
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 图标
|
||||
en-US: Icon
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可口的图标让信息类型更加醒目。
|
||||
|
||||
## en-US
|
||||
|
||||
Decent icon make information more clear and more friendly.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-alert message="Success Tips" type="success" show-icon />
|
||||
<a-alert message="Informational Notes" type="info" show-icon />
|
||||
<a-alert message="Warning" type="warning" show-icon />
|
||||
<a-alert message="Error" type="error" show-icon />
|
||||
<a-alert
|
||||
message="Success Tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
type="success"
|
||||
show-icon
|
||||
/>
|
||||
<a-alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and informations about copywriting."
|
||||
type="info"
|
||||
show-icon
|
||||
/>
|
||||
<a-alert
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
type="warning"
|
||||
show-icon
|
||||
/>
|
||||
<a-alert
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
type="error"
|
||||
show-icon
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<demo-sort>
|
||||
<basic />
|
||||
<four-style />
|
||||
<closable />
|
||||
<description />
|
||||
<icon />
|
||||
<close-text />
|
||||
<banner />
|
||||
<custom-icon />
|
||||
<smooth-closed />
|
||||
</demo-sort>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Banner from './banner.vue';
|
||||
import Basic from './basic.vue';
|
||||
import Closable from './closable.vue';
|
||||
import CloseText from './close-text.vue';
|
||||
import Description from './description.vue';
|
||||
import Icon from './icon.vue';
|
||||
import Style from './style.vue';
|
||||
import SmoothClosed from './smooth-closed.vue';
|
||||
import CustomIcon from './custom-icon.vue';
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
CN,
|
||||
US,
|
||||
components: {
|
||||
Basic,
|
||||
Banner,
|
||||
Closable,
|
||||
CloseText,
|
||||
Description,
|
||||
Icon,
|
||||
FourStyle: Style, //style 标签报错
|
||||
SmoothClosed,
|
||||
CustomIcon,
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
[id^='components-alert-demo'] .ant-alert {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<docs>
|
||||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 平滑地卸载
|
||||
en-US: Smoothly Unmount
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
平滑、自然的卸载提示。
|
||||
|
||||
## en-US
|
||||
|
||||
Smoothly and unaffectedly unmount Alert.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-alert
|
||||
v-if="visible"
|
||||
message="Alert Message Text"
|
||||
type="success"
|
||||
closable
|
||||
:after-close="handleClose"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const visible = ref<boolean>(true);
|
||||
const handleClose = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
return {
|
||||
visible,
|
||||
handleClose,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<docs>
|
||||
---
|
||||
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`.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-alert message="Success Text" type="success" />
|
||||
<a-alert message="Info Text" type="info" />
|
||||
<a-alert message="Warning Text" type="warning" />
|
||||
<a-alert message="Error Text" type="error" />
|
||||
</template>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
category: Components
|
||||
type: Feedback
|
||||
title: Alert
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
|
||||
---
|
||||
|
||||
Alert component for feedback.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When you need to show alert messages to users.
|
||||
- When you need a persistent static container which is closable by user actions.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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 | string\|slot | - | |
|
||||
| description | Additional content of Alert | string\|slot | - | |
|
||||
| icon | Custom icon, effective when `showIcon` is `true` | vnode \| slot | - | |
|
||||
| message | Content of Alert | string\|slot | - | |
|
||||
| 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` | |
|
||||
|
||||
### events
|
||||
|
||||
| Events Name | Description | Arguments | Version |
|
||||
| ----------- | ----------------------------- | ----------------------- | ------- |
|
||||
| close | Callback when Alert is closed | (e: MouseEvent) => void | - |
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
---
|
||||
category: Components
|
||||
type: 反馈
|
||||
title: Alert
|
||||
subtitle: 警告提示
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
|
||||
---
|
||||
|
||||
警告提示，展现需要关注的信息。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当某个页面需要向用户显示警告的信息时。
|
||||
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
|
||||
| banner | 是否用作顶部公告 | boolean | false | |
|
||||
| closable | 默认不显示关闭按钮 | boolean | 无 | |
|
||||
| closeText | 自定义关闭按钮 | string\|slot | 无 | |
|
||||
| description | 警告提示的辅助性文字介绍 | string\|slot | 无 | |
|
||||
| icon | 自定义图标，`showIcon` 为 `true` 时有效 | vnode\|slot | - | |
|
||||
| message | 警告提示内容 | string\|slot | 无 | |
|
||||
| showIcon | 是否显示辅助图标 | boolean | false,`banner` 模式下默认值为 true | |
|
||||
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`,`banner` 模式下默认值为 `warning` | |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 | 版本 |
|
||||
| -------- | -------------------- | ----------------------- | ---- |
|
||||
| close | 关闭时触发的回调函数 | (e: MouseEvent) => void | - |
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本使用
|
||||
en-US: Basic Usage
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest usage.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-anchor>
|
||||
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<a-anchor-link
|
||||
href="#components-anchor-demo-basic"
|
||||
title="Basic demo with Target"
|
||||
target="_blank"
|
||||
/>
|
||||
<a-anchor-link href="#API" title="API">
|
||||
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
|
||||
<a-anchor-link href="#Link-Props" title="Link Props" />
|
||||
</a-anchor-link>
|
||||
</a-anchor>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<docs>
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 自定义锚点高亮
|
||||
en-US: Customize the anchor highlight
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
自定义锚点高亮。
|
||||
|
||||
## en-US
|
||||
|
||||
Customize the anchor highlight.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-anchor :affix="false" :getCurrentAnchor="getCurrentAnchor">
|
||||
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<a-anchor-link href="#API" title="API">
|
||||
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
|
||||
<a-anchor-link href="#Link-Props" title="Link Props" />
|
||||
</a-anchor-link>
|
||||
</a-anchor>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const getCurrentAnchor = () => {
|
||||
return '#components-anchor-demo-static';
|
||||
};
|
||||
return {
|
||||
getCurrentAnchor,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<demo-sort>
|
||||
<basic />
|
||||
<static />
|
||||
<on-click />
|
||||
<customize-highlight />
|
||||
<target-offset />
|
||||
<on-change />
|
||||
</demo-sort>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Basic from './basic.vue';
|
||||
import Static from './static.vue';
|
||||
import OnClick from './onClick.vue';
|
||||
import CustomizeHighlight from './customizeHighlight.vue';
|
||||
import TargetOffset from './targetOffset.vue';
|
||||
import OnChange from './onChange.vue';
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
CN,
|
||||
US,
|
||||
components: {
|
||||
Basic,
|
||||
Static,
|
||||
OnClick,
|
||||
CustomizeHighlight,
|
||||
TargetOffset,
|
||||
OnChange,
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<docs>
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 监听锚点链接改变
|
||||
en-US: Listening for anchor link change
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
监听锚点链接改变。
|
||||
|
||||
## en-US
|
||||
|
||||
Listening for anchor link change.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-anchor :affix="false" @change="onChange">
|
||||
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<a-anchor-link href="#API" title="API">
|
||||
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
|
||||
<a-anchor-link href="#Link-Props" title="Link Props" />
|
||||
</a-anchor-link>
|
||||
</a-anchor>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const onChange = (link: string) => {
|
||||
console.log('Anchor:OnChange', link);
|
||||
};
|
||||
return {
|
||||
onChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<docs>
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 自定义 click 事件
|
||||
en-US: Customize the click event
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
点击锚点不记录历史。
|
||||
|
||||
## en-US
|
||||
|
||||
Clicking on an anchor does not record history.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-anchor :affix="false" @click="handleClick">
|
||||
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<a-anchor-link href="#API" title="API">
|
||||
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
|
||||
<a-anchor-link href="#Link-Props" title="Link Props" />
|
||||
</a-anchor-link>
|
||||
</a-anchor>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const handleClick = (e: Event, link: string) => {
|
||||
e.preventDefault();
|
||||
console.log(link);
|
||||
};
|
||||
return {
|
||||
handleClick,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<docs>
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 静态位置
|
||||
en-US: Static
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
不浮动，状态不随页面滚动变化。
|
||||
|
||||
## en-US
|
||||
|
||||
Do not change state when page is scrolling.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-anchor :affix="false">
|
||||
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<a-anchor-link href="#API" title="API">
|
||||
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
|
||||
<a-anchor-link href="#Link-Props" title="Link Props" />
|
||||
</a-anchor-link>
|
||||
</a-anchor>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<docs>
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 设置锚点滚动偏移量
|
||||
en-US: Set Anchor scroll offset
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
锚点目标滚动到屏幕正中间。
|
||||
|
||||
## en-US
|
||||
|
||||
Anchor target scroll to screen center.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-anchor :target-offset="targetOffset">
|
||||
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<a-anchor-link href="#API" title="API">
|
||||
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
|
||||
<a-anchor-link href="#Link-Props" title="Link Props" />
|
||||
</a-anchor-link>
|
||||
</a-anchor>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const targetOffset = ref<number | undefined>(undefined);
|
||||
onMounted(() => {
|
||||
targetOffset.value = window.innerHeight / 2;
|
||||
});
|
||||
return {
|
||||
targetOffset,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -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 |
|
||||
|
|
@ -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 |
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本使用
|
||||
en-US: Basic Usage
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
基本使用。通过 options 设置自动完成的数据源。
|
||||
|
||||
## en-US
|
||||
|
||||
Basic Usage, set datasource of autocomplete with `options` property.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-auto-complete
|
||||
v-model:value="value"
|
||||
:options="options"
|
||||
style="width: 200px"
|
||||
placeholder="input here"
|
||||
@select="onSelect"
|
||||
@search="onSearch"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, watch } from 'vue';
|
||||
|
||||
interface MockVal {
|
||||
value: string;
|
||||
}
|
||||
const mockVal = (str: string, repeat = 1): MockVal => {
|
||||
return {
|
||||
value: str.repeat(repeat),
|
||||
};
|
||||
};
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const value = ref('');
|
||||
const options = ref<MockVal[]>([]);
|
||||
const onSearch = (searchText: string) => {
|
||||
console.log('searchText');
|
||||
options.value = !searchText
|
||||
? []
|
||||
: [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
|
||||
};
|
||||
const onSelect = (value: string) => {
|
||||
console.log('onSelect', value);
|
||||
};
|
||||
watch(value, () => {
|
||||
console.log('value', value.value);
|
||||
});
|
||||
return {
|
||||
value,
|
||||
options,
|
||||
onSearch,
|
||||
onSelect,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<docs>
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 查询模式 - 确定类目
|
||||
en-US: Lookup-Patterns - Certain Category
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
查询模式 - 确定类目。
|
||||
|
||||
## en-US
|
||||
|
||||
Lookup-Patterns - Certain Category.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div class="certain-category-search-wrapper" style="width: 250px">
|
||||
<a-auto-complete
|
||||
v-model:value="value"
|
||||
class="certain-category-search"
|
||||
dropdown-class-name="certain-category-search-dropdown"
|
||||
:dropdown-match-select-width="false"
|
||||
:dropdown-style="{ width: '300px' }"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
option-label-prop="value"
|
||||
>
|
||||
<template #dataSource>
|
||||
<a-select-opt-group v-for="group in dataSource" :key="group.title">
|
||||
<template #label>
|
||||
<span>
|
||||
{{ group.title }}
|
||||
<a
|
||||
style="float: right"
|
||||
href="https://www.google.com/search?q=antd"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
more
|
||||
</a>
|
||||
</span>
|
||||
</template>
|
||||
<a-select-option v-for="opt in group.children" :key="opt.title" :value="opt.title">
|
||||
{{ opt.title }}
|
||||
<span class="certain-search-item-count">{{ opt.count }} people</span>
|
||||
</a-select-option>
|
||||
</a-select-opt-group>
|
||||
<a-select-option key="all" disabled class="show-all">
|
||||
<a
|
||||
href="https://www.google.com/search?q=ant-design-vue"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
View all results
|
||||
</a>
|
||||
</a-select-option>
|
||||
</template>
|
||||
<a-input placeholder="input here">
|
||||
<template #suffix><search-outlined class="certain-category-icon" /></template>
|
||||
</a-input>
|
||||
</a-auto-complete>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { SearchOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
const dataSource = [
|
||||
{
|
||||
title: 'Libraries',
|
||||
children: [
|
||||
{
|
||||
title: 'AntDesign',
|
||||
count: 10000,
|
||||
},
|
||||
{
|
||||
title: 'AntDesign UI',
|
||||
count: 10600,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Solutions',
|
||||
children: [
|
||||
{
|
||||
title: 'AntDesign UI FAQ',
|
||||
count: 60100,
|
||||
},
|
||||
{
|
||||
title: 'AntDesign FAQ',
|
||||
count: 30010,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Articles',
|
||||
children: [
|
||||
{
|
||||
title: 'AntDesign design language',
|
||||
count: 100000,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
value: ref(''),
|
||||
dataSource,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
SearchOutlined,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
|
||||
border-bottom: 1px solid #f6f6f6;
|
||||
}
|
||||
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu {
|
||||
max-height: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.certain-category-search-wrapper
|
||||
:deep(.certain-category-search.ant-select-auto-complete)
|
||||
.ant-input-affix-wrapper
|
||||
.ant-input-suffix {
|
||||
right: 12px;
|
||||
}
|
||||
.certain-category-search-wrapper :deep(.certain-search-item-count) {
|
||||
position: absolute;
|
||||
color: #999;
|
||||
right: 16px;
|
||||
}
|
||||
.certain-category-search-wrapper
|
||||
:deep(.certain-category-search.ant-select-focused)
|
||||
.certain-category-icon {
|
||||
color: #108ee9;
|
||||
}
|
||||
.certain-category-search-wrapper :deep(.certain-category-icon) {
|
||||
color: #6e6e6e;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<docs>
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 自定义输入组件
|
||||
en-US: Customize Input Component
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
自定义输入组件。
|
||||
|
||||
## en-US
|
||||
|
||||
Customize Input Component.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-auto-complete
|
||||
v-model:value="value"
|
||||
:options="options"
|
||||
style="width: 200px"
|
||||
@search="handleSearch"
|
||||
@select="onSelect"
|
||||
>
|
||||
<a-textarea
|
||||
placeholder="input here"
|
||||
class="custom"
|
||||
style="height: 50px"
|
||||
@keypress="handleKeyPress"
|
||||
/>
|
||||
</a-auto-complete>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const value = ref('');
|
||||
const options = ref<{ value: string }[]>([]);
|
||||
const onSelect = (value: string) => {
|
||||
console.log('onSelect', value);
|
||||
};
|
||||
const handleSearch = (value: string) => {
|
||||
options.value = !value
|
||||
? []
|
||||
: [{ value }, { value: value + value }, { value: value + value + value }];
|
||||
};
|
||||
const handleKeyPress = (ev: KeyboardEvent) => {
|
||||
console.log('handleKeyPress', ev);
|
||||
};
|
||||
return {
|
||||
value,
|
||||
options,
|
||||
onSelect,
|
||||
handleSearch,
|
||||
handleKeyPress,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<demo-sort>
|
||||
<basic />
|
||||
<options />
|
||||
<custom />
|
||||
<non-case-sensitive />
|
||||
<certain-category />
|
||||
<uncertain-category />
|
||||
</demo-sort>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Basic from './basic.vue';
|
||||
import Options from './options.vue';
|
||||
import Custom from './custom.vue';
|
||||
import NonCaseSensitive from './non-case-sensitive.vue';
|
||||
import CertainCategory from './certain-category.vue';
|
||||
import UncertainCategory from './uncertain-category.vue';
|
||||
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
CN,
|
||||
US,
|
||||
components: {
|
||||
Basic,
|
||||
Options,
|
||||
Custom,
|
||||
NonCaseSensitive,
|
||||
CertainCategory,
|
||||
UncertainCategory,
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<docs>
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 不区分大小写
|
||||
en-US: Non-case-sensitive AutoComplete
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
不区分大小写的 AutoComplete。
|
||||
|
||||
## en-US
|
||||
|
||||
A non-case-sensitive AutoComplete.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-auto-complete
|
||||
v-model:value="value"
|
||||
:options="options"
|
||||
style="width: 200px"
|
||||
placeholder="input here"
|
||||
:filter-option="filterOption"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
interface Option {
|
||||
value: string;
|
||||
}
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const filterOption = (input: string, option: Option) => {
|
||||
return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
|
||||
};
|
||||
return {
|
||||
value: ref(''),
|
||||
options: ref<Option[]>([
|
||||
{ value: 'Burns Bay Road' },
|
||||
{ value: 'Downing Street' },
|
||||
{ value: 'Wall Street' },
|
||||
]),
|
||||
filterOption,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<docs>
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 自定义选项
|
||||
en-US: Customized
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
也可以直接传递 #dataSource 的Option。
|
||||
|
||||
## en-US
|
||||
|
||||
You could pass `#dataSource` as children of `AutoComplete`, instead of using `dataSource`.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-auto-complete
|
||||
v-model:value="value"
|
||||
style="width: 200px"
|
||||
placeholder="input here"
|
||||
@search="handleSearch"
|
||||
>
|
||||
<template #dataSource>
|
||||
<a-select-option v-for="email in result" :key="email">
|
||||
{{ email }}
|
||||
</a-select-option>
|
||||
</template>
|
||||
</a-auto-complete>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const value = ref('');
|
||||
const result = ref<string[]>([]);
|
||||
const handleSearch = (val: string) => {
|
||||
let res: string[];
|
||||
if (!val || val.indexOf('@') >= 0) {
|
||||
res = [];
|
||||
} else {
|
||||
res = ['gmail.com', '163.com', 'qq.com'].map(domain => `${val}@${domain}`);
|
||||
}
|
||||
result.value = res;
|
||||
};
|
||||
|
||||
return {
|
||||
value,
|
||||
result,
|
||||
handleSearch,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<docs>
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 查询模式 - 不确定类目
|
||||
en-US: Lookup-Patterns - Uncertain Category
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
查询模式 - 不确定类目。
|
||||
|
||||
## en-US
|
||||
|
||||
Lookup-Patterns - Uncertain Category.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div class="global-search-wrapper" style="width: 300px">
|
||||
<a-auto-complete
|
||||
v-model:value="value"
|
||||
class="global-search"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
option-label-prop="title"
|
||||
@select="onSelect"
|
||||
@search="handleSearch"
|
||||
>
|
||||
<template #dataSource>
|
||||
<a-select-option v-for="item in dataSource" :key="item.category" :title="item.category">
|
||||
Found {{ item.query }} on
|
||||
<a
|
||||
:href="`https://s.taobao.com/search?q=${item.query}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{{ item.category }}
|
||||
</a>
|
||||
<span class="global-search-item-count">{{ item.count }} results</span>
|
||||
</a-select-option>
|
||||
</template>
|
||||
<a-input-search size="large" placeholder="input here" enterButton></a-input-search>
|
||||
</a-auto-complete>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
interface Option {
|
||||
query: string;
|
||||
category: string;
|
||||
count: number;
|
||||
}
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const value = ref('');
|
||||
const dataSource = ref<Option[]>([]);
|
||||
const onSelect = (value: string) => {
|
||||
console.log('onSelect', value);
|
||||
};
|
||||
|
||||
const getRandomInt = (max: number, min = 0) => {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
};
|
||||
|
||||
const searchResult = (query: string): Option[] => {
|
||||
return new Array(getRandomInt(5))
|
||||
.join('.')
|
||||
.split('.')
|
||||
.map((item, idx) => ({
|
||||
query,
|
||||
category: `${query}${idx}`,
|
||||
count: getRandomInt(200, 100),
|
||||
}));
|
||||
};
|
||||
const handleSearch = (val: string) => {
|
||||
dataSource.value = val ? searchResult(val) : [];
|
||||
};
|
||||
return {
|
||||
value,
|
||||
dataSource,
|
||||
onSelect,
|
||||
handleSearch,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.global-search-wrapper {
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.global-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.global-search.ant-select-auto-complete .ant-select-selection--single {
|
||||
margin-right: -46px;
|
||||
}
|
||||
|
||||
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
|
||||
padding-right: 62px;
|
||||
}
|
||||
|
||||
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.global-search-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.global-search-item-desc {
|
||||
flex: auto;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.global-search-item-count {
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
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
|
||||
<a-auto-complete v-model:value="value" :options="options" />
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | Show clear button, effective in multiple mode only. | boolean | false | |
|
||||
| autofocus | get focus when component mounted | boolean | false | |
|
||||
| backfill | backfill selected item the input when using keyboard | boolean | false | |
|
||||
| #default (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
|
||||
| options | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | |
|
||||
| dropdownMenuStyle | additional style applied to dropdown menu | object | | 1.5.0 |
|
||||
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
|
||||
| disabled | Whether disabled select | boolean | false | |
|
||||
| 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 or function(inputValue, option) | true | |
|
||||
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` | |
|
||||
| placeholder | placeholder of input | string | - | |
|
||||
| v-model:value | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array<{ key: string, label: string\|vNodes }> | - | |
|
||||
| defaultOpen | Initial open state of dropdown | boolean | - | |
|
||||
| open | Controlled open state of dropdown | boolean | - | |
|
||||
|
||||
### events
|
||||
|
||||
| Events Name | Description | Arguments | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| change | Called when select an option or input value change, or value of input is changed | function(value) | |
|
||||
| blur | Called when leaving the component. | function() | |
|
||||
| focus | Called when entering the component | function() | |
|
||||
| search | Called when searching items. | function(value) | - | |
|
||||
| select | Called when a option is selected. param is option's value and option instance. | function(value, option) | |
|
||||
| dropdownVisibleChange | Call when dropdown open | function(open) | |
|
||||
|
||||
## Methods
|
||||
|
||||
| Name | Description | Version |
|
||||
| ------- | ------------ | ------- |
|
||||
| blur() | remove focus | |
|
||||
| focus() | get focus | |
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
category: Components
|
||||
subtitle: 自动完成
|
||||
type: 数据录入
|
||||
cols: 2
|
||||
title: AutoComplete
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
|
||||
---
|
||||
|
||||
输入框自动完成功能。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 需要一个输入框而不是选择器。
|
||||
- 需要输入建议/辅助提示。
|
||||
|
||||
和 Select 的区别是：
|
||||
|
||||
- AutoComplete 是一个带提示的文本输入框，用户可以自由输入，关键词是辅助**输入**。
|
||||
- Select 是在限定的可选项中进行选择，关键词是**选择**。
|
||||
|
||||
## API
|
||||
|
||||
```html
|
||||
<a-auto-complete v-model:value="value" :options="options" />
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | 支持清除, 单选模式有效 | boolean | false | |
|
||||
| autofocus | 自动获取焦点 | boolean | false | |
|
||||
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
|
||||
| #default (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
|
||||
| options | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | |
|
||||
| dropdownMenuStyle | dropdown 菜单自定义样式 | object | | 1.5.0 |
|
||||
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | |
|
||||
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` | |
|
||||
| placeholder | 输入框提示 | string \| slot | - | |
|
||||
| v-model:value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array<{ key: string, label: string\|vNodes }> | 无 | |
|
||||
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
|
||||
| open | 是否展开下拉菜单 | boolean | - | |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 | 版本 |
|
||||
| --- | --- | --- | --- |
|
||||
| change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) |
|
||||
| blur | 失去焦点时的回调 | function() |
|
||||
| focus | 获得焦点时的回调 | function() |
|
||||
| search | 搜索补全项的时候调用 | function(value) |
|
||||
| select | 被选中时调用，参数为选中项的 value 值 | function(value, option) |
|
||||
| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) |
|
||||
|
||||
## 方法
|
||||
|
||||
| 名称 | 描述 | 版本 |
|
||||
| ------- | -------- | ---- |
|
||||
| blur() | 移除焦点 |
|
||||
| focus() | 获取焦点 |
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<docs>
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 带徽标的头像
|
||||
en-US: With Badge
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
通常用于消息提示。
|
||||
|
||||
## en-US
|
||||
|
||||
Usually used for reminders and notifications.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<span style="margin-right: 24px">
|
||||
<a-badge :count="1">
|
||||
<a-avatar shape="square">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
</a-badge>
|
||||
</span>
|
||||
<span>
|
||||
<a-badge dot>
|
||||
<a-avatar shape="square">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
</a-badge>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { UserOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UserOutlined,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#components-avatar-demo-badge .ant-avatar {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
头像有三种尺寸，两种形状可选。
|
||||
|
||||
## en-US
|
||||
|
||||
Three sizes and two shapes are available.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-avatar :size="64">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
<a-avatar size="large">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
<a-avatar>
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
<a-avatar size="small">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
<br />
|
||||
<a-avatar shape="square" :size="64">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
<a-avatar shape="square" size="large">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
<a-avatar shape="square">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
<a-avatar shape="square" size="small">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { UserOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UserOutlined,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<docs>
|
||||
---
|
||||
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.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-avatar
|
||||
shape="square"
|
||||
size="large"
|
||||
:style="{ backgroundColor: color, verticalAlign: 'middle' }"
|
||||
>
|
||||
{{ avatarValue }}
|
||||
</a-avatar>
|
||||
<a-button
|
||||
size="small"
|
||||
:style="{ marginLeft: '16px', verticalAlign: 'middle' }"
|
||||
@click="changeValue"
|
||||
>
|
||||
改变
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
|
||||
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const avatarValue = ref(UserList[0]);
|
||||
const color = ref(colorList[0]);
|
||||
const changeValue = () => {
|
||||
const index = UserList.indexOf(avatarValue.value);
|
||||
avatarValue.value = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
|
||||
color.value = index < colorList.length - 1 ? colorList[index + 1] : colorList[0];
|
||||
};
|
||||
return {
|
||||
avatarValue,
|
||||
color,
|
||||
changeValue,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<docs>
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: Avatar.Group
|
||||
en-US: Avatar.Group
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
头像组合展现。
|
||||
|
||||
## en-US
|
||||
|
||||
Avatar group display.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-avatar-group>
|
||||
<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<a-avatar style="background-color: #f56a00">K</a-avatar>
|
||||
<a-tooltip title="Ant User" placement="top">
|
||||
<a-avatar style="background-color: #87d068">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
</a-tooltip>
|
||||
<a-avatar style="background-color: #1890ff">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
</a-avatar-group>
|
||||
<a-divider />
|
||||
<a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
|
||||
<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<a-avatar style="background-color: #1890ff">K</a-avatar>
|
||||
<a-tooltip title="Ant User" placement="top">
|
||||
<a-avatar style="background-color: #87d068">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
</a-tooltip>
|
||||
<a-avatar style="background-color: #1890ff">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
</a-avatar-group>
|
||||
<a-divider />
|
||||
<a-avatar-group
|
||||
:max-count="2"
|
||||
size="large"
|
||||
:max-style="{
|
||||
color: '#f56a00',
|
||||
backgroundColor: '#fde3cf',
|
||||
}"
|
||||
>
|
||||
<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<a-avatar style="background-color: #1890ff">K</a-avatar>
|
||||
<a-tooltip title="Ant User" placement="top">
|
||||
<a-avatar style="background-color: #87d068">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
</a-tooltip>
|
||||
<a-avatar style="background-color: #1890ff">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
</a-avatar-group>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { UserOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UserOutlined,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<demo-sort>
|
||||
<basic />
|
||||
<type />
|
||||
<dynamic />
|
||||
<badge />
|
||||
<group />
|
||||
<responsive />
|
||||
</demo-sort>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Basic from './basic.vue';
|
||||
import Type from './type.vue';
|
||||
import Dynamic from './dynamic.vue';
|
||||
import Badge from './badge.vue';
|
||||
import Group from './group.vue';
|
||||
import Responsive from './responsive.vue';
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
CN,
|
||||
US,
|
||||
components: {
|
||||
Basic,
|
||||
Type,
|
||||
Dynamic,
|
||||
Badge,
|
||||
Group,
|
||||
Responsive,
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
[id^='components-avatar-demo-'] .ant-avatar {
|
||||
margin-top: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<docs>
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 响应式尺寸
|
||||
en-US: Responsive Size
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
头像大小可以根据屏幕大小自动调整。
|
||||
|
||||
## en-US
|
||||
|
||||
Avatar size can be automatically adjusted based on the screen size.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-avatar :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }">
|
||||
<template #icon>
|
||||
<AntDesignOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { AntDesignOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
AntDesignOutlined,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<docs>
|
||||
---
|
||||
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.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-avatar>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<a-avatar>U</a-avatar>
|
||||
<a-avatar>USER</a-avatar>
|
||||
<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<a-avatar style="color: #f56a00; background-color: #fde3cf">U</a-avatar>
|
||||
<a-avatar style="background-color: #87d068">
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { UserOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UserOutlined,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -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` | |
|
||||
|
|
@ -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` | |
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本使用
|
||||
en-US: Basic Usage
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest usage.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-back-top />
|
||||
Scroll down to see the bottom-right
|
||||
<strong style="color: rgba(64, 64, 64, 0.6)">gray</strong>
|
||||
button.
|
||||
</template>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<docs>
|
||||
---
|
||||
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`.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div id="components-back-top-demo-custom">
|
||||
<a-back-top>
|
||||
<div class="ant-back-top-inner">UP</div>
|
||||
</a-back-top>
|
||||
Scroll down to see the bottom-right
|
||||
<strong style="color: #1088e9">blue</strong>
|
||||
button.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#components-back-top-demo-custom .ant-back-top {
|
||||
bottom: 100px;
|
||||
}
|
||||
#components-back-top-demo-custom .ant-back-top-inner {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
background-color: #1088e9;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<demo-sort>
|
||||
<basic />
|
||||
<custom />
|
||||
</demo-sort>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Basic from './basic.vue';
|
||||
import Custom from './custom.vue';
|
||||
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
CN,
|
||||
US,
|
||||
components: {
|
||||
Basic,
|
||||
Custom,
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -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 | |
|
||||
|
|
@ -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 | |
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
简单的徽章展示，当 `count` 为 `0` 时，默认不显示，但是可以使用 `showZero` 修改为显示。
|
||||
|
||||
## en-US
|
||||
|
||||
Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
|
||||
|
||||
</docs>
|
||||
<template>
|
||||
<a-badge count="5">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-badge count="0" show-zero>
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-badge>
|
||||
<template #count>
|
||||
<clock-circle-outlined style="color: #f5222d" />
|
||||
</template>
|
||||
<a href="#" class="head-example"></a>
|
||||
</a-badge>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { ClockCircleOutlined } from '@ant-design/icons-vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
ClockCircleOutlined,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<docs>
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 动态
|
||||
en-US: Dynamic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
展示动态变化的效果。
|
||||
|
||||
## en-US
|
||||
|
||||
The count will be animated as it changes.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-badge :count="count">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-button-group>
|
||||
<a-button @click="decline">
|
||||
<minus-outlined />
|
||||
</a-button>
|
||||
<a-button @click="increase">
|
||||
<plus-outlined />
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<a-badge :dot="show">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-switch v-model:checked="show" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MinusOutlined,
|
||||
PlusOutlined,
|
||||
},
|
||||
setup() {
|
||||
const count = ref<number>(5);
|
||||
const decline = () => {
|
||||
if (count.value >= 1) {
|
||||
count.value--;
|
||||
}
|
||||
};
|
||||
|
||||
const increase = () => {
|
||||
count.value++;
|
||||
};
|
||||
return {
|
||||
count,
|
||||
show: ref<boolean>(true),
|
||||
decline,
|
||||
increase,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<docs>
|
||||
---
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 多彩徽标
|
||||
en-US: Colorful Badge
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
1.5.0 后新增。我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
|
||||
|
||||
## en-US
|
||||
|
||||
New feature after 3.16.0. We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<h4 style="margin-bottom: 16px">Presets:</h4>
|
||||
<div>
|
||||
<div v-for="color in colors" :key="color">
|
||||
<a-badge :color="color" :text="color" />
|
||||
</div>
|
||||
</div>
|
||||
<h4 style="margin: 16px 0">Custom:</h4>
|
||||
<div>
|
||||
<a-badge color="#f50" text="#f50" />
|
||||
<br />
|
||||
<a-badge color="#2db7f5" text="#2db7f5" />
|
||||
<br />
|
||||
<a-badge color="#87d068" text="#87d068" />
|
||||
<br />
|
||||
<a-badge color="#108ee9" text="#108ee9" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
const colors = [
|
||||
'pink',
|
||||
'red',
|
||||
'yellow',
|
||||
'orange',
|
||||
'cyan',
|
||||
'green',
|
||||
'blue',
|
||||
'purple',
|
||||
'geekblue',
|
||||
'magenta',
|
||||
'volcano',
|
||||
'gold',
|
||||
'lime',
|
||||
];
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
colors,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<docs>
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 讨嫌的小红点
|
||||
en-US: Red badge
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
没有具体的数字。
|
||||
|
||||
## en-US
|
||||
|
||||
This will simply display a red badge, without a specific count.
|
||||
If count equals 0, it won't display the dot.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div id="components-badge-demo-dot">
|
||||
<a-badge dot>
|
||||
<notification-outlined />
|
||||
</a-badge>
|
||||
<a-badge :count="0" dot>
|
||||
<notification-outlined />
|
||||
</a-badge>
|
||||
<a-badge dot>
|
||||
<a href="#">Link something</a>
|
||||
</a-badge>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { NotificationOutlined } from '@ant-design/icons-vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
NotificationOutlined,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
#components-badge-demo-dot .anticon-notification {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<demo-sort>
|
||||
<Basic />
|
||||
<NoWapper />
|
||||
<Overflow />
|
||||
<Dot />
|
||||
<Status />
|
||||
<Change />
|
||||
<Title />
|
||||
<Colors />
|
||||
<Link />
|
||||
<Ribbon />
|
||||
</demo-sort>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Basic from './basic.vue';
|
||||
import NoWapper from './no-wrapper.vue';
|
||||
import Dot from './dot.vue';
|
||||
import Change from './change.vue';
|
||||
import Overflow from './overflow.vue';
|
||||
import Status from './status.vue';
|
||||
import Title from './title.vue';
|
||||
import Colors from './colors.vue';
|
||||
import Link from './link.vue';
|
||||
import Ribbon from './ribbon.vue';
|
||||
import CN from './../index.zh-CN.md';
|
||||
import US from './../index.en_US.md';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
CN,
|
||||
US,
|
||||
components: {
|
||||
Basic,
|
||||
NoWapper,
|
||||
Overflow,
|
||||
Dot,
|
||||
Status,
|
||||
Change,
|
||||
Title,
|
||||
Colors,
|
||||
Link,
|
||||
Ribbon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
[id^='components-badge-demo-'] .ant-badge:not(.ant-badge-not-a-wrapper) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
[id^='components-badge-demo-'] .head-example {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 4px;
|
||||
background: #eee;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
[id^='components-badge-demo-'] .ant-badge-not-a-wrapper:not(.ant-badge-status) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<docs>
|
||||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 可点击
|
||||
en-US: Clickable
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用 a 标签进行包裹即可。
|
||||
|
||||
## en-US
|
||||
The badge can be wrapped with `a` tag to make it linkable.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a href="#">
|
||||
<a-badge count="5">
|
||||
<span class="head-example" />
|
||||
</a-badge>
|
||||
</a>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<docs>
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 独立使用
|
||||
en-US: Standalone
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
不包裹任何元素即是独立使用，可自定样式展现。
|
||||
在右上角的 badge 则限定为红色。
|
||||
|
||||
## en-US
|
||||
|
||||
Used in standalone when children is empty.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-badge count="25" />
|
||||
<a-badge
|
||||
count="4"
|
||||
:number-style="{
|
||||
backgroundColor: '#fff',
|
||||
color: '#999',
|
||||
boxShadow: '0 0 0 1px #d9d9d9 inset',
|
||||
}"
|
||||
/>
|
||||
<a-badge count="109" :number-style="{ backgroundColor: '#52c41a' }" />
|
||||
</template>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<docs>
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 封顶数字
|
||||
en-US: Overflow Count
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
超过 `overflowCount` 的会显示为 `${overflowCount}+`，默认的 `overflowCount` 为 `99`。
|
||||
|
||||
## en-US
|
||||
|
||||
`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-badge :count="99">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-badge :count="100">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-badge :count="99" :overflow-count="10">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-badge :count="1000" :overflow-count="999">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<docs>
|
||||
---
|
||||
order: 9
|
||||
title:
|
||||
zh-CN: 缎带
|
||||
en-US: Ribbon
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
使用缎带型的徽标。
|
||||
|
||||
## en-US
|
||||
|
||||
Use ribbon badge.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-badge-ribbon text="Pushes open the window">
|
||||
<a-card>And raises the spyglass.</a-card>
|
||||
</a-badge-ribbon>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<docs>
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 状态点
|
||||
en-US: Status
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用于表示状态的小圆点。
|
||||
|
||||
## en-US
|
||||
|
||||
Standalone badge with status.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-badge status="success" />
|
||||
<a-badge status="error" />
|
||||
<a-badge status="default" />
|
||||
<a-badge status="processing" />
|
||||
<a-badge status="warning" />
|
||||
<br />
|
||||
<a-badge status="success" text="Success" />
|
||||
<br />
|
||||
<a-badge status="error" text="Error" />
|
||||
<br />
|
||||
<a-badge status="default" text="Default" />
|
||||
<br />
|
||||
<a-badge status="processing" text="Processing" />
|
||||
<br />
|
||||
<a-badge status="warning" text="warning" />
|
||||
</template>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<docs>
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 自定义标题
|
||||
en-US: Title
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
设置鼠标放在状态点上时显示的文字
|
||||
|
||||
## en-US
|
||||
|
||||
The badge will display `title` when hovered over, instead of `count`.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div id="components-badge-demo-title">
|
||||
<a-badge :count="5" title="Custom hover text">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
#components-badge-demo-title .ant-badge:not(.ant-badge-status) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.head-example {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 4px;
|
||||
background: #eee;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Badge
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
|
||||
---
|
||||
|
||||
Small numerical value or status descriptor for UI elements.
|
||||
|
||||
## When To Use
|
||||
|
||||
Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
|
||||
|
||||
## API
|
||||
|
||||
```html
|
||||
<a-badge :count="5">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
```
|
||||
|
||||
```html
|
||||
<a-badge :count="5" />
|
||||
```
|
||||
|
||||
### Badge
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | Customize Badge dot color | string | - | 1.5.0 |
|
||||
| count | Number to show in badge | number\|string \| slot | | |
|
||||
| dot | Whether to display a red dot instead of `count` | boolean | `false` | |
|
||||
| offset | set offset of the badge dot, like [x, y] | [number\|string, number\|string] | - | |
|
||||
| overflowCount | Max count to show | number | 99 | |
|
||||
| showZero | Whether to show badge when `count` is zero | boolean | `false` | |
|
||||
| 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` | string | `''` | |
|
||||
| numberStyle | sets the display style of the status `dot` | object | '' | |
|
||||
| title | Text to show when hovering over the badge | string | `count` | |
|
||||
|
||||
### Badge.Ribbon (2.0.1+)
|
||||
|
||||
| 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 | string \| VNode \| slot | - | |
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
category: Components
|
||||
type: 数据展示
|
||||
title: Badge
|
||||
subtitle: 徽标数
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
|
||||
---
|
||||
|
||||
图标右上角的圆形徽标数字。
|
||||
|
||||
## 何时使用
|
||||
|
||||
一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
|
||||
|
||||
## API
|
||||
|
||||
```html
|
||||
<a-badge :count="5">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
```
|
||||
|
||||
```html
|
||||
<a-badge :count="5" />
|
||||
```
|
||||
|
||||
### Badge
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | 自定义小圆点的颜色 | string | - | 1.5.0 |
|
||||
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number \| string \| slot | | |
|
||||
| dot | 不展示数字，只有一个小红点 | boolean | false | |
|
||||
| offset | 设置状态点的位置偏移，格式为 [x, y] | [number\|string, number\|string] | - | |
|
||||
| overflowCount | 展示封顶的数字值 | number | 99 | |
|
||||
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | |
|
||||
| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' | |
|
||||
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' | |
|
||||
| numberStyle | 设置状态点的样式 | object | '' | |
|
||||
| title | 设置鼠标放在状态点上时显示的文字 | string | `count` | |
|
||||
|
||||
### Badge.Ribbon (2.0.1+)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | 自定义缎带的颜色 | string | - | |
|
||||
| placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end` | |
|
||||
| text | 缎带中填入的内容 | string \| VNode \| slot | - | |
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic Usage
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest use.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item>Home</a-breadcrumb-item>
|
||||
<a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
|
||||
<a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
|
||||
<a-breadcrumb-item>An Application</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<demo-sort>
|
||||
<basic />
|
||||
<overlay />
|
||||
<router />
|
||||
<separator />
|
||||
<separator-indepent />
|
||||
<with-icon />
|
||||
</demo-sort>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import US from './../index.en-US.md';
|
||||
import CN from './../index.zh-CN.md';
|
||||
import Basic from './basic.vue';
|
||||
import Overlay from './overlay.vue';
|
||||
import Router from './router.vue';
|
||||
import Separator from './separator.vue';
|
||||
import SeparatorIndepent from './separator-indepent.vue';
|
||||
import WithIcon from './withIcon.vue';
|
||||
|
||||
export default defineComponent({
|
||||
CN,
|
||||
US,
|
||||
components: {
|
||||
Basic,
|
||||
Overlay,
|
||||
Router,
|
||||
Separator,
|
||||
SeparatorIndepent,
|
||||
WithIcon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<docs>
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 带下拉菜单的面包屑
|
||||
en-US: Bread crumbs with drop down menu
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
面包屑支持下拉菜单。
|
||||
|
||||
## en-US
|
||||
|
||||
Breadcrumbs support drop down menu.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item>Ant Design Vue</a-breadcrumb-item>
|
||||
<a-breadcrumb-item><a href="">Component</a></a-breadcrumb-item>
|
||||
<a-breadcrumb-item>
|
||||
<a href="">General</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">General</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">Layout</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">Navigation</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>Button</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<docs>
|
||||
---
|
||||
order: 3
|
||||
iframe: 200
|
||||
reactRouter: react-router-dom
|
||||
title:
|
||||
zh-CN: 其它路由
|
||||
en-US: Other Router Integration
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
和 `vue-router` 进行结合使用。
|
||||
|
||||
## en-US
|
||||
Used together with `vue-router`
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-breadcrumb :routes="routes">
|
||||
<template #itemRender="{ route, routes, paths }">
|
||||
<span v-if="routes.indexOf(route) === routes.length - 1">
|
||||
{{ route.breadcrumbName }}
|
||||
</span>
|
||||
<router-link v-else :to="`${basePath}/${paths.join('/')}`">
|
||||
{{ route.breadcrumbName }}
|
||||
</router-link>
|
||||
</template>
|
||||
</a-breadcrumb>
|
||||
<br />
|
||||
{{ $route.path }}
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
interface Route {
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
children?: Array<{
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
}>;
|
||||
}
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const routes = ref<Route[]>([
|
||||
{
|
||||
path: 'index',
|
||||
breadcrumbName: 'home',
|
||||
},
|
||||
{
|
||||
path: 'first',
|
||||
breadcrumbName: 'first',
|
||||
children: [
|
||||
{
|
||||
path: '/general',
|
||||
breadcrumbName: 'General',
|
||||
},
|
||||
{
|
||||
path: '/layout',
|
||||
breadcrumbName: 'Layout',
|
||||
},
|
||||
{
|
||||
path: '/navigation',
|
||||
breadcrumbName: 'Navigation',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'second',
|
||||
breadcrumbName: 'second',
|
||||
},
|
||||
]);
|
||||
return {
|
||||
basePath: '/components/breadcrumb',
|
||||
routes,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<docs>
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 分隔符
|
||||
en-US: Configuring the Separator
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `Breadcrumb.Separator` 可以自定义分隔符。
|
||||
|
||||
## en-US
|
||||
|
||||
The separator can be customized by setting the separator property: `Breadcrumb.Separator`.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-breadcrumb separator="">
|
||||
<a-breadcrumb-item>Location</a-breadcrumb-item>
|
||||
<a-breadcrumb-separator>:</a-breadcrumb-separator>
|
||||
<a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
|
||||
<a-breadcrumb-separator />
|
||||
<a-breadcrumb-item href="">Application List</a-breadcrumb-item>
|
||||
<a-breadcrumb-separator />
|
||||
<a-breadcrumb-item>An Application</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<docs>
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 分隔符
|
||||
en-US: Configuring the Separator
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用` separator=">" `可以自定义分隔符，或者使用slot="separator"自定义更复杂的分隔符
|
||||
|
||||
## en-US
|
||||
|
||||
The separator can be customized by setting the separator preperty: separator=">" or use
|
||||
slot="separator"
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-breadcrumb separator=">">
|
||||
<a-breadcrumb-item>Home</a-breadcrumb-item>
|
||||
<a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
|
||||
<a-breadcrumb-item href="">Application List</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>An Application</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<a-breadcrumb>
|
||||
<template #separator><span style="color: red">></span></template>
|
||||
<a-breadcrumb-item>Home</a-breadcrumb-item>
|
||||
<a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
|
||||
<a-breadcrumb-item href="">Application List</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>An Application</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<docs>
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 带有图标的
|
||||
en-US: With an Icon
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
图标放在文字前面。
|
||||
|
||||
## en-US
|
||||
|
||||
The icon should be placed in front of the text.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item href="">
|
||||
<home-outlined />
|
||||
</a-breadcrumb-item>
|
||||
<a-breadcrumb-item href="">
|
||||
<user-outlined />
|
||||
<span>Application List</span>
|
||||
</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>Application</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { HomeOutlined, UserOutlined } from '@ant-design/icons-vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
HomeOutlined,
|
||||
UserOutlined,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
title: Breadcrumb
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
|
||||
---
|
||||
|
||||
A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When the system has more than two layers in a hierarchy.
|
||||
- When you need to inform the user of where they are.
|
||||
- When the user may need to navigate back to a higher level.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Optional | Default | Version |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| itemRender | Custom item renderer, #itemRender="{route, params, routes, paths}" | ({route, params, routes, paths}) => vNode | | - | |
|
||||
| params | Routing parameters | object | | - | |
|
||||
| routes | The routing stack information of router | [routes\[\]](#routes) | | - | |
|
||||
| separator | Custom separator | string\|slot | | `/` | |
|
||||
|
||||
### Breadcrumb.Item
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| href | Target of hyperlink | string | - | |
|
||||
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
|
||||
|
||||
#### Events
|
||||
|
||||
| Events Name | Description | Arguments | Version |
|
||||
| -------- | -------- | -------------------- | ---- |
|
||||
| click | handler to handle click event | (e:MouseEvent)=>void | - | 1.5.0 |
|
||||
|
||||
### Breadcrumb.Separator `1.5.0`
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------- | ---------------- | --------- | ------- | ------- |
|
||||
| - | - | - | - | - |
|
||||
|
||||
> When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.
|
||||
|
||||
### routes
|
||||
|
||||
```ts
|
||||
interface Route {
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
children?: Array<{
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
}>;
|
||||
}
|
||||
```
|
||||
|
||||
### Use with browserHistory
|
||||
|
||||
The link of Breadcrumb item targets `#` by default, you can use `itemRender` to make a `browserHistory` Link.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-breadcrumb :routes="routes">
|
||||
<template #itemRender="{ route, params, routes, paths }">
|
||||
<span v-if="routes.indexOf(route) === routes.length - 1">
|
||||
{{route.breadcrumbName}}
|
||||
</span>
|
||||
<router-link v-else :to="paths.join('/')">
|
||||
{{route.breadcrumbName}}
|
||||
</router-link>
|
||||
</template>
|
||||
</a-breadcrumb>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
interface Route {
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
children?: Array<{
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
}>;
|
||||
}
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
const routes = ref<Route[]>([
|
||||
{
|
||||
path: 'index',
|
||||
breadcrumbName: 'home',
|
||||
},
|
||||
{
|
||||
path: 'first',
|
||||
breadcrumbName: 'first',
|
||||
children: [
|
||||
{
|
||||
path: '/general',
|
||||
breadcrumbName: 'General',
|
||||
},
|
||||
{
|
||||
path: '/layout',
|
||||
breadcrumbName: 'Layout',
|
||||
},
|
||||
{
|
||||
path: '/navigation',
|
||||
breadcrumbName: 'Navigation',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'second',
|
||||
breadcrumbName: 'second',
|
||||
},
|
||||
]);
|
||||
return {
|
||||
routes,
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
---
|
||||
category: Components
|
||||
subtitle: 面包屑
|
||||
type: 导航
|
||||
title: Breadcrumb
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
|
||||
---
|
||||
|
||||
显示当前页面在系统层级结构中的位置，并能向上返回。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当系统拥有超过两级以上的层级结构时；
|
||||
- 当需要告知用户『你在哪里』时；
|
||||
- 当需要向上导航的功能时。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| itemRender | 自定义链接函数，和 vue-router 配置使用， 也可使用 #itemRender="props" | ({route, params, routes, paths}) => vNode | | - |
|
||||
| params | 路由的参数 | object | | - |
|
||||
| routes | router 的路由栈信息 | [routes\[\]](#routes) | | - |
|
||||
| separator | 分隔符自定义 | string\|slot | | '/' |
|
||||
|
||||
### Breadcrumb.Item
|
||||
|
||||
| 参数 | 参数 | 类型 | 默认值 | 版本 |
|
||||
| ------- | -------------- | -------------------------------------- | ------ | ----- |
|
||||
| href | 链接的目的地 | string | - | 1.5.0 |
|
||||
| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - | 1.5.0 |
|
||||
|
||||
#### 事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 | 版本 |
|
||||
| -------- | -------- | -------------------- | ---- |
|
||||
| click | 单击事件 | (e:MouseEvent)=>void | - | 1.5.0 |
|
||||
|
||||
### Breadcrumb.Separator `1.5.0`
|
||||
|
||||
| 参数 | 类型 | 默认值 | 版本 |
|
||||
| ---- | ---- | ------ | ---- |
|
||||
| - | - | - | - |
|
||||
|
||||
> 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。
|
||||
|
||||
### routes
|
||||
|
||||
```ts
|
||||
interface Route {
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
children?: Array<{
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
}>;
|
||||
}
|
||||
```
|
||||
|
||||
### 和 browserHistory 配合
|
||||
|
||||
和 vue-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-breadcrumb :routes="routes">
|
||||
<template #itemRender="{ route, params, routes, paths }">
|
||||
<span v-if="routes.indexOf(route) === routes.length - 1">
|
||||
{{route.breadcrumbName}}
|
||||
</span>
|
||||
<router-link v-else :to="paths.join('/')">
|
||||
{{route.breadcrumbName}}
|
||||
</router-link>
|
||||
</template>
|
||||
</a-breadcrumb>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
interface Route {
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
children?: Array<{
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
}>;
|
||||
}
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
const routes = ref<Route[]>([
|
||||
{
|
||||
path: 'index',
|
||||
breadcrumbName: 'home',
|
||||
},
|
||||
{
|
||||
path: 'first',
|
||||
breadcrumbName: 'first',
|
||||
children: [
|
||||
{
|
||||
path: '/general',
|
||||
breadcrumbName: 'General',
|
||||
},
|
||||
{
|
||||
path: '/layout',
|
||||
breadcrumbName: 'Layout',
|
||||
},
|
||||
{
|
||||
path: '/navigation',
|
||||
breadcrumbName: 'Navigation',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'second',
|
||||
breadcrumbName: 'second',
|
||||
},
|
||||
]);
|
||||
return {
|
||||
routes,
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 按钮类型
|
||||
en-US: Type
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
|
||||
|
||||
## en-US
|
||||
|
||||
There are `primary` button, `default` button, `dashed` button, `text` button and `link` button in antd.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-button type="primary">Primary Button</a-button>
|
||||
<a-button>Default Button</a-button>
|
||||
<a-button type="dashed">Dashed Button</a-button>
|
||||
<a-button type="text">Text Button</a-button>
|
||||
<a-button type="link">Link Button</a-button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<docs>
|
||||
---
|
||||
order: 10
|
||||
title:
|
||||
zh-CN: Block 按钮
|
||||
en-US: Block Button
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
`block` 属性将使按钮适合其父宽度。
|
||||
|
||||
## en-US
|
||||
|
||||
`block` property will make the button fit to its parent width.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-button type="primary" block>Primary</a-button>
|
||||
<a-button block>Default</a-button>
|
||||
<a-button type="dashed" block>Dashed</a-button>
|
||||
<a-button danger block>Danger</a-button>
|
||||
<a-button type="link" block>Link</a-button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<docs>
|
||||
---
|
||||
order: 99
|
||||
title:
|
||||
zh-CN: 废弃的 Block 组
|
||||
en-US: Deprecated Button Group
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
Debug usage
|
||||
|
||||
## en-US
|
||||
|
||||
Debug usage
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div id="components-button-demo-button-group">
|
||||
<h4>Basic</h4>
|
||||
<a-button-group>
|
||||
<a-button>Cancel</a-button>
|
||||
<a-button type="primary">OK</a-button>
|
||||
</a-button-group>
|
||||
<a-button-group>
|
||||
<a-button disabled>L</a-button>
|
||||
<a-button disabled>M</a-button>
|
||||
<a-button disabled>R</a-button>
|
||||
</a-button-group>
|
||||
<a-button-group>
|
||||
<a-button type="primary">L</a-button>
|
||||
<a-button>M</a-button>
|
||||
<a-button>M</a-button>
|
||||
<a-button type="dashed">R</a-button>
|
||||
</a-button-group>
|
||||
|
||||
<h4>With Icon</h4>
|
||||
<a-button-group>
|
||||
<a-button type="primary">
|
||||
<LeftOutlined />
|
||||
Go back
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
Go forward
|
||||
<RightOutlined />
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
<a-button-group>
|
||||
<a-button type="primary">
|
||||
<template #icon><CloudOutlined /></template>
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
<template #icon><CloudDownloadOutlined /></template>
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
CloudDownloadOutlined,
|
||||
CloudOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
export default {
|
||||
components: {
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
CloudDownloadOutlined,
|
||||
CloudOutlined,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
#components-button-demo-button-group > h4 {
|
||||
margin: 16px 0;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
}
|
||||
#components-button-demo-button-group > h4:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
#components-button-demo-button-group .ant-btn-group {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<docs>
|
||||
---
|
||||
order: 9
|
||||
title:
|
||||
zh-CN: 危险按钮
|
||||
en-US: Danger Button
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
在 2.2.0 之后，危险成为一种按钮属性而不是按钮类型。
|
||||
|
||||
## en-US
|
||||
|
||||
danger is a property of button after antd 2.2.0.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-button type="primary" danger>Primary</a-button>
|
||||
<a-button danger>Default</a-button>
|
||||
<a-button type="dashed" danger>Dashed</a-button>
|
||||
<a-button type="text" danger>Text</a-button>
|
||||
<a-button type="link" danger>Link</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<docs>
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 不可用状态
|
||||
en-US: Disabled
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
|
||||
|
||||
## en-US
|
||||
|
||||
To mark a button as disabled, add the `disabled` property to the `Button`.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-button type="primary">Primary</a-button>
|
||||
<a-button type="primary" disabled>Primary(disabled)</a-button>
|
||||
<br />
|
||||
<a-button>Default</a-button>
|
||||
<a-button disabled>Default(disabled)</a-button>
|
||||
<br />
|
||||
<a-button type="dashed">Dashed</a-button>
|
||||
<a-button type="dashed" disabled>Dashed(disabled)</a-button>
|
||||
<br />
|
||||
<a-button type="text">Text</a-button>
|
||||
<a-button type="text" disabled>Text(disabled)</a-button>
|
||||
<br />
|
||||
<a-button type="link">Link</a-button>
|
||||
<a-button type="link" disabled>Link(disabled)</a-button>
|
||||
<br />
|
||||
<a-button danger>Danger Default</a-button>
|
||||
<a-button danger disabled>Danger Default(disabled)</a-button>
|
||||
<br />
|
||||
<a-button type="text" danger>Danger Text</a-button>
|
||||
<a-button type="text" danger disabled>Danger Text(disabled)</a-button>
|
||||
<br />
|
||||
<a-button type="link" danger>Danger Link</a-button>
|
||||
<a-button type="link" danger disabled>Danger Link(disabled)</a-button>
|
||||
<br />
|
||||
|
||||
<div :style="{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }">
|
||||
<a-button ghost>Ghost</a-button>
|
||||
<a-button ghost disabled>Ghost(disabled)</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<docs>
|
||||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 幽灵按钮
|
||||
en-US: Ghost Button
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。
|
||||
|
||||
## en-US
|
||||
|
||||
`ghost` property will make button's background transparent, it is commonly used in colored background.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
|
||||
<a-button type="primary" ghost>Primary</a-button>
|
||||
<a-button ghost>Default</a-button>
|
||||
<a-button type="dashed" ghost>Dashed</a-button>
|
||||
<a-button danger ghost>Danger</a-button>
|
||||
<a-button type="link" ghost>Link</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<docs>
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 图标按钮
|
||||
en-US: Icon
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
当需要在 `Button` 内嵌入 `Icon` 时，可以设置 `icon` 属性，或者直接在 `Button` 内使用 `Icon` 组件。
|
||||
|
||||
如果想控制 `Icon` 具体的位置，只能直接使用 `Icon` 组件，而非 `icon` 属性。
|
||||
|
||||
## en-US
|
||||
|
||||
`Button` components can contain an `Icon`. This is done by setting the `icon` property or placing an `Icon` component within the `Button`.
|
||||
|
||||
If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-button type="primary" shape="circle">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
</a-button>
|
||||
<a-button type="primary" shape="circle">A</a-button>
|
||||
<a-button type="primary">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
Search
|
||||
</a-button>
|
||||
<a-button shape="circle">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
</a-button>
|
||||
<a-button>
|
||||
<template #icon><SearchOutlined /></template>
|
||||
Search
|
||||
</a-button>
|
||||
<a-button shape="circle">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
</a-button>
|
||||
<a-button>
|
||||
<template #icon><SearchOutlined /></template>
|
||||
Search
|
||||
</a-button>
|
||||
<a-button type="dashed" shape="circle">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
</a-button>
|
||||
<a-button type="dashed">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
Search
|
||||
</a-button>
|
||||
</template>
|
||||
<script>
|
||||
import { SearchOutlined } from '@ant-design/icons-vue';
|
||||
export default {
|
||||
components: {
|
||||
SearchOutlined,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<demo-sort>
|
||||
<basic />
|
||||
<disabled />
|
||||
<ghost />
|
||||
<icon />
|
||||
<loading />
|
||||
<multiple />
|
||||
<size />
|
||||
<block />
|
||||
<danger />
|
||||
</demo-sort>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Basic from './basic.vue';
|
||||
import Disabled from './disabled.vue';
|
||||
import Ghost from './ghost.vue';
|
||||
import Icon from './icon.vue';
|
||||
import Loading from './loading.vue';
|
||||
import Multiple from './multiple.vue';
|
||||
import Size from './size.vue';
|
||||
import Block from './block.vue';
|
||||
import Danger from './danger.vue';
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
CN,
|
||||
US,
|
||||
components: {
|
||||
Basic,
|
||||
Disabled,
|
||||
Ghost,
|
||||
Icon,
|
||||
Loading,
|
||||
Multiple,
|
||||
Size,
|
||||
Block,
|
||||
Danger,
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
[id^='components-button-demo-'] .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[id^='components-button-demo-'] .ant-btn-rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
[id^='components-button-demo-'] .ant-btn-group > .ant-btn,
|
||||
[id^='components-button-demo-'] .ant-btn-group > span > .ant-btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
[data-theme='dark'] .site-button-ghost-wrapper {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<docs>
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 加载中状态
|
||||
en-US: Loading
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
|
||||
|
||||
## en-US
|
||||
|
||||
A loading indicator can be added to a button by setting the `loading` property on the `Button`.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-button type="primary" loading>Loading</a-button>
|
||||
<a-button type="primary" size="small" loading>Loading</a-button>
|
||||
<br />
|
||||
<a-button type="primary" :loading="loading" @mouseenter="loading = true">mouseenter me!</a-button>
|
||||
<a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
|
||||
延迟1s
|
||||
</a-button>
|
||||
<br />
|
||||
<a-button type="primary" loading />
|
||||
<a-button type="primary" shape="circle" loading />
|
||||
<a-button danger shape="round" loading />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
interface DelayLoading {
|
||||
delay: number;
|
||||
}
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const iconLoading = ref<boolean | DelayLoading>(false);
|
||||
const enterIconLoading = () => {
|
||||
iconLoading.value = { delay: 1000 };
|
||||
|
||||
setTimeout(() => {
|
||||
iconLoading.value = false;
|
||||
}, 6000);
|
||||
};
|
||||
return {
|
||||
loading: ref(false),
|
||||
iconLoading,
|
||||
enterIconLoading,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<docs>
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 多个按钮组合
|
||||
en-US: Multiple Buttons
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button) 中组合使用。
|
||||
|
||||
## en-US
|
||||
|
||||
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button).
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-button type="primary">Primary</a-button>
|
||||
<a-button>secondary</a-button>
|
||||
<a-dropdown>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleMenuClick">
|
||||
<a-menu-item key="1">1st item</a-menu-item>
|
||||
<a-menu-item key="2">2nd item</a-menu-item>
|
||||
<a-menu-item key="3">3rd item</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button>
|
||||
Actions
|
||||
<DownOutlined />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { DownOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
DownOutlined,
|
||||
},
|
||||
setup() {
|
||||
const handleMenuClick = (e: Event) => {
|
||||
console.log('click', e);
|
||||
};
|
||||
return {
|
||||
handleMenuClick,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<docs>
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 按钮尺寸
|
||||
en-US: Size
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
按钮有大、中、小三种尺寸。
|
||||
|
||||
通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
|
||||
|
||||
## en-US
|
||||
|
||||
Ant Design supports a default button size as well as a large and small size.
|
||||
|
||||
If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-radio-group v-model:value="size">
|
||||
<a-radio-button value="large">Large</a-radio-button>
|
||||
<a-radio-button value="default">Default</a-radio-button>
|
||||
<a-radio-button value="small">Small</a-radio-button>
|
||||
</a-radio-group>
|
||||
<br />
|
||||
<br />
|
||||
<a-button type="primary" :size="size">Primary</a-button>
|
||||
<a-button :size="size">Normal</a-button>
|
||||
<a-button type="dashed" :size="size">Dashed</a-button>
|
||||
<a-button danger :size="size">Danger</a-button>
|
||||
<a-button type="link" :size="size">Link</a-button>
|
||||
<br />
|
||||
<a-button type="primary" :size="size">
|
||||
<template #icon>
|
||||
<DownloadOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<a-button type="primary" shape="circle" :size="size">
|
||||
<template #icon>
|
||||
<DownloadOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<a-button type="primary" shape="round" :size="size">
|
||||
<template #icon>
|
||||
<DownloadOutlined />
|
||||
Download
|
||||
</template>
|
||||
</a-button>
|
||||
<a-button type="primary" shape="round" :size="size">
|
||||
<template #icon>
|
||||
<DownloadOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<a-button type="primary" :size="size">
|
||||
<template #icon>
|
||||
<DownloadOutlined />
|
||||
</template>
|
||||
Download
|
||||
</a-button>
|
||||
<br />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { DownloadOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
DownloadOutlined,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
size: ref('large'),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
category: Components
|
||||
type: General
|
||||
title: Button
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
|
||||
---
|
||||
|
||||
To trigger an operation.
|
||||
|
||||
## When To Use
|
||||
|
||||
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
|
||||
|
||||
In Ant Design Vue we provide 5 types of button.
|
||||
|
||||
- Primary button: indicate the main action, one primary button at most in one section.
|
||||
- Default button: indicate a series of actions without priority.
|
||||
- Dashed button: used for adding action commonly.
|
||||
- Text button: used for the most secondary action.
|
||||
- Link button: used for external links.
|
||||
|
||||
And 4 other properties additionally.
|
||||
|
||||
- `danger`: used for actions of risk, like deletion or authorization.
|
||||
- `ghost`: used in situations with complex background, home pages usually.
|
||||
- `disabled`: when actions are not available.
|
||||
- `loading`: add loading spinner in button, avoiding multiple submits too.
|
||||
|
||||
## 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` | 2.2.0 |
|
||||
| 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 of button, see: Icon component | v-slot | - | |
|
||||
| loading | set the loading status of button | boolean \| { delay: number } | `false` | |
|
||||
| shape | can be set button shape | `circle` \| `round` | - | |
|
||||
| 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 button type | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
|
||||
|
||||
### events
|
||||
|
||||
| Events Name | Description | Arguments | Version |
|
||||
| ----------- | --------------------------------------- | --------------- | ------- |
|
||||
| click | set the handler to handle `click` event | (event) => void | |
|
||||
|
||||
It accepts all props which native buttons support.
|
||||
|
||||
## FAQ
|
||||
|
||||
### How to remove space between 2 chinese characters
|
||||
|
||||
Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="Button with two Chinese characters" />
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
---
|
||||
category: Components
|
||||
type: 通用
|
||||
title: Button
|
||||
subtitle: 按钮
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
|
||||
---
|
||||
|
||||
按钮用于开始一个即时操作。
|
||||
|
||||
## 何时使用
|
||||
|
||||
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
|
||||
|
||||
在 Ant Design Vue 中我们提供了五种按钮。
|
||||
|
||||
- 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
|
||||
- 默认按钮：用于没有主次之分的一组行动点。
|
||||
- 虚线按钮：常用于添加操作。
|
||||
- 文本按钮：用于最次级的行动点。
|
||||
- 链接按钮：用于作为外链的行动点。
|
||||
|
||||
以及四种状态属性与上面配合使用。
|
||||
|
||||
- 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
|
||||
- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
|
||||
- 禁用：行动点不可用的时候，一般需要文案解释。
|
||||
- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
|
||||
|
||||
## API
|
||||
|
||||
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
||||
|
||||
按钮的属性说明如下：
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` | |
|
||||
| danger | 设置危险按钮 | boolean | `false` | 2.2.0 |
|
||||
| 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 | 设置按钮的图标类型 | v-slot | - | |
|
||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` | |
|
||||
| shape | 设置按钮形状 | `circle` \| `round` | - | |
|
||||
| size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` | |
|
||||
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
||||
| type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 | 版本 |
|
||||
| -------- | ---------------- | --------------- | ---- |
|
||||
| click | 点击按钮时的回调 | (event) => void | |
|
||||
|
||||
支持原生 button 的其他所有属性。
|
||||
|
||||
## FAQ
|
||||
|
||||
### 如何移除 2 个汉字之间的空格
|
||||
|
||||
根据 Ant Design 设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="移除两个汉字之间的空格" />
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
一个通用的日历面板，支持年/月切换。
|
||||
|
||||
## en-US
|
||||
|
||||
A basic calendar component with Year/Month switch.
|
||||
|
||||
</docs>
|
||||
<template>
|
||||
<a-calendar v-model:value="value" @panelChange="onPanelChange" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { Dayjs } from 'dayjs';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const value = ref<Dayjs>();
|
||||
const onPanelChange = (value: Dayjs, mode: string) => {
|
||||
console.log(value, mode);
|
||||
};
|
||||
|
||||
return {
|
||||
value,
|
||||
onPanelChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<docs>
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 卡片模式
|
||||
en-US: Card
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用于嵌套在空间有限的容器中。
|
||||
|
||||
## en-US
|
||||
|
||||
Nested inside a container element for rendering in limited space.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div :style="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
|
||||
<a-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { Dayjs } from 'dayjs';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const value = ref<Dayjs>();
|
||||
const onPanelChange = (value: Dayjs, mode: string) => {
|
||||
console.log(value, mode);
|
||||
};
|
||||
|
||||
return {
|
||||
value,
|
||||
onPanelChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<docs>
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 自定义头部
|
||||
en-US: Customize Header
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
自定义日历头部内容。
|
||||
|
||||
## en-US
|
||||
|
||||
Customize Calendar header content.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div style="width: 300px; border: 1px solid #d9d9d9; border-radius: 4px">
|
||||
<a-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange">
|
||||
<template #headerRender="{ value: current, type, onChange, onTypeChange }">
|
||||
<div style="padding: 10px">
|
||||
<div style="margin-bottom: 10px">Custom header</div>
|
||||
<a-row type="flex" justify="space-between">
|
||||
<a-col>
|
||||
<a-radio-group size="small" :value="type" @change="e => onTypeChange(e.target.value)">
|
||||
<a-radio-button value="month">Month</a-radio-button>
|
||||
<a-radio-button value="year">Year</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<a-select
|
||||
size="small"
|
||||
:dropdown-match-select-width="false"
|
||||
class="my-year-select"
|
||||
:value="String(current.year())"
|
||||
@change="
|
||||
newYear => {
|
||||
onChange(current.year(newYear));
|
||||
}
|
||||
"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="val in getYears(current)"
|
||||
:key="String(val)"
|
||||
class="year-item"
|
||||
>
|
||||
{{ val }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<a-select
|
||||
size="small"
|
||||
:dropdown-match-select-width="false"
|
||||
:value="String(current.month())"
|
||||
@change="
|
||||
selectedMonth => {
|
||||
onChange(current.month(parseInt(selectedMonth, 10)));
|
||||
}
|
||||
"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(val, index) in getMonths(current)"
|
||||
:key="String(index)"
|
||||
class="month-item"
|
||||
>
|
||||
{{ val }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</a-calendar>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { Dayjs } from 'dayjs';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const value = ref<Dayjs>();
|
||||
|
||||
const onPanelChange = (value: Dayjs, mode: string) => {
|
||||
console.log(value, mode);
|
||||
};
|
||||
|
||||
const getMonths = (value: Dayjs) => {
|
||||
const localeData = value.localeData();
|
||||
const months = [];
|
||||
for (let i = 0; i < 12; i++) {
|
||||
months.push(localeData.monthsShort(value.month(i)));
|
||||
}
|
||||
return months;
|
||||
};
|
||||
|
||||
const getYears = (value: Dayjs) => {
|
||||
const year = value.year();
|
||||
const years = [];
|
||||
for (let i = year - 10; i < year + 10; i += 1) {
|
||||
years.push(i);
|
||||
}
|
||||
return years;
|
||||
};
|
||||
|
||||
return {
|
||||
value,
|
||||
onPanelChange,
|
||||
getMonths,
|
||||
getYears,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<demo-sort :cols="1">
|
||||
<Basic />
|
||||
<Card />
|
||||
<NoticeCalendar />
|
||||
<Select />
|
||||
<CustomizeHeader />
|
||||
</demo-sort>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Basic from './basic.vue';
|
||||
import Card from './card.vue';
|
||||
import NoticeCalendar from './notice-calendar.vue';
|
||||
import Select from './select.vue';
|
||||
import CustomizeHeader from './customize-header.vue';
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
CN,
|
||||
US,
|
||||
components: {
|
||||
Basic,
|
||||
Card,
|
||||
NoticeCalendar,
|
||||
Select,
|
||||
CustomizeHeader,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<docs>
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 通知事项日历
|
||||
en-US: Notice Calendar
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
一个复杂的应用示例，用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
|
||||
|
||||
## en-US
|
||||
|
||||
This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-calendar v-model:value="value">
|
||||
<template #dateCellRender="{ current }">
|
||||
<ul class="events">
|
||||
<li v-for="item in getListData(current)" :key="item.content">
|
||||
<a-badge :status="item.type" :text="item.content" />
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #monthCellRender="{ current }">
|
||||
<div v-if="getMonthData(current)" class="notes-month">
|
||||
<section>{{ getMonthData(current) }}</section>
|
||||
<span>Backlog number</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-calendar>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { Dayjs } from 'dayjs';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const value = ref<Dayjs>();
|
||||
|
||||
const getListData = (value: Dayjs) => {
|
||||
let listData;
|
||||
switch (value.date()) {
|
||||
case 8:
|
||||
listData = [
|
||||
{ type: 'warning', content: 'This is warning event.' },
|
||||
{ type: 'success', content: 'This is usual event.' },
|
||||
];
|
||||
break;
|
||||
case 10:
|
||||
listData = [
|
||||
{ type: 'warning', content: 'This is warning event.' },
|
||||
{ type: 'success', content: 'This is usual event.' },
|
||||
{ type: 'error', content: 'This is error event.' },
|
||||
];
|
||||
break;
|
||||
case 15:
|
||||
listData = [
|
||||
{ type: 'warning', content: 'This is warning event' },
|
||||
{ type: 'success', content: 'This is very long usual event。。....' },
|
||||
{ type: 'error', content: 'This is error event 1.' },
|
||||
{ type: 'error', content: 'This is error event 2.' },
|
||||
{ type: 'error', content: 'This is error event 3.' },
|
||||
{ type: 'error', content: 'This is error event 4.' },
|
||||
];
|
||||
break;
|
||||
default:
|
||||
}
|
||||
return listData || [];
|
||||
};
|
||||
|
||||
const getMonthData = (value: Dayjs) => {
|
||||
if (value.month() === 8) {
|
||||
return 1394;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
value,
|
||||
getListData,
|
||||
getMonthData,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.events {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.events .ant-badge-status {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
}
|
||||
.notes-month {
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
.notes-month section {
|
||||
font-size: 28px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<docs>
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 选择功能
|
||||
en-US: Selectable Calendar
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
一个通用的日历面板，支持年/月切换。
|
||||
|
||||
## en-US
|
||||
|
||||
A basic calendar component with Year/Month switch.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-alert :message="`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`" />
|
||||
<a-calendar :value="date" @select="onSelect" @panelChange="onPanelChange" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const date = ref(dayjs('2017-01-25'));
|
||||
const selectedValue = ref(dayjs('2017-01-25'));
|
||||
|
||||
const onSelect = (value: Dayjs) => {
|
||||
date.value = value;
|
||||
selectedValue.value = value;
|
||||
};
|
||||
const onPanelChange = (value: Dayjs) => {
|
||||
date.value = value;
|
||||
};
|
||||
return {
|
||||
date,
|
||||
selectedValue,
|
||||
onSelect,
|
||||
onPanelChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Calendar
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
|
||||
---
|
||||
|
||||
Container for displaying data in calendar form.
|
||||
|
||||
## When To Use
|
||||
|
||||
When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.
|
||||
|
||||
## API
|
||||
|
||||
**Note:** Part of the Calendar's locale is read from `value`. So, please set the locale of `dayjs` correctly.
|
||||
|
||||
```html
|
||||
// The default locale is en-US, if you want to use other locale, just set locale in entry file
|
||||
globally.
|
||||
// import dayjs from 'dayjs';
|
||||
// import 'dayjs/locale/zh-cn';
|
||||
// dayjs.locale('zh-cn');
|
||||
|
||||
<a-calendar v-model:value @panelChange="onPanelChange" @select="onSelect"></a-calendar>
|
||||
```
|
||||
|
||||
customize the progress dot by setting a scoped slot
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| dateCellRender | Customize the display of the date cell by setting a scoped slot, the returned content will be appended to the cell | v-slot:dateCellRender="{current: dayjs}" | - | |
|
||||
| dateFullCellRender | Customize the display of the date cell by setting a scoped slot, the returned content will override the cell | v-slot:dateFullCellRender="{current: dayjs}" | - | |
|
||||
| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: dayjs) => boolean | - |
|
||||
| fullscreen | Whether to display in full-screen | boolean | `true` | |
|
||||
| locale | The calendar's locale | object | [default](https://github.com/vueComponent/ant-design-vue/blob/next/components/date-picker/locale/example.json) | |
|
||||
| mode | The display mode of the calendar | `month` \| `year` | `month` | |
|
||||
| monthCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will be appended to the cell | v-slot:monthCellRender="{current: dayjs}" | - | |
|
||||
| monthFullCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will override the cell | v-slot:monthFullCellRender="{current: dayjs}" | - | |
|
||||
| validRange | to set valid range | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |
|
||||
| value(v-model) | The current selected date | [dayjs](https://day.js.org/) | current date | |
|
||||
| headerRender | render custom header in panel | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - | 1.5.0 |
|
||||
| valueFormat | optional, format of binding value. If not specified, the binding value will be a Date object | string，[date formats](https://day.js.org/docs/en/display/format) | - | |
|
||||
|
||||
### events
|
||||
|
||||
| Events Name | Description | Arguments | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| panelChange | Callback for when panel changes | function(date: dayjs \| string, mode: string) | - | |
|
||||
| select | Callback for when a date is selected | function(date: dayjs \| string） | - | |
|
||||
| change | Callback for when value change | function(date: dayjs \| string） | - | |
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
---
|
||||
category: Components
|
||||
type: 数据展示
|
||||
title: Calendar
|
||||
subtitle: 日历
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
|
||||
---
|
||||
|
||||
按照日历形式展示数据的容器。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
|
||||
|
||||
## API
|
||||
|
||||
**注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 dayjs 的 locale。
|
||||
|
||||
```html
|
||||
// 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale
|
||||
// import dayjs from 'dayjs';
|
||||
// import 'dayjs/locale/zh-cn';
|
||||
// dayjs.locale('zh-cn');
|
||||
|
||||
<a-calendar v-model:value="value" @panelChange="onPanelChange" @select="onSelect"></a-calendar>
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| dateCellRender | 作用域插槽，用来自定义渲染日期单元格，返回内容会被追加到单元格, | v-slot:dateCellRender="{current: dayjs}" | 无 | |
|
||||
| dateFullCellRender | 作用域插槽，自定义渲染日期单元格，返回内容覆盖单元格 | v-slot:dateFullCellRender="{current: dayjs}" | 无 | |
|
||||
| disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | 无 | |
|
||||
| fullscreen | 是否全屏显示 | boolean | true | |
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design-vue/blob/next/components/date-picker/locale/example.json) | |
|
||||
| mode | 初始模式，`month/year` | string | month | |
|
||||
| monthCellRender | 作用域插槽，自定义渲染月单元格，返回内容会被追加到单元格 | v-slot:monthCellRender="{current: dayjs}" | 无 | |
|
||||
| monthFullCellRender | 作用域插槽，自定义渲染月单元格，返回内容覆盖单元格 | v-slot:monthFullCellRender="{current: dayjs}" | 无 | |
|
||||
| validRange | 设置可以显示的日期 | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | 无 | |
|
||||
| value(v-model) | 展示日期 | [dayjs](https://day.js.org/) | 当前日期 | |
|
||||
| headerRender | 自定义头部内容 | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - | |
|
||||
| valueFormat | 可选，绑定值的格式，对 value、defaultValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - | |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| --- | --- | --- | --- |
|
||||
| panelChange | 日期面板变化回调 | function(date: dayjs \| string, mode: string) | 无 |
|
||||
| select | 点击选择日期回调 | function(date: dayjs \| string） | 无 |
|
||||
| change | 日期变化时的回调, 面板变化有可能导致日期变化 | function(date: dayjs \| string） | 无 |
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 典型卡片
|
||||
en-US: Basic card
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
包含标题、内容、操作区域。
|
||||
可通过设置size为`default`或者`small`，控制尺寸
|
||||
|
||||
## en-US
|
||||
|
||||
A basic card containing a title, content and an extra corner content.
|
||||
Supports two sizes: `default` and `small`.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-card title="Default size card" style="width: 300px">
|
||||
<template #extra><a href="#">more</a></template>
|
||||
<p>card content</p>
|
||||
<p>card content</p>
|
||||
<p>card content</p>
|
||||
</a-card>
|
||||
<br />
|
||||
<a-card size="small" title="Small size card" style="width: 300px">
|
||||
<template #extra><a href="#">more</a></template>
|
||||
<p>card content</p>
|
||||
<p>card content</p>
|
||||
<p>card content</p>
|
||||
</a-card>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<docs>
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 无边框
|
||||
en-US: No border
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
在灰色背景上使用无边框的卡片
|
||||
|
||||
## en-US
|
||||
|
||||
A borderless card on a gray background.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div style="background: #ececec; padding: 30px">
|
||||
<a-card title="Card title" :bordered="false" style="width: 300px">
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<docs>
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 更灵活的内容展示
|
||||
en-US: Customized content
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以利用 `Card.Meta` 支持更灵活的内容
|
||||
|
||||
## en-US
|
||||
|
||||
You can use `Card.Meta` to support more flexible content.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-card hoverable style="width: 240px">
|
||||
<template #cover>
|
||||
<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
|
||||
</template>
|
||||
<a-card-meta title="Europe Street beat">
|
||||
<template #description>www.instagram.com</template>
|
||||
</a-card-meta>
|
||||
</a-card>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<docs>
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 网格型内嵌卡片
|
||||
en-US: Grid card
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
一种常见的卡片内容区隔模式。
|
||||
|
||||
## en-US
|
||||
|
||||
Grid style card content.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-card title="Card Title">
|
||||
<a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
|
||||
<a-card-grid style="width: 25%; text-align: center" :hoverable="false">Content</a-card-grid>
|
||||
<a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
|
||||
<a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
|
||||
<a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
|
||||
<a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
|
||||
<a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
|
||||
<a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
|
||||
</a-card>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<docs>
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 栅格卡片
|
||||
en-US: Card in column
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
在系统概览页面常常和栅格进行配合。
|
||||
|
||||
## en-US
|
||||
|
||||
Cards usually cooperate with grid column layout in overview page.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div style="background-color: #ececec; padding: 20px">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-card title="Card title" :bordered="false">
|
||||
<p>card content</p>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-card title="Card title" :bordered="false">
|
||||
<p>card content</p>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-card title="Card title" :bordered="false">
|
||||
<p>card content</p>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<demo-sort>
|
||||
<Basic />
|
||||
<BorderLess />
|
||||
<FlexibleContent />
|
||||
<GridCard />
|
||||
<InColumn />
|
||||
<Inner />
|
||||
<Loading />
|
||||
<Meta />
|
||||
<Simple />
|
||||
<Tabs />
|
||||
</demo-sort>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Basic from './basic.vue';
|
||||
import BorderLess from './border-less.vue';
|
||||
import FlexibleContent from './flexible-content.vue';
|
||||
import GridCard from './grid-card.vue';
|
||||
import InColumn from './in-column.vue';
|
||||
import Inner from './inner.vue';
|
||||
import Loading from './loading.vue';
|
||||
import Meta from './meta.vue';
|
||||
import Simple from './simple.vue';
|
||||
import Tabs from './tabs.vue';
|
||||
|
||||
import CN from './../index.zh-CN.md';
|
||||
import US from './../index.en-US.md';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
CN,
|
||||
US,
|
||||
components: {
|
||||
Basic,
|
||||
BorderLess,
|
||||
FlexibleContent,
|
||||
GridCard,
|
||||
InColumn,
|
||||
Inner,
|
||||
Loading,
|
||||
Meta,
|
||||
Simple,
|
||||
Tabs,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<docs>
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 内部卡片
|
||||
en-US: Inner card
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以放在普通卡片内部，展示多层级结构的信息
|
||||
|
||||
## en-US
|
||||
|
||||
It can be placed inside the ordinary card to display the information of the multilevel structure
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-card title="Card title">
|
||||
<p style="font-size: 14px; color: rgba(0, 0, 0, 0.85); margin-bottom: 16px; font-weight: 500">
|
||||
Group title
|
||||
</p>
|
||||
<a-card title="Inner card title">
|
||||
<template #extra>
|
||||
<a href="#">More</a>
|
||||
</template>
|
||||
Inner Card content
|
||||
</a-card>
|
||||
<a-card title="Inner card title" :style="{ marginTop: '16px' }">
|
||||
<template #extra>
|
||||
<a href="#">More</a>
|
||||
</template>
|
||||
Inner Card content
|
||||
</a-card>
|
||||
</a-card>
|
||||
</template>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue