Tabs
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Las pestañas organizan el contenido en diferentes pantallas, interacciones y conjuntos de datos. Las pestañas se pueden utilizar para alternar entre vistas de grupos de información distintos y relacionados.
Recursos
Lo más destacado
- Las pestañas se pueden desplazar horizontalmente. Una IU puede tener tantas pestañas como sea necesario.
- Las pestañas organizan el contenido en categorías para ayudar a los usuarios a encontrar diferentes tipos de información rápidamente.
- Las pestañas se muestran una al lado de la otra como apps similares, en categorías del mismo nivel.
Variantes
Hay dos tipos de indicadores de pestañas:
- Indicador de pastilla
- Indicador de barras
Elige la tipografía correcta según el énfasis. Se recomiendan las pestañas indicadores
de barras para organizar páginas completas. Muestran los destinos de contenido principales. Las pestañas del indicador de barra se usan dentro de un área de contenido para separar aún más el contenido relacionado y establecer jerarquías.
Anatomía
- Ícono (opcional)
- Sello discográfico
- Indicador activo
- Píldora
- Bar
- Contenedor
Estados
- Predeterminada
- Enfoque
- Seleccionado
Especificaciones
Comportamiento
Cuando pasas de una pestaña a la siguiente, el contenido que aparece debajo también se desliza hacia la izquierda o la derecha según el movimiento de la pestaña.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[null,null,["Última actualización: 2025-07-27 (UTC)"],[],[],null,["# Tabs organize content across different screens, data sets, and\ninteractions. Tabs can be used to switch between views of distinct and\nrelated groups of information.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#TabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function2,kotlin.Function1)) | Available |\n\nHighlights\n----------\n\n- Tabs can scroll horizontally. A UI can have as many tabs as needed.\n- Tabs organize content into categories to help users find different types of information quickly.\n- Tabs are displayed next to each other as peers, in categories of equal importance.\n\nVariants\n--------\n\nThere are two types of tab indicators: \n\n1. Pill indicator\n2. Bar indicator\n\nChoose the right type according to emphasis. Pill indicator tabs are\nrecommended for organizing full pages. They display the main content\ndestinations. Bar indicator tabs are used within a content area to further\nseparate related content and establish hierarchy.\n\nAnatomy\n-------\n\n1. Icon (optional)\n2. Label\n3. Active indicator\n 1. Pill\n 2. Bar\n4. Container\n\nStates\n------\n\n1. Default\n2. Focused\n3. Selected\n\nSpecs\n-----\n\nBehavior\n--------\n\nWhen moving from one tab to the next the content below also slides left or\nright based on the tab movement."]]
