Descripción general de las pestañas Web Components
Las pestañas Web Components son un componente liviano y fácil de usar que organiza el contenido correspondiente en un formato de pestaña o una colección de pestañas generalmente ubicadas horizontalmente. La pestaña Web Components permite a los usuarios finales hacer clic fácilmente y mostrar diferentes vistas. Hay varias funciones y opciones de personalización como orientación de pestañas, plantillas, estilos de encabezado integrados, animación, botones de desplazamiento y más.
La Ignite UI for Web Components organiza y cambia entre conjuntos de datos similares. Las pestañas se colocan en la parte superior del contenido de los datos. Cuando se selecciona una pestaña, se muestra el panel con la identificación correspondiente. El componente podría usarse solo con pestañas definidas (sin ningún panel).
Web Components Tabs Example
El siguiente ejemplo de pestañas Web Components muestra tres pestañas diferentes alineadas en una sola línea para que pueda navegar por cada una de ellas de forma rápida y sencilla.
How to use Tabs with Ignite UI for Web Components
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
import { defineComponents, IgcTabsComponent } from 'igniteui-webcomponents';
defineComponents(IgcTabsComponent);
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.
La declaración simple IgcTabsComponent
se realiza de la siguiente manera:
<igc-tabs>
<igc-tab panel="first">Tab 1</igc-tab>
<igc-tab panel="second">Tab 2</igc-tab>
<igc-tab panel="third">Tab 3</igc-tab>
<igc-tab-panel id="first">Panel 1</igc-tab-panel>
<igc-tab-panel id="second">Panel 2</igc-tab-panel>
<igc-tab-panel id="third">Panel 3</igc-tab-panel>
</igc-tabs>
Selección
IgcTabsComponent
emite un evento Change
cuando el usuario selecciona un elemento presionando una tecla o haciendo clic. El método select
le permite seleccionar una pestaña especificando su panel como valor de cadena.
Si la pestaña seleccionada no se especifica en la carga inicial, se seleccionará la primera pestaña que no esté deshabilitada.
El comportamiento predeterminado, que selecciona una pestaña cuando el usuario navega con las teclas de flecha, podría modificarse mediante la propiedad activation
. Configurarlo en Manual
enfocará la pestaña siguiente/anterior al presionar la tecla de flecha, pero la pestaña se seleccionará solo después de presionar Espacio o Enter
Disabled Tab
Una pestaña se deshabilita configurando el atributo disabled
:
<igc-tab panel="first" disabled>Tab 1</igc-tab>
Alignment
La propiedad alignment
controla cómo se colocan las pestañas Web Components. Acepta los siguientes valores:
Start
(predeterminado): el ancho de la pestaña depende del contenido (etiqueta, ícono, ambos) y todas las pestañas tienen el mismo relleno. La primera pestaña está alineada con el lado izquierdo del contenedor de pestañas.Center
: el ancho de la pestaña depende del contenido y ocupa el centro del contenedor de pestañas.End
: el ancho de la pestaña depende del contenido y todas las pestañas tienen el mismo relleno. La última pestaña está alineada con el lado derecho del contenedor de pestañas.Justify
: todas las pestañas tienen el mismo ancho y se ajustan completamente al contenedor de pestañas.
Si el espacio no es suficiente para todas las pestañas, se muestran los botones de desplazamiento.
Scrolling
Los botones de desplazamiento se muestran cuando el espacio disponible no es suficiente para representar todas las pestañas Web Components. El botón de inicio de desplazamiento está desactivado si la primera pestaña está a la vista. Respectivamente, cuando la última pestaña está a la vista, el botón de desplazamiento final está desactivado. Al presionar uno de los botones de desplazamiento, las pestañas se desplazan de modo que la pestaña en esa dirección sea completamente visible o, si ya está visible, se muestra la pestaña anterior/siguiente en esa dirección.
Keyboard Navigation
Llaves | Descripción |
---|---|
← | Selecciona la pestaña anterior (siguiente en modo de derecha a izquierda). Siactivation se establece enManual solo enfoca la pestaña. Se desplaza hasta el final si está en la primera pestaña. |
→ | Selecciona la pestaña siguiente (anterior en modo de derecha a izquierda). Siactivation se establece enManual solo enfoca la pestaña. Se desplaza para comenzar si está en la última pestaña. |
Hogar | Selecciona la primera pestaña. |
Fin | Selecciona la última pestaña. |
Entrar / Espacio | Selecciona la pestaña enfocada cuandoactivation esManual |
Prefix / Suffix
Cada pestaña tiene una ranura predeterminada para mostrar información: icono, texto o ambos, y ranuras prefix
y suffix
para mostrar contenido adicional al principio y/o al final.
Styling
El componente IgcTabsComponent
expone partes CSS para todos sus elementos:
Nombre | Descripción |
---|---|
headers |
El contenedor que incluye las pestañas y los botones de desplazamiento. |
headers-content |
El contenedor de las pestañas que representa el espacio disponible para la representación de las pestañas. |
headers-wrapper |
El contenedor de las pestañas y el indicador seleccionado. |
headers-scroll |
El contenedor para las pestañas. |
selected-indicator |
El indicador seleccionado. |
start-scroll-button |
El botón de inicio de desplazamiento se muestra cuando las pestañas se desbordan. |
end-scroll-button |
El botón de finalizar desplazamiento se muestra cuando las pestañas se desbordan. |
content |
El contenedor del contenido donde se muestran los datos. |
El componente IgcTabComponent
expone las siguientes partes CSS:
Nombre | Descripción |
---|---|
base |
El contenedor base del encabezado de la pestaña. |
prefix |
El contenedor de prefijo. |
suffix |
El contenedor del sufijo. |
igc-tabs::part(selected-indicator) {
background: #ecaa53;
}
igc-tab::part(base) {
background: #ffe6cc;
}
API Reference
IgcTabsComponent
IgcTabComponent
IgcTabPanelComponent
IgcIconComponent
IgcIconButtonComponent
IgcRadioGroupComponent