20260720172840
This commit is contained in:
oneao committed
1 parent
cda7f16d3a
commit
94207c77ff
3117 files changed
+201407
-1236
No files matched your search
@@ -0,0 +1,32 @@
|
||||
# With Badge
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Usually used for reminders and notifications.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { UserOutlined } from '@antdv-next/icons'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space :size="24">
|
||||
<a-badge :count="1">
|
||||
<a-avatar shape="square">
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-badge>
|
||||
<a-badge dot>
|
||||
<a-avatar shape="square">
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-badge>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,72 @@
|
||||
# Basic
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Three sizes and two shapes are available.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { UserOutlined } from '@antdv-next/icons'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical" :size="16">
|
||||
<a-space wrap :size="16">
|
||||
<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>
|
||||
<a-avatar :size="14">
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-space>
|
||||
<a-space wrap :size="16">
|
||||
<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>
|
||||
<a-avatar shape="square" :size="14">
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,58 @@
|
||||
# Autoset Font Size
|
||||
|
||||
## Description (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. You can also use `gap` to set the unit distance between left and right sides.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const UserList = ['U', 'Lucy', 'Tom', 'Edward']
|
||||
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']
|
||||
const GapList = [4, 3, 2, 1]
|
||||
|
||||
const user = ref(UserList[0])
|
||||
const color = ref(ColorList[0])
|
||||
const gap = ref(GapList[0])
|
||||
|
||||
function changeUser() {
|
||||
const index = UserList.indexOf(user.value!)
|
||||
user.value = index < UserList.length - 1 ? UserList[index + 1] : UserList[0]
|
||||
color.value = index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]
|
||||
}
|
||||
|
||||
function changeGap() {
|
||||
const index = GapList.indexOf(gap.value!)
|
||||
gap.value = index < GapList.length - 1 ? GapList[index + 1] : GapList[0]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-avatar
|
||||
:style="{ backgroundColor: color, verticalAlign: 'middle' }"
|
||||
size="large"
|
||||
:gap="gap"
|
||||
>
|
||||
{{ user }}
|
||||
</a-avatar>
|
||||
<a-button
|
||||
size="small"
|
||||
style="margin: 0 16px; vertical-align: middle;"
|
||||
@click="changeUser"
|
||||
>
|
||||
ChangeUser
|
||||
</a-button>
|
||||
<a-button
|
||||
size="small"
|
||||
style="vertical-align: middle;"
|
||||
@click="changeGap"
|
||||
>
|
||||
changeGap
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
# Avatar.Group
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Avatar group display.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { AntDesignOutlined, UserOutlined } from '@antdv-next/icons'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-avatar-group>
|
||||
<a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
|
||||
<a href="https://ant.design">
|
||||
<a-avatar style="background-color: #f56a00;">
|
||||
K
|
||||
</a-avatar>
|
||||
</a>
|
||||
<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: #1677ff;">
|
||||
<template #icon>
|
||||
<AntDesignOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-avatar-group>
|
||||
<a-divider />
|
||||
<a-avatar-group
|
||||
:max="{
|
||||
count: 2,
|
||||
style: { color: '#f56a00', backgroundColor: '#fde3cf' },
|
||||
}"
|
||||
>
|
||||
<a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />
|
||||
<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: #1677ff;">
|
||||
<template #icon>
|
||||
<AntDesignOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-avatar-group>
|
||||
<a-divider />
|
||||
<a-avatar-group
|
||||
size="large"
|
||||
:max="{
|
||||
count: 2,
|
||||
style: { color: '#f56a00', backgroundColor: '#fde3cf' },
|
||||
}"
|
||||
>
|
||||
<a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=3" />
|
||||
<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: #1677ff;">
|
||||
<template #icon>
|
||||
<AntDesignOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-avatar-group>
|
||||
<a-divider />
|
||||
<a-avatar-group
|
||||
size="large"
|
||||
:max="{
|
||||
count: 2,
|
||||
style: { color: '#f56a00', backgroundColor: '#fde3cf', cursor: 'pointer' },
|
||||
popover: { trigger: 'click' },
|
||||
}"
|
||||
>
|
||||
<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: #1677ff;">
|
||||
<template #icon>
|
||||
<AntDesignOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-avatar-group>
|
||||
<a-divider />
|
||||
<a-avatar-group shape="square">
|
||||
<a-avatar style="background-color: #fde3cf;">
|
||||
A
|
||||
</a-avatar>
|
||||
<a-avatar style="background-color: #f56a00;">
|
||||
K
|
||||
</a-avatar>
|
||||
<a-avatar style="background-color: #87d068;">
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<a-avatar style="background-color: #1677ff;">
|
||||
<template #icon>
|
||||
<AntDesignOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-avatar-group>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
# Responsive Size
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Avatar size can be automatically adjusted based on the screen size.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { AntDesignOutlined } from '@antdv-next/icons'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-avatar
|
||||
:size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }"
|
||||
>
|
||||
<template #icon>
|
||||
<AntDesignOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,43 @@
|
||||
# Type
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { UserOutlined } from '@antdv-next/icons'
|
||||
|
||||
const url = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space :size="16" wrap>
|
||||
<a-avatar>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<a-avatar>U</a-avatar>
|
||||
<a-avatar :size="40">
|
||||
USER
|
||||
</a-avatar>
|
||||
<a-avatar :src="url" />
|
||||
<a-avatar>
|
||||
<template #src>
|
||||
<img :src="url" alt="avatar" :draggable="false">
|
||||
</template>
|
||||
</a-avatar>
|
||||
<a-avatar style="background-color: #fde3cf; color: #f56a00;">
|
||||
U
|
||||
</a-avatar>
|
||||
<a-avatar style="background-color: #87d068;">
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
title: Avatar
|
||||
description: Used to represent users or things, supporting the display of images, icons, or characters.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Basic | demo/basic.md |
|
||||
| Type | demo/type.md |
|
||||
| Autoset Font Size | demo/dynamic.md |
|
||||
| With Badge | demo/badge.md |
|
||||
| Avatar.Group | demo/group.md |
|
||||
| Responsive Size | demo/responsive.md |
|
||||
|
||||
## API
|
||||
|
||||
### Avatar
|
||||
|
||||
#### Props
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| shape | The shape of avatar | `circle` \| `square` | `circle` | - | × |
|
||||
| size | The size of the avatar | number \| `large` \| `medium` \| `small` \| `{ xs: number, sm: number, ... }` | `medium` | - | × |
|
||||
| gap | Letter type unit distance between left and right sides | number | 4 | - | × |
|
||||
| src | The address of the image for an image avatar or image element | VueNode | - | - | × |
|
||||
| srcSet | A list of sources to use for different screen resolutions | string | - | - | × |
|
||||
| draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | true | - | × |
|
||||
| icon | Custom icon type for an icon avatar | VueNode | - | - | × |
|
||||
| alt | This attribute defines the alternative text describing the image | string | - | - | × |
|
||||
| crossOrigin | CORS settings attributes | '' \| 'anonymous' \| 'use-credentials' | - | - | × |
|
||||
| onError | Handler when img load error, return false to prevent default fallback behavior | () => boolean | - | - | × |
|
||||
|
||||
#### Events
|
||||
| Event | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| click | - | (e: MouseEvent) => void | - |
|
||||
|
||||
### Slots
|
||||
| Slot | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| icon | Custom icon type for an icon avatar | () => any | - |
|
||||
| src | The address of the image for an image avatar or image element | () => any | - |
|
||||
|
||||
### AvatarGroup
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| prefixCls | - | string | - | - |
|
||||
| max | - | { count?: number style?: CSSProperties popover?: PopoverProps } | - | - |
|
||||
| size | The size of the avatar | AvatarSize | `default` | - |
|
||||
| shape | The shape of avatar | 'circle' \| 'square' | `circle` | - |
|
||||
@@ -0,0 +1,37 @@
|
||||
# avatar Token
|
||||
|
||||
Use these variables through `theme.components.Avatar`. This document lists definitions only and does not include values.
|
||||
|
||||
```vue
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
// Global token configuration
|
||||
},
|
||||
components: {
|
||||
Avatar: {
|
||||
// Token name: value
|
||||
},
|
||||
},
|
||||
}"
|
||||
>
|
||||
...
|
||||
</a-config-provider>
|
||||
```
|
||||
|
||||
## Token List
|
||||
|
||||
| Token | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `containerSize` | `number` | Size of Avatar |
|
||||
| `containerSizeLG` | `number` | Size of large Avatar |
|
||||
| `containerSizeSM` | `number` | Size of small Avatar |
|
||||
| `textFontSize` | `number` | Font size of Avatar |
|
||||
| `textFontSizeLG` | `number` | Font size of large Avatar |
|
||||
| `textFontSizeSM` | `number` | Font size of small Avatar |
|
||||
| `iconFontSize` | `number` | Font size of Avatar icon |
|
||||
| `iconFontSizeLG` | `string \| number` | Font size of large Avatar icon |
|
||||
| `iconFontSizeSM` | `number` | Font size of small Avatar icon |
|
||||
| `groupSpace` | `number` | Spacing between avatars in a group |
|
||||
| `groupOverlapping` | `number` | Overlapping of avatars in a group |
|
||||
| `groupBorderColor` | `string` | Border color of avatars in a group |
|
||||
Reference in new issue
Block a user