UserLabel
Responsable:
DakEnviy
view
type
avatar
text
UserLabel
El UserLabel componente se puede usar para mostrar usuarios o información relacionada con los usuarios.
Tipo
Se usa para administrar la apariencia del avatar. "person" Úselo para una entidad personalizada y "email" para una dirección de correo electrónico. Si no necesitas ningún avatar, úsalo "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" />Avatar
Este componente se puede usar con un avatar personalizado. Solo funciona con type: 'person'. Puedes proporcionar una imagen, una propiedad del componente Avatar o un nodo React personalizado.
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" />Interactividad
Este componente también es interactivo: se puede hacer clic en él o se puede cerrar.
CD
Charles Darwin
<UserLabel text="Charles Darwin" onClick={() => alert('onClick triggered')} />
<UserLabel text="Charles Darwin" onCloseClick={() => alert('onCloseClick triggered')} />Propiedades
| Nombre | Descripción | Tipo | Predeterminado |
|---|---|---|---|
| tipo | Apariencia del avatar | 'person' 'empty' | 'person' |
| vista | UserLabel vista | 'outlined' 'clear' | 'outlined' |
| tamaño | Tamaño del avatar | '3xs' 'xl' | 's' |
| avatar | Avatar de usuario | Avatar Props string React.ReactElement | |
| mensaje | Texto visible | React.ReactNode | |
| descripción | Descripción del usuario | React.ReactNode | |
| onClick | click controlador de eventos para el componente | Function | |
| onCloseClick | click controlador de eventos para el botón con forma de cruz | Function | |
| className | Clase CSS personalizada para el elemento raíz | string | |
| estilo | Atributo de estilo HTML | React.CSSProperties | |
| qa | data-qa Atributo HTML, usado para realizar pruebas | string |
API CSS
| Nombre | Descripción |
|---|---|
--g-user-label-size | Tamaño del avatar (ancho y alto) y alto de la etiqueta |
--g-user-label-border-radius | Radio del borde de la etiqueta |
--g-user-label-padding | Relleno horizontal de etiquetas |
--g-user-label-gap | Espacio entre los elementos (avatar, texto, icono de cerrar) |
--g-user-label-text-font-weight | Peso de la fuente del texto |
--g-user-label-text-font-size | Tamaño de fuente del texto |
--g-user-label-text-line-height | Altura de línea de texto |
--g-user-label-description-font-weight | Descripción: peso de la fuente |
--g-user-label-description-font-size | Tamaño de fuente de la descripción |
--g-user-label-description-line-height | Altura de la línea descriptiva |