--- title: Pestañas slug: docs/es/PzTy2mohE6ChhqmFuGW-e description: Aprenda a usar de manera efectiva el bloque "Pestañas" en Archbee para organizar contenido, mejorar la legibilidad y optimizar la navegación con pestañas clicables y personalizables. docTags: createdAt: 2024-07-24T11:17:19.316Z --- ![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-qlzuX6ak9nYvTvfqGAc1q-20240822-125616.png) Tabs es un bloque que le permite organizar el contenido en varias secciones dentro de un solo documento. Es como un conjunto de pestañas en las que puede hacer clic para mostrar información diferente. Piénselo como una forma de crear varias páginas dentro de una sola página. ## Por qué usarlo - **Organizar contenido complejo** - Agrupe contenido relacionado en pestañas separadas para una mejor estructura y legibilidad. - **Mejorar la legibilidad** - Haga que su contenido sea más fácil de navegar y comprender. - **Ahorrar espacio** - Use eficientemente el espacio mostrando el contenido de forma secuencial en lugar de todo a la vez. - **Crear experiencias interactivas** Involucre a los usuarios permitiéndoles elegir activamente la información que desean ver. ## Cómo usar el bloque Tabs ::::::WorkflowBlock :::WorkflowBlockItem Escriba `/` para abrir el menú de bloques de Archbee ::: :::WorkflowBlockItem Busque el bloque **Pestañas** y haga clic para insertarlo ![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-eXhqk7Cgjios95U2j8it8-20240822-124946.png) ::: :::WorkflowBlockItem Personalice los nombres de sus pestañas. De forma predeterminada, el bloque se crea con 2 pestañas llamadas "Tab Name" y "Second Tab Name". Para cambiar el nombre de una pestaña, debe ingresar al modo de edición de etiqueta mediante: - Hacer doble clic en la etiqueta de la pestaña - O presionar el ícono "Edit label" ( :FontAwesome[]{icon="fa-solid fa-pen-to-square"} ) Presione guardar ( :FontAwesome[]{icon="fa-solid fa-check"} ) para actualizar la etiqueta, o presione descartar ( **↩** ) para deshacer los cambios. ::: :::::WorkflowBlockItem Siéntase libre de agregar su contenido. Puede aplicar el estilo que desee usando el [WYSIWYG Menu](#) o incluso insertar otros bloques, como: ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem Bloques básicos - [Encabezados](docId\:x4riVaxqQbCBjTnqeWqic) - [Encabezados expandibles](docId\:RLgly5f4flqxrRAhDjDwE) - [Listas](docId\:Iv2V1jy2ZEWbeh9Md8rae) - [Mesa](docId:4I3-A8CAFQERtXfW73-uR) - [Botón](docId:4zd2d0m9G0fofky_k38nm) - [Callout](docId\:Ni_uilT4CntVomYJLkRXy) - [Separador horizontal](docId\:qUBUpddaFkwdpopx-COFH) - [División vertical](docId\:eLHO__KQv-U_ndexoWlp6) - [Minitaskers](docId\:Gvu-WOpsEywknNYYAvMbp) - [Cuadrícula de enlaces](docId\:pESqvrrUdOhU5KV4dL3uF) - [Workflow](docId\:puyOfVwfns-d2ebVKwCm7) ::: :::LinkArrayItem Bloques de medios - [Archivo](docId\:qO7K2fS16-H9MPkRoLOj4) - [Imagen](docId\:ZZQ2diclLTWyF3ETR6mid) - [Video](docId:4vX_Rm34eSQrWWXtQazgj) - [Mapa](docId:9yMZb3Cmq9bE164o3fF7L) ::: :::LinkArrayItem Bloques para desarrolladores - [Editor de código: multiidioma](docId\:YOdGNReMHPWcL0frvK__I) - [Diagramas Mermaid](docId\:QU3rmnUwC_agy-Ovj0ezj) - [Ecuación TeX](docId\:iIyHvTkzJxUJiGBHaEu-m) - [Puntos finales de la API](docId\:EQ6sRUnsHkZNQMrJTE9Rk) - [OpenAPI/Swagger](docId:0jxK4icGseU52gn3K2MTV) - [Changelog](docId\:n8pK136ab0gCtnlruX9tZ) ::: :::: Además, la mayoría de nuestras integraciones funcionan dentro del bloque de pestañas. Usted puede agregar incrustaciones desde otras herramientas como Loom, Figma, Miro, Lucidcharts y más. Consulte la [Bloques incrustados.](docId\:G-ZoaKa5Gm-61gQNjdl5F) página para obtener más información. ::::: :::::: ## Markdown Aquí se muestra cómo crear una pestaña en su documento usando código markdown: :::::WorkflowBlock :::WorkflowBlockItem Comience con la línea `:::tabs`. ::: ::::WorkflowBlockItem Cada contenido de pestaña va entre los marcadores `:::tab` y `:::`. :::hint{type="warning"} **🚨 ¡Atención!** Dos puntos `:` deben colocarse en un elemento markdown padre para indicar que encierra otro elemento markdown. ::: En este caso, `:::tabs` cambiará a `::::tabs` . Asigne un título a cada pestaña con llaves como `{title="Su Nombre de Sección"}`. Este es el nombre que se mostrará en el encabezado de la pestaña. :::: :::WorkflowBlockItem Coloque el contenido deseado en esta pestaña entre esas líneas. Vea arriba los bloques permitidos para usar dentro del bloque de pestaña. Consulte la página [Usar accesos directos de Markdown](docId\:TTIZhu7Zl1J1Ii-Nsr2gq) para ver cómo usar otros bloques usando markdown. ::: :::WorkflowBlockItem Cree tantas pestañas como desee y cierre su bloque de pestañas. No olvide agregar 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="Tab 1"} Algo de contenido para Tab 1 :::hint{type="info" attributes="{"style":"info"}"} ¡Las pull requests son muy bienvenidas! Por favor vea 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="Tab Photos"} ::Image[]{src="https://placehold.co/600x400" size="50" isUploading="false" darkWidth="600" darkHeight="400" width="600" height="400" showCaption="false"} Nos encantaría que usted contribuyeraaaa ::: ::::: Alternativamente, use esta variante 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 %} ``` Consulte la página [Usar accesos directos de Markdown](docId\:TTIZhu7Zl1J1Ii-Nsr2gq) para ver más accesos directos de markdown para otros bloques. ## Ejemplos Vea en [página de división vertical, secciones de ejemplo.](docId\:eLHO__KQv-U_ndexoWlp6) *** ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"} :FontAwesome[]{icon="fa-solid fa-cubes"} ** Encuentre otros bloques** Descubra nuevas formas y bloques para crear páginas de documentación impresionantes y funcionales. [Vea todos los bloques](docId\:IzBUJGUT0bOmcbZ5hFQNX) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} :FontAwesome[]{icon="fa-solid fa-headset"}** ¿Necesita ayuda? ⬇️** Use la **burbuja** **de chat azul **en la esquina inferior derecha. O pruebe **Chat de IA** (desde el cuadro de búsqueda) para obtener 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"}** Su opinión importa** Use el siguiente formulario de comentarios, de forma anónima. O haga una pregunta en la **sección de Preguntas y Respuestas** y nuestro equipo o la IA le dará una solución. ::: ::::