Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

头像

个人资料图片、用户名称首字母或备用图标。

View sourceReport an issueView in Playground
<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>

API 参考

¥API Reference

此组件继承了 头像基础组件 的属性。

¥This component inherits props from the Avatar primitive.

PropTypeDefault
asChild
boolean
No default value
size
Responsive<enum>
"3"
variant
"solid" | "soft"
"soft"
color
enum
No default value
highContrast
boolean
No default value
radius
"none" | "small" | "medium" | "large" | "full"
No default value
fallback*
ReactNode
No default value

示例

¥Examples

尺寸

¥Size

使用 size 属性控制头像的大小。

¥Use the size prop to control the size of the avatar.

<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

使用 variant 属性控制头像的视觉样式。

¥Use the variant prop to control the visual style of the avatar.

<Flex gap="2">

	<Avatar variant="solid" fallback="A" />

	<Avatar variant="soft" fallback="A" />

</Flex>

颜色

¥Color

使用 color 属性指定特定的 color。

¥Use the color prop to assign a specific color.

<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>

高对比度

¥High-contrast

使用 highContrast 属性增加与背景的颜色对比度。

¥Use the highContrast prop to increase color contrast with the background.

<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

使用 radius 属性指定特定的圆角值。

¥Use the radius prop to assign a specific radius value.

<Flex gap="2">

	<Avatar radius="none" fallback="A" />

	<Avatar radius="large" fallback="A" />

	<Avatar radius="full" fallback="A" />

</Flex>

后备方案

¥Fallback

使用 fallback 属性修改渲染的 fallback 元素。

¥Use the fallback prop to modify the rendered fallback element.

<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>
Previous宽高比
Next徽章