--- title: Pestañas slug: pestanas createdAt: 2024-07-24T11:17:19.316Z --- ![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-qlzuX6ak9nYvTvfqGAc1q-20240822-125616.png) Tabs es un bloque que te permite organizar contenido en múltiples secciones dentro de un solo documento. Es como un conjunto de pestañas en las que puedes hacer clic para revelar información diferente. Piénsalo como una forma de crear múltiples páginas dentro de una sola página. ## Por qué usarlo - **Organizar contenido complejo** Agrupa contenido relacionado en pestañas separadas para mejorar la estructura y la legibilidad. - **Mejorar la legibilidad** Haz que tu contenido sea más fácil de navegar y entender. - **Ahorrar espacio** Utiliza eficientemente el espacio mostrando el contenido secuencialmente en lugar de todo a la vez. - **Crear experiencias interactivas** Involucra a los usuarios permitiéndoles elegir activamente la información que quieren ver. ## Cómo usar el bloque de Pestañas ::::::WorkflowBlock :::WorkflowBlockItem Escribe `/` para abrir el menú de bloques de Archbee ::: :::WorkflowBlockItem Busca el bloque **Pestañas** y haz clic para insertarlo ![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-eXhqk7Cgjios95U2j8it8-20240822-124946.png) ::: :::WorkflowBlockItem Personaliza los nombres de tus pestañas. Por defecto, el bloque se crea con 2 pestañas llamadas "Nombre de Pestaña" y "Nombre de la Segunda Pestaña". Para renombrar una pestaña, debes entrar en el modo de edición de etiqueta mediante: - Hacer doble clic en la etiqueta de la pestaña - O pulsar el ícono "Editar etiqueta" ( :FontAwesome[]{icon="fa-solid fa-pen-to-square"} ) Presiona guardar ( :FontAwesome[]{icon="fa-solid fa-check"} ) para actualizar la etiqueta, o presiona descartar ( **↩** ) para deshacer los cambios. ::: :::::WorkflowBlockItem Siéntete libre de añadir tu contenido. Puedes darle estilo como prefieras usando el [Menú WYSIWYG](#) o incluso insertar otros bloques, como: ::::LinkArray :::LinkArrayItem Bloques Básicos - [Títulos](docId\:D04KtOE02hTJI6SkTrGxH) - [Títulos Expandibles](docId\:osM3b8iCFKpDLA51NLnJt) - [Listas](docId\:ATvh9_HhoRLIrBzn7rV7d) - [Tabla](docId:6wQ1sglT7aNPS5R4nWdiP) ::: - [Botón](docId\:O0VbrIQ-paqctveQ5Yjqy) :::: - [Llamada](docId\:Ik6fk0pqaBk9omUh2cU5h) ::::: - [Divisor Horizontal](docId\:vKC_xtnpg2OiD2v5DBITP) :::::: - [División Vertical](docId:6412zoIr6FhQUN1LafZmp) ## Markdown Aquí se muestra cómo crear una pestaña en su documento usando código markdown: :::::WorkflowBlock :::WorkflowBlockItem Comience con la `:::tabs` línea. ::: ::::WorkflowBlockItem Cada contenido de pestaña va entre `:::tab` y `:::` marcadores. :::hint{type="warning"} **🚨 ¡Atención!** Dos puntos `:` deben colocarse en un elemento padre de markdown para indicar que encierra otro elemento de markdown. ::: En este caso, `:::tabs` cambiará a `::::tabs` . Dé a cada pestaña un título con llaves como `{title="Your Section Name"}`. Este es el nombre que aparecerá en el encabezado de la pestaña. :::: :::WorkflowBlockItem Coloque el contenido que desee en esta pestaña entre esas líneas. Vea arriba los bloques permitidos que pueden usarse dentro del bloque de pestaña. Consulte la página [Usar atajos de Markdown](docId\:iDVlcwlUG5-qfm2aML3NE) para ver cómo usar otros bloques con markdown. ::: :::WorkflowBlockItem Cree tantas pestañas como desee y cierre su bloque de pestañas. No olvide añadir columnas para cada nivel anidado. A continuación se muestra un ejemplo de un bloque de pestañas usando markdown. ::: ::::: ```markdown ## Tabs :::::tabs ::::tab{title="Tab 1"} Some content for Tab 1 :::hint{style="info"} Pull requests are very welcome! Please see CONTRIBUTING.md for more information. Tthis is really nice ::: - [x] This is a checkbox list - [x] This is a checkbox list - [ ] This is done - [ ] This is a checkbox list :::: :::tab{title="Tab Photos"} ![](https://placehold.co/600x400) We would love you to contributeaaa ::: ::::: ``` Aquí está el resultado: :::::Tabs ::::Tab{title="Pestaña 1"} Algo de contenido para la Pestaña 1 :::hint{type="info" attributes="{"style":"info"}"} ¡Las pull requests son muy bienvenidas! Por favor consulta CONTRIBUTING.md para más información. Esto es realmente agradable ::: - [x] Esta es una lista de casillas - [x] Esta es una lista de casillas - [ ] Esto está hecho - [ ] Esta es una lista de casillas :::: :::Tab{title="Pestaña Fotos"} ::Image[]{src="https://placehold.co/600x400" size="50" isUploading="false" darkWidth="600" darkHeight="400" width="600" height="400" showCaption="false"} Nos encantaría que contribuyerasaaa ::: ::::: Alternativamente, usa este estilo de Markdown para generar un bloque de pestañas. ```markdown {% tabs %} {% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %} {% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %} {% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %} {% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %} {% endtabs %} ``` Consulta la página [Usar atajos de Markdown](docId\:iDVlcwlUG5-qfm2aML3NE) para ver más atajos de markdown para otros bloques. ## Ejemplos Ver en [página de división vertical, secciones de ejemplo.](docId:6412zoIr6FhQUN1LafZmp) *** ::::LinkArray :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"} :FontAwesome[]{icon="fa-solid fa-cubes"} ** Encontrar otros bloques** Descubre nuevas formas y bloques para crear páginas de documentación impresionantes y funcionales. [Revisa todos los bloques](docId\:G2gQexIsuE2XnVGU6PWsT) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} :FontAwesome[]{icon="fa-solid fa-headset"}** ¿Necesitas ayuda? ⬇️** Usa la **burbuja** **de chat azul **en la esquina inferior derecha. O prueba el **Chat IA** (desde el cuadro de búsqueda) para respuestas rápidas. ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"} :FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}** Tu opinión importa** Usa el formulario de comentarios a continuación, de forma anónima. O haz una pregunta en la **sección de preguntas y respuestas** y nuestro equipo o la IA te dará una solución. ::: ::::