个人资料图片、用户首字母或备用图标。
<Flex gap="2">
<Avatar
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<Avatar fallback="A" />
</Flex>
此组件继承自 Avatar 原生组件 的 props。
| Prop | 类型 | 默认值 |
|---|---|---|
asChild | boolean | 无默认值 |
size | Responsive<enum> | "3" |
variant | "solid" | "soft" | "soft" |
color | enum | 无默认值 |
highContrast | boolean | 无默认值 |
radius | "none" | "small" | "medium" | "large" | "full" | 无默认值 |
fallback* | ReactNode | 无默认值 |
使用 size prop 控制头像的大小。
<Flex align="center" gap="4">
<Avatar
size="1"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<Avatar
size="2"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<Avatar
size="3"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<Avatar
size="4"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<Avatar
size="5"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<Avatar
size="6"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<Avatar
size="7"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<Avatar
size="8"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
</Flex>
使用 variant prop 控制头像的视觉风格。
<Flex gap="2">
<Avatar variant="solid" fallback="A" />
<Avatar variant="soft" fallback="A" />
</Flex>
使用 color prop 指定特定的 颜色.
<Flex gap="2">
<Avatar variant="solid" color="indigo" fallback="A" />
<Avatar variant="solid" color="cyan" fallback="A" />
<Avatar variant="solid" color="orange" fallback="A" />
<Avatar variant="solid" color="crimson" fallback="A" />
</Flex>
使用 highContrast prop 提高与背景的颜色对比度。
<Grid rows="2" gap="2" display="inline-grid" flow="column">
<Avatar variant="solid" color="indigo" fallback="A" />
<Avatar variant="solid" color="indigo" fallback="A" highContrast />
<Avatar variant="solid" color="cyan" fallback="A" />
<Avatar variant="solid" color="cyan" fallback="A" highContrast />
<Avatar variant="solid" color="orange" fallback="A" />
<Avatar variant="solid" color="orange" fallback="A" highContrast />
<Avatar variant="solid" color="crimson" fallback="A" />
<Avatar variant="solid" color="crimson" fallback="A" highContrast />
<Avatar variant="solid" color="gray" fallback="A" />
<Avatar variant="solid" color="gray" fallback="A" highContrast />
</Grid>
使用 radius prop 指定特定的半径值。
<Flex gap="2">
<Avatar radius="none" fallback="A" />
<Avatar radius="large" fallback="A" />
<Avatar radius="full" fallback="A" />
</Flex>
使用 fallback prop 修改渲染的备用元素。
<Flex gap="2">
<Avatar fallback="A" />
<Avatar fallback="AB" />
<Avatar
fallback={
<Box width="24px" height="24px">
<svg viewBox="0 0 64 64" fill="currentColor">
<path d="M41.5 14c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S33 27.962 33 23 36.813 14 41.5 14zM56.289 43.609C57.254 46.21 55.3 49 52.506 49c-2.759 0-11.035 0-11.035 0 .689-5.371-4.525-10.747-8.541-13.03 2.388-1.171 5.149-1.834 8.07-1.834C48.044 34.136 54.187 37.944 56.289 43.609zM37.289 46.609C38.254 49.21 36.3 52 33.506 52c-5.753 0-17.259 0-23.012 0-2.782 0-4.753-2.779-3.783-5.392 2.102-5.665 8.245-9.472 15.289-9.472S35.187 40.944 37.289 46.609zM21.5 17c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S13 30.962 13 26 16.813 17 21.5 17z" />
</svg>
</Box>
}
/>
</Flex>