UserLabel
维护者：
DakEnviy
view
type
avatar
text
UserLabel
该 UserLabel 组件可用于显示用户或用户相关信息。
类型
用于管理头像外观。"person" 用于个性化实体 "email" 和电子邮件地址。如果您不需要任何头像，请使用 "empty"。
CD
Charles Darwin
email@example.com
Alan Turing
<UserLabel type="person" text="Charles Darwin" />
<UserLabel type="email" text="email@example.com" />
<UserLabel type="empty" text="Alan Turing" />阿凡达
此组件可以与自定义头像一起使用。它只适用于 type: 'person'。您可以提供图像、A vatar 组件的属性或自定义 React 节点。
Charles Darwin
Charles Darwin
import {GraduationCap} from '@gravity-ui/icons';
<UserLabel type="person" avatar="<url>" text="Charles Darwin" />
<UserLabel type="person" avatar={{icon: GraduationCap}} text="Charles Darwin" />互动性
这个组件也是交互式的：它可以是可点击的，也可以是可关闭的。
CD
Charles Darwin
<UserLabel text="Charles Darwin" onClick={() => alert('onClick triggered')} />
<UserLabel text="Charles Darwin" onCloseClick={() => alert('onCloseClick triggered')} />属性
| 姓名 | 描述 | 类型 | 默认 |
|---|---|---|---|
| 类型 | 头像外观 | 'person' 'empty' | 'person' |
| 观点 | UserLabel 观点 | 'outlined' 'clear' | 'outlined' |
| 尺寸 | 头像大小 | '3xs' 'xl' | 's' |
| 头像 | 用户头像 | 头像道具 string React.ReactElement | |
| 文本 | 可见文本 | React.ReactNode | |
| 描述 | 用户描述 | React.ReactNode | |
| onClick | click 组件的事件处理器 | Function | |
| onCloseClick | click 交叉图标按钮的事件处理器 | Function | |
| className | 根元素的自定义 CSS 类 | string | |
| 风格 | HTML 样式属性 | React.CSSProperties | |
| qa | data-qa HTML 属性，用于测试 | string |
CSS API
| 姓名 | 描述 |
|---|---|
--g-user-label-size | 头像的大小（宽度和高度）和标签的高度 |
--g-user-label-border-radius | 标签边框半径 |
--g-user-label-padding | 标签水平边距 |
--g-user-label-gap | 元素（头像、文本、关闭图标）之间的间隔 |
--g-user-label-text-font-weight | 文字字体权重 |
--g-user-label-text-font-size | 文字字体大小 |
--g-user-label-text-line-height | 文本行高 |
--g-user-label-description-font-weight | 描述字体重量 |
--g-user-label-description-font-size | 描述字体大小 |
--g-user-label-description-line-height | 描述行高 |