Kunlun DesignEnglish
Avatar component
A control that displays the user's avatar.
基础用法
Use shape to define the style and size to adjust the size.
User
User
User
User
User
User
<>
<template>
<div class="avatar">
<div class="circle">
<kl-avatar shape="circle" size="small">User</kl-avatar>
<kl-avatar shape="circle" size="normal">User</kl-avatar>
<kl-avatar shape="circle" size="large">User</kl-avatar>
</div>
<div class="square">
<kl-avatar shape="square" size="small">User</kl-avatar>
<kl-avatar shape="square" size="normal">User</kl-avatar>
<kl-avatar shape="square" size="large">User</kl-avatar>
</div>
</div>
</template>
<style lang="scss" scoped>
.avatar {
display: flex;
justify-content: space-around;
align-items: center;
.circle {
width: 250px;
display: flex;
justify-content: space-around;
align-items: baseline;
}
.square {
width: 250px;
display: flex;
justify-content: space-around;
align-items: baseline;
}
}
</style>
Display type
Support the use of images, icons or text as Avatar.
用户
<>
<template>
<div class="avatar">
<kl-avatar size="large">用户</kl-avatar>
<kl-avatar
src="https://anixuil.github.io/assets/logo.f9f38966.jpg"
size="large"
></kl-avatar>
</div>
</template>
<style lang="scss" scoped>
.avatar {
display: flex;
justify-content: space-around;
align-items: center;
}
</style>
API
Avatar
| parameter | Explain | Ttpe |
|---|---|---|
| size | Avatar size | string/number |
| shape | Avatar shape | string |
| src | Source address of Avatar image | string |
| srcset | Native srcset attribute of image Avatar | string |
| alt | Native alt attribute of image Avatar | string |
Slots
| Slot name | Explain |
|---|---|
| default | Customize the content displayed by the avatar |