Avatar

<script setup lang="ts">
    import { Avatar } from '@fibrous/semi-ui-vue';

    const sizes = ['extra-extra-small', 'extra-small', 'small', 'default', 'medium', 'large', 'extra-large'];
</script>

<template>
    <div>
        <Avatar v-for="size in sizes" :key="size" alt="用户" :size="size" :style="{ margin: '4px' }">U</Avatar>
    </div>
</template>

<script setup lang="ts">
    import { Avatar } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Avatar alt="Alice Swift" :style="{ margin: '4px' }">AS</Avatar>
        <Avatar alt="Bob Matteo" color="red" :style="{ margin: '4px' }">BM</Avatar>
        <Avatar alt="Taylor Joy" color="light-blue" :style="{ margin: '4px' }">TJ</Avatar>
        <Avatar alt="Zank Lance" :style="{ color: '#f56a00', backgroundColor: '#fde3cf', margin: '4px' }">ZL</Avatar>
        <Avatar alt="Youself Zhang" :style="{ backgroundColor: '#87d068', margin: '4px' }">YZ</Avatar>
    </div>
</template>

<script setup lang="ts">
    import { Avatar } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Avatar :style="{ margin: '4px' }">AS</Avatar>
        <Avatar :gap="4" :style="{ margin: '4px' }">Semi</Avatar>
        <Avatar :gap="10" :style="{ margin: '4px' }">Semi</Avatar>
    </div>
</template>

<script setup lang="ts">
    import { Avatar } from '@fibrous/semi-ui-vue';

    const src = '/assets/placeholder/avatar-a.svg';
</script>

<template>
    <div>
        <Avatar alt="漂亮的猫咪" :src="src" :style="{ margin: '4px' }" />
        <Avatar alt="可爱的猫咪" size="small" :src="src" :style="{ margin: '4px' }" />
    </div>
</template>

<script setup lang="ts">
    import { Avatar } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Avatar alt="用户" :style="{ margin: '4px' }">U</Avatar>
        <Avatar alt="用户" shape="square" :style="{ margin: '4px' }">U</Avatar>
    </div>
</template>

<script setup lang="ts">
    import { IconCamera } from '@fibrous/semi-icons-vue';
    import { Avatar } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Avatar alt="Bob Downton" color="red">
        BD
        <template #hoverMask>
            <div
                :style="{
                    backgroundColor: 'var(--semi-color-overlay-bg)',
                    height: '100%',
                    width: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }"
            >
                <IconCamera />
            </div>
        </template>
    </Avatar>
</template>

<script setup lang="ts">
    import { IconPlus } from '@fibrous/semi-icons-vue';
    import { Avatar } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Avatar alt="漂亮的猫咪" :border="{ color: '#FE2C55', motion: true }" :bottomSlot="{ shape: 'circle', bgColor: '#FE2C55' }" contentMotion size="large" src="/assets/placeholder/avatar-a.svg" :style="{ margin: '4px' }" :topSlot="{ gradientStart: 'rgb(255,23,100)', gradientEnd: 'rgb(237,52,148)' }">
        <template #topSlotText>直播</template>
        <template #bottomSlotText>
            <IconPlus />
        </template>
    </Avatar>
</template>

<script setup lang="ts">
    import { Avatar } from '@fibrous/semi-ui-vue';

    const sizes = ['medium', 'large', 'extra-large'];
</script>

<template>
    <div>
        <Avatar v-for="size in sizes" :key="size" color="amber" :size="size" :topSlot="{ gradientStart: 'rgb(255,23,100)', gradientEnd: 'rgb(237,52,148)' }">
            T
            <template #topSlotText>直播</template>
        </Avatar>
    </div>
</template>

<script setup lang="ts">
    import { IconPlus } from '@fibrous/semi-icons-vue';
    import { Avatar } from '@fibrous/semi-ui-vue';

    const sizes = ['medium', 'large', 'extra-large'];
</script>

<template>
    <div>
        <Avatar v-for="size in sizes" :key="size" :bottomSlot="{ shape: 'square', bgColor: '#FE2C55' }" color="amber" :size="size">
            T
            <template #bottomSlotText>直播中</template>
        </Avatar>
        <br /><br /><br />
        <Avatar v-for="size in sizes" :key="`plus-${size}`" :bottomSlot="{ shape: 'circle', bgColor: '#FE2C55' }" color="amber" :size="size">
            T
            <template #bottomSlotText>
                <IconPlus />
            </template>
        </Avatar>
    </div>
</template>

<script setup lang="ts">
    import { Avatar } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div><Avatar v-for="index in 3" :key="index" border color="amber" :style="{ marginRight: '8px' }">T</Avatar></div>
</template>

<script setup lang="ts">
    import { Avatar } from '@fibrous/semi-ui-vue';

    const sizes = ['medium', 'large', 'extra-large'];
</script>

<template>
    <div>
        <Avatar v-for="size in sizes" :key="size" :border="{ motion: true }" color="amber" contentMotion :size="size" :style="{ marginRight: '8px' }">T</Avatar>
    </div>
</template>

<script setup lang="ts">
    import { Avatar, AvatarGroup } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <AvatarGroup>
            <Avatar alt="Lisa LeBlanc" color="red">LL</Avatar>
            <Avatar alt="Caroline Xiao">CX</Avatar>
            <Avatar alt="Rafal Matin" color="amber">RM</Avatar>
            <Avatar alt="Zank Lance" :style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">ZL</Avatar>
            <Avatar alt="Youself Zhang" :style="{ backgroundColor: '#87d068' }">YZ</Avatar>
        </AvatarGroup>
    </div>
</template>

<script setup lang="ts">
    import { Avatar, AvatarGroup } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <AvatarGroup :maxCount="3">
            <Avatar alt="Lisa LeBlanc" color="red">LL</Avatar>
            <Avatar alt="Caroline Xiao">CX</Avatar>
            <Avatar alt="Rafal Matin" color="amber">RM</Avatar>
            <Avatar alt="Zank Lance" :style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">ZL</Avatar>
            <Avatar alt="Youself Zhang" :style="{ backgroundColor: '#87d068' }">YZ</Avatar>
        </AvatarGroup>
    </div>
</template>

<script setup lang="ts">
    import { cloneVNode, type VNode } from 'vue';
    import { Avatar, AvatarGroup, Popover } from '@fibrous/semi-ui-vue';

    // The group provides existing slot vnodes; cloning preserves their content while overriding the popup size.
    function SmallAvatar({ avatar }: { avatar: VNode }) {
        return cloneVNode(avatar, { size: 'extra-small' });
    }
</script>

<template>
    <AvatarGroup :maxCount="3">
        <Avatar alt="Lisa LeBlanc" color="red">LL</Avatar>
        <Avatar alt="Caroline Xiao">CX</Avatar>
        <Avatar alt="Rafal Matin" color="amber">RM</Avatar>
        <Avatar alt="Zank Lance" :style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">ZL</Avatar>
        <Avatar alt="Youself Zhang" :style="{ backgroundColor: '#87d068' }">YZ</Avatar>
        <template #more="{ restNumber, restAvatars }">
            <Popover :autoAdjustOverflow="false" position="bottomRight" :style="{ padding: '12px 8px', paddingBottom: 0 }">
                <Avatar>{{ `+${restNumber}` }}</Avatar>
                <template #content>
                    <div v-for="(avatar, index) in restAvatars" :key="index" :style="{ paddingBottom: '12px' }">
                        <SmallAvatar :avatar="avatar" />
                        <span :style="{ marginLeft: '8px', fontSize: '14px' }">这是段文字描述</span>
                    </div>
                </template>
            </Popover>
        </template>
    </AvatarGroup>
</template>

<script setup lang="ts">
    import { Avatar, AvatarGroup } from '@fibrous/semi-ui-vue';

    const directions = ['start', 'end'] as const;
</script>

<template>
    <div>
        <div v-for="direction in directions" :key="direction">
            <AvatarGroup :overlapFrom="direction">
                <Avatar alt="Lisa LeBlanc" color="red">LL</Avatar>
                <Avatar alt="Caroline Xiao">CX</Avatar>
                <Avatar alt="Rafal Matin" color="amber">RM</Avatar>
                <Avatar alt="Zank Lance" :style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">ZL</Avatar>
                <Avatar alt="Youself Zhang" :style="{ backgroundColor: '#87d068' }">YZ</Avatar>
            </AvatarGroup>
        </div>
    </div>
</template>