Menu
Responsable:
NikitaCG
size
groupLabel
itemChildren
itemTheme
itemDisabled
itemSelected
itemActive
itemHref
import {Menu} from '@gravity-ui/uikit';
El Menu componente permite crear fácilmente vistas para listas de acciones.
Tiene componentes dedicados para elementos (Menu.Item) y grupos (Menu.Group). Puede combinarlos para crear menús más complejos.
<Menu>
<Menu.Item>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
</Menu>Tamaño
Esta propiedad se usa para seleccionar el tamaño del menú. El valor predeterminado es m.
<Menu size="s">
<Menu.Item>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
</Menu>
<Menu size="m">
<Menu.Item>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
</Menu>
<Menu size="l">
<Menu.Item>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
</Menu>
<Menu size="xl">
<Menu.Item>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
</Menu>Propiedades
| Nombre | Descripción | Tipo | Predeterminado |
|---|---|---|---|
| tamaño | Tamaño del menú | "s" "xl" | "m" |
| niños | Elemento secundario | React.ReactNode | |
| className | class Atributo HTML | string | |
| estilo | style Atributo HTML | React.CSSProperties | |
| qa | data-qa Atributo HTML, usado para realizar pruebas | string |
Menú. Artículo
Esta propiedad se usa para representar los elementos del menú.
Icono
Utilice la iconEnd propiedad iconStart o para mostrar un icono al principio o al final de un elemento del menú:
<Menu>
<Menu.Item iconStart={<Icon size={16} data={GearIcon} />}>Item with icon</Menu.Item>
<Menu.Item>Item without icon</Menu.Item>
</Menu><Menu>
<Menu.Item iconEnd={<Icon size={16} data={TriangleExclamation} />}>Item with icon</Menu.Item>
<Menu.Item>Item without icon</Menu.Item>
</Menu>Estados
Con esta propiedad, puede habilitar o deshabilitar (atenuar) elementos de menú específicos:
<Menu>
<Menu.Item disabled>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
<Menu.Item selected>Third</Menu.Item>
</Menu>Tema
Esto le permite cambiar el tema de los elementos del menú. El tema predeterminado es normal.
<Menu>
<Menu.Item theme="danger">First</Menu.Item>
<Menu.Item theme="normal">Second</Menu.Item>
<Menu.Item>Third</Menu.Item>
</Menu>Propiedades
| Nombre | Descripción | Tipo | Predeterminado |
|---|---|---|---|
| iconStart | Icono de menú antes del texto del elemento | ReactNode | |
| iconEnd | Icono de menú después del texto del elemento | ReactNode | |
| seleccionado | Bandera seleccionada para elemento de menú | boolean | false |
| inhabilitado | Indicador de elemento de menú desactivado | boolean | false |
| activo | Indicador activo del elemento del menú | boolean | false |
| href | URL | string | |
| título | Atributo de título | string | |
| objetivo | Atributo objetivo | string | |
| relé | Atributo real | string | |
| onClick | Controlador para el evento onclick | React.MouseEventHandler | |
| canción | Tema del elemento del menú | "normal" "danger" | "normal" |
| niños | Elemento secundario | React.ReactNode | |
| className | class Atributo HTML | string | |
| estilo | style Atributo HTML | React.CSSProperties | |
| qa | data-qa Atributo HTML, usado para realizar pruebas | string | |
| extraProps | Atributos HTML adicionales | Record |
Menú.Grupo
Puede agrupar los elementos por temas en un único menú:
<Menu>
<Menu.Item>First</Menu.Item>
<Menu.Group label="Group One">
<Menu.Item>One</Menu.Item>
<Menu.Item>Two</Menu.Item>
</Menu.Group>
<Menu.Group label="Group Two">
<Menu.Item>One</Menu.Item>
<Menu.Item>Two</Menu.Item>
</Menu.Group>
<Menu.Item>Middle</Menu.Item>
<Menu.Group label="Group Three">
<Menu.Item>One</Menu.Item>
<Menu.Item>Two</Menu.Item>
</Menu.Group>
<Menu.Item>Last</Menu.Item>
</Menu>Propiedades
| Nombre | Descripción | Tipo | Predeterminado |
|---|---|---|---|
| etiqueta | Etiqueta de grupo de menús | string | |
| niños | Elemento secundario | React.ReactNode | |
| className | class Atributo HTML | string | |
| estilo | style Atributo HTML | React.CSSProperties | |
| qa | data-qa Atributo HTML, usado para realizar pruebas | string |