import { Avatar } from './index'; import { AvatarGroup } from './avatar_group'; import { Canvas, ArgsTable } from '@storybook/addon-docs'; import { ExpandOutlined } from '@apitable/icons';

<Meta title="基础组件/Avatar 头像/文档" />

Avatar 头像

将用户（人）、团队（空间站）用作头像显示，可以为图片、图标或字符形式展示。

使用方式

示例

展示图片头像

通过 HTML5 img 标签标椎的 src 属性传递图片路径，创建图片头像。

<Canvas> <Avatar src="https://avatars.githubusercontent.com/u/89725681" alt="react-window" /> <Avatar src="https://avatars.githubusercontent.com/u/89725681" alt="apitable avatar" /> </Canvas>

展示图标头像

通过 icon 属性制定图标展示图标头像，从图标组件库中 @apitable/icons 获取图标。

<Canvas> <Avatar icon={<ExpandOutlined />} /> </Canvas>

展示文本头像

通过传入字符创，创建包含简单字符串的头像。

<Canvas> <Avatar>A</Avatar> <Avatar>APITable</Avatar> </Canvas>

缩放处理

受限于展示区域限制，当文本内容较多时会自动缩小文字保证全部展示，当然为了保证视觉可阅读性，建议用户不要使用过长的文本。

<Canvas> <Avatar>A</Avatar> <Avatar>APITable</Avatar> </Canvas>

设置尺寸

通过 size 定义了头像尺寸，默认为 m(40px)，通过特定字符串指定，可以更细致的划分头像大小，支持的数值有：xxs(20px)、xs(24px)、s(32px)、m(40px)、l(64px)、xl(80px)。

<Canvas> <Avatar size="xxs" src="https://avatars.githubusercontent.com/u/89725681" alt="apitable logo" /> <Avatar size="xs" src="https://avatars.githubusercontent.com/u/89725681" alt="apitable logo" /> <Avatar size="s" src="https://avatars.githubusercontent.com/u/89725681" alt="apitable logo" /> <Avatar size="m" src="https://avatars.githubusercontent.com/u/89725681" alt="apitable logo" /> <Avatar size="l" src="https://avatars.githubusercontent.com/u/89725681" alt="apitable logo" /> <Avatar size="xl" src="https://avatars.githubusercontent.com/u/89725681" alt="apitable logo" /> </Canvas>

设置形状

通过 shape 属性设置形状，目前支持圆形（circle 默认）、圆角形状（square）

<Canvas> <Avatar src="https://avatars.githubusercontent.com/u/89725681" alt="apitable logo" /> <Avatar shape="square" src="https://avatars.githubusercontent.com/u/89725681" alt="apitable logo" /> <Avatar>V</Avatar> <Avatar shape="square">V</Avatar> <Avatar icon={<ExpandOutlined />} /> <Avatar shape="square" icon={<ExpandOutlined />} /> </Canvas>

设置颜色

通过 HTML5 style 属性定制背景、字符串、图标颜色。

<Canvas> <Avatar>V</Avatar> <Avatar icon={<ExpandOutlined />} /> <Avatar style={{ background: '#ccc' }}>V</Avatar> <Avatar style={{ background: '#ccc' }} icon={<ExpandOutlined />} /> <Avatar style={{ color: '#f56a00', background: '#fde3cf' }}>V</Avatar> <Avatar style={{ color: '#f56a00', background: '#fde3cf' }} icon={<ExpandOutlined />} /> </Canvas>

分组

AvatarGroup 组件支持头像组合展示，通过 max 设置默认展示数量，默认展示数量为 5 个，超出使用数值展示。

<Canvas> <AvatarGroup> <Avatar src="https://avatars.githubusercontent.com/u/89725681" alt="apitable logo" /> <Avatar style={{ color: '#f56a00', background: '#fde3cf' }} icon={<ExpandOutlined />} /> <Avatar>V</Avatar> <Avatar style={{ color: '#f56a00', background: '#fde3cf' }}>APITable</Avatar> <Avatar src="https://avatars.githubusercontent.com/u/89725681" alt="apitable avatar" /> <Avatar src="https://avatars.githubusercontent.com/u/89725681" alt="apitable avatar" /> <Avatar src="https://avatars.githubusercontent.com/u/89725681" alt="apitable avatar" /> </AvatarGroup> </Canvas>

AvatarGroup 组件还支持设置其他属性，设置 max 最多展示 3 个头像，设置 size 为 sx 调整所有头像尺寸，设置 maxStyle 调整多余头像样式： <Canvas> <AvatarGroup max={3} size="xs" maxStyle={{ background: '#ccc' }}> <Avatar src="https://avatars.githubusercontent.com/u/89725681" alt="apitable avatar" /> <Avatar src="https://avatars.githubusercontent.com/u/89725681" alt="apitable avatar" /> <Avatar src="https://avatars.githubusercontent.com/u/89725681" alt="apitable avatar" /> <Avatar src="https://avatars.githubusercontent.com/u/89725681" alt="apitable avatar" /> <Avatar src="https://avatars.githubusercontent.com/u/89725681" alt="apitable avatar" /> <Avatar src="https://avatars.githubusercontent.com/u/89725681" alt="apitable avatar" /> </AvatarGroup> </Canvas>

API

Avatar 头像 API

<ArgsTable of={Avatar} />

AvatarGroup 头像分组 API

<ArgsTable of={AvatarGroup} />