Pestañas
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
Escriba / para abrir el menú de bloques de Archbee
Busque el bloque Pestañas y haga clic para insertarlo
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" ( )
Presione guardar ( ) para actualizar la etiqueta, o presione descartar ( ↩ ) para deshacer los cambios.
Siéntase libre de agregar su contenido. Puede aplicar el estilo que desee usando el WYSIWYG Menu o incluso insertar otros bloques, como:
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. 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:
Comience con la línea :::tabs.
Cada contenido de pestaña va entre los marcadores :::tab y :::.
🚨 ¡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.
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 para ver cómo usar otros bloques usando markdown.
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.
## 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"}
We would love you to contributeaaa
:::
:::::Aquí está el resultado:
Algo de contenido para Tab 1
¡Las pull requests son muy bienvenidas! Por favor vea CONTRIBUTING.md para más información. Esto es realmente agradable
Esta es una lista de casillas
Esta es una lista de casillas
Esto está hecho
Esta es una lista de casillas
Alternativamente, use esta variante de Markdown para generar un bloque de pestañas.
{% 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 para ver más accesos directos de markdown para otros bloques.
Ejemplos
Encuentre otros bloques
Descubra nuevas formas y bloques para crear páginas de documentación impresionantes y funcionales.
¿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.
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.