Descripción general de Web Components Tabs

El Web Components Tabs es un componente ligero y fácil de usar que organiza el contenido correspondiente en un formato de pestaña o en una colección de pestañas normalmente colocadas 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 incorporados, animación, botones de desplazamiento y más.

El Ignite UI for Web Components Tabs 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 contenido correspondiente.

Web Components Tabs Example

El siguiente ejemplo de Web Components pestañas 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

En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents

import { defineComponents, IgcTabsComponent } from 'igniteui-webcomponents';

defineComponents(IgcTabsComponent);

Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

La declaración simpleIgcTabsComponent se hace de la siguiente manera:

<igc-tabs>
    <igc-tab>
      <div slot="label">Tab 1</div>
      <span>Content for tab 1</span>
    </igc-tab>
    <igc-tab>
      <div slot="label">Tab 2</div>
      <span>Content for tab 2</span>
    </igc-tab>
    <igc-tab>
      <div slot="label">Tab 3</div>
      <span>Content for tab 3</span>
    </igc-tab>
</igc-tabs>

Selección

ElIgcTabsComponent evento emiteChange cuando el usuario selecciona un elemento ya sea pulsando teclas o haciendo clic. Elselect método te permite seleccionar una pestaña especificando elIgcTabComponent o su id.

Si la pestaña seleccionada no se especifica en la carga inicial, se seleccionará la primera pestaña que no esté deshabilitada.

El comportamiento por defecto, que selecciona una pestaña cuando el usuario navega con las teclas de flecha, podría modificarse con laactivation propiedad. ConfigurarloManual en enfocará la pestaña siguiente/anterior al pulsar la tecla de flecha, pero la pestaña se seleccionará solo después de pulsar SPACE o ENTER

Disabled Tab

Una tabulación se desactiva estableciendo eldisabled atributo:

<igc-tab disabled>Tab 1</igc-tab>

Alignment

Laalignment propiedad controla cómo se posicionan Web Components pestañas. Acepta los siguientes valores:

Start(por defecto): El ancho de la pestaña depende del contenido (etiqueta, icono, 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 la pestaña.
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 las pestañas.
Justify: todas las pestañas tienen el mismo ancho y encajan completamente en el 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á deshabilitado 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á deshabilitado. Al presionar uno de los botones de desplazamiento, las pestañas se desplazan para 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.

Llaves	Descripción
`←`	Selecciona la pestaña anterior (siguiente en modo de derecha a izquierda). Si`activation` se establece en`Manual` 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). Si`activation` se establece en`Manual` 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.
`ENTER` / `SPACE`	Selecciona la pestaña enfocada cuando`activation` es`Manual`

Prefix / Suffix

Cada pestaña tiene una ranura predeterminada para mostrar la información: icono, texto o ambas ranuras yprefix ysuffix para mostrar contenido adicional al principio y/o al final.

Styling

ElIgcTabsComponent componente expone varias partes CSS, dándote control total sobre su estilo:

Nombre	Descripción
`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.

ElIgcTabComponent componente expone las siguientes partes CSS:

Nombre	Descripción
`content`	Contenedor de ranura de etiqueta del encabezado de pestaña.
`prefix`	Prefijo de etiqueta del encabezado de la pestaña.
`suffix`	Sufijo de etiqueta del encabezado de la pestaña.
`tab-header`	El encabezado de una sola pestaña.
`tab-body`	Contiene el contenido del cuerpo de una sola pestaña, solo el cuerpo de la pestaña seleccionada es visible.

igc-tab::part(tab-header),
igc-tabs::part(inner)::after {
    --item-background: var(--ig-surface-600);
    --border-color: var(--ig-success-300);
}

igc-tab::part(tab-body),
igc-tab[selected] igc-icon {
    --item-active-icon-color: var(--ig-success-300);
}

igc-tab:not([selected]) igc-icon {
    --item-icon-color: var(--ig-gray-500);
}

igc-tabs::part(start-scroll-button),
igc-tabs::part(end-scroll-button) {
    --background: var(--ig-surface-600);
    --hover-background: var(--ig-surface-700);
    --active-background: var(--ig-surface-700);
    --disabled-background: var(--ig-gray-100);
    --button-color: var(--ig-gray-700);
    --button-hover-color: var(--ig-gray-800);
    --button-disabled-color: var(--ig-gray-300);
    --border-color: var(--ig-surface-600);
}

igc-tab::part(tab-header) {
    --item-hover-color: var(--ig-success-500);
}

igc-tab::part(tab-header)::before {
    --border-color--hover: var(--ig-gray-500);
}