Label
import {Label} from '@gravity-ui/uikit';
Puede usar Labels para resaltar cierta información. Label Con el Copy botón Close o puede resultar útil para realizar varias acciones sencillas.
LabelLos s son los más adecuados para mostrar información de texto de una línea con diferentes códigos de color que muestran su importancia.
Apariencia
A se Label puede mostrar en varios estilos.
Tema
Utilice la theme propiedad para aplicar diferentes temas para varios estados. Puede usar los valores siguientes: normal info, success, warning, danger, utility unknown, y clear.
El tema predeterminado es normal.
<Label theme="normal">Normal</Label>
<Label theme="info">Info</Label>
<Label theme="success">Success</Label>
<Label theme="warning">Warning</Label>
<Label theme="danger">Danger</Label>
<Label theme="utility">Utility</Label>
<Label theme="unknown">Unknown</Label>
<Label theme="clear">Clear</Label>Tipo
La type propiedad añade varias opciones a Label:
copy: Añade un botón de copia; al hacer clic en él, copia el valor de la copyText propiedad.
close: Añade un botón de cierre para gestionar las listas de etiquetas.
<Label type="default" onClick={() => alert('On click label')} size="s">Clickable</Label>
<Label type="close" onCloseClick={() => alert('On click close')} size="s">Closable</Label>
<Label type="copy" copyText="Copy" onCopy={() => alert('On copy')} size="s">Copy</Label>Icono
Puede añadir un icono con la icon propiedad. Para ello, utilice el Icon componente, que es un contenedor especial para SVG.
<Label icon={<Icon size={16} data={GearIcon} />}>Icon</Label>
<Label type="close" icon={<Icon size={16} data={GearIcon} />}>Icon and close</Label>
<Label type="copy" icon={<Icon size={16} data={GearIcon} />}>Icon and copy</Label>Valor
Puede usar Labels para mostrar información de valores clave. Para ello, debe proporcionar la clave de la children propiedad y el valor para: value
<Label theme="normal" value="Value">Key</Label>
<Label theme="info" value="Value">Key</Label>
<Label theme="success" value="Value">Key</Label>
<Label theme="warning" value="Value">Key</Label>
<Label theme="danger" value="Value">Key</Label>
<Label theme="utility" value="Value">Key</Label>
<Label theme="unknown" value="Value">Key</Label>
<Label theme="clear" value="Value">Key</Label>Estado
A label puede tener diferentes estados:
disabled: No se permiten interacciones.interactive: Hace que la etiqueta se pueda colocar sobre el ratón.
<Label>Default</Label>
<Label disabled>Disabled</Label>
<Label interactive>Interactive</Label>Tamaño
<Label size="xs">XS size</Label>
<Label size="s">S size</Label>
<Label size="m">M size</Label>Propiedades
| Nombre | Descripción | Tipo | Predeterminado |
|---|---|---|---|
| niños | Contenido | React.ReactNode | |
| className | class Atributo HTML | string | |
| closeButtonLabel | aria-label del botón de cierre | string | |
| copyButtonLabel | aria-label del botón de copia | string | |
| copyText | Texto para copiar | string | |
| inhabilitado | Estado desactivado | boolean | |
| icono | Icono de etiqueta (a la izquierda) | React.ReactNode | |
| interactivo | Activa el efecto de desplazamiento | boolean | |
| onClick | click controlador de eventos | Function | |
| onCloseClick | Controlador de click eventos del botón Cerrar | Function | |
| onCopy | copy controlador de eventos | Function | |
| tamaño | Tamaño de etiqueta | "xs" "m" | "s" |
| canción | Tema de etiqueta | string | "normal" |
| tipo | Tipo de etiqueta | "default" "close" | "default" |
| valor | Valor de etiqueta (mostrado como "children : value") | string | |
| título | title Atributo HTML | string | |
| qa | data-qa Atributo HTML, usado para realizar pruebas | string |