# Ejemplo de código de Pestañas. DESY. Sistema de diseño del Gobierno de Aragón. ## Componentes Índice de páginas Componentes # Pestañas Mostrar y ocultar Menú horizontal que permite visualizar distintos paneles con información, permaneciendo en la misma página. # Tabs Mostrar parámetros ## Parámetros Nunjucks del componente: "Tabs" ```yaml params: - name: id type: string required: false description: This is used for the main component and to compose id attribute for each item. - name: idPrefix type: string required: false description: String to prefix id for each tab item if no id is specified on each item - name: title type: string required: true description: Title for the tabs table of contents - name: headingLevel type: number required: false description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on. - name: tablistClasses type: string required: false description: Classes to add to the role=tablist element - name: tablistAriaLabel type: string required: true description: aria-label for the role=tablist element - name: items type: array required: true description: Array of tab items. params: - name: id type: string required: true description: Specific id attribute for the tab item. If omitted, then `idPrefix` string is required instead. - name: text type: string required: true description: If `html` is set, this is not required. Text to use within each tab label. If `html` is provided, the `text` argument will be ignored. - name: html type: string required: true description: If `text` is set, this is not required. HTML to use within the each tab label. If `html` is provided, the `text` argument will be ignored. - name: disabled type: boolean required: false description: If true, nav item will be disabled. - name: active type: boolean required: false description: If true, tab item will be selected at start. - name: attributes type: object required: false description: HTML attributes (for example data attributes) to add to the tab. - name: panel description: Content for the panel type: object required: true params: - name: text type: string required: true description: If `html` is set, this is not required. Text to use within each tab panel. If `html` is provided, the `text` argument will be ignored. - name: html type: string required: true description: If `text` is set, this is not required. HTML to use within the each tab panel. If `html` is provided, the `text` argument will be ignored. - name: classes type: string required: false description: Classes to add to the tab panel. - name: attributes type: object required: false description: HTML attributes (for example data attributes) to add to the tab panel. - name: classes type: string required: false description: Classes to add to the tabs component. - name: attributes type: object required: false description: HTML attributes (for example data attributes) to add to the tabs component. ``` ### Por defecto [#](#por-defecto) Mostrar códigodel ejemplo: Por defecto #### Contenido Nunjucks macro HTML ##### Nunjucks macro ```js {% from "components/tabs/_macro.tabs.njk" import componentTabs %} {{ componentTabs({ "tablistAriaLabel": "Ejemplo de tab", "idPrefix": "tab-example", "items": [ { "text": "Tab 1", "panel": { "html": "

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

" } }, { "text": "Tab 2", "panel": { "html": "

Panel 2. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 3", "panel": { "html": "

Panel 3. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 4", "panel": { "html": "

Panel 4. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } } ], "attributes": { "id": "tabs-default" } }) }} ``` ##### HTML ```html

Contenido

Tab 1

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

``` ### Con encabezado [#](#con-encabezado) Usa el parámetro `'headingLevel'` para establecer el nivel del encabezado. Por ejemplo: `'headingLevel': 3` creará un encabezado `

`. Mostrar códigodel ejemplo: Con encabezado #### Contenido Nunjucks macro HTML ##### Nunjucks macro ```js {% from "components/tabs/_macro.tabs.njk" import componentTabs %} {{ componentTabs({ "title": "Título con h3", "headingLevel": 3, "tablistAriaLabel": "headingLevel example", "idPrefix": "headinglevel-example", "items": [ { "text": "Tab 1 con h4", "panel": { "html": "

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

" } }, { "text": "Tab 2 con h4", "panel": { "html": "

Panel 2. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 3 con h4", "panel": { "html": "

Panel 3. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 4 con h4", "panel": { "html": "

Panel 4. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } } ] }) }} ``` ##### HTML ```html

Título con h3

Tab 1 con h4

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

``` ### Con html en tabs [#](#con-html-en-tabs) Mostrar códigodel ejemplo: Con html en tabs #### Contenido Nunjucks macro HTML ##### Nunjucks macro ```js {% from "components/tabs/_macro.tabs.njk" import componentTabs %} {{ componentTabs({ "tablistAriaLabel": "Ejemplo de tab", "idPrefix": "tab-example-html", "items": [ { "html": " Tab 1", "panel": { "html": "

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

" } }, { "html": " Tab 2", "panel": { "html": "

Panel 2. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "html": " Tab 3", "panel": { "html": "

Panel 3. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "html": " Tab 4", "panel": { "html": "

Panel 4. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } } ] }) }} ``` ##### HTML ```html

Contenido

Tab 1

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

``` ### Con item deshabilitado [#](#con-item-deshabilitado) Mostrar códigodel ejemplo: Con item deshabilitado #### Contenido Nunjucks macro HTML ##### Nunjucks macro ```js {% from "components/tabs/_macro.tabs.njk" import componentTabs %} {{ componentTabs({ "tablistAriaLabel": "Ejemplo de tab", "idPrefix": "tab-example-disabled", "items": [ { "text": "Tab 1", "panel": { "html": "

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

" } }, { "text": "Tab 2", "disabled": true, "panel": { "html": "

Panel 2. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 3", "panel": { "html": "

Panel 3. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 4", "panel": { "html": "

Panel 4. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } } ] }) }} ``` ##### HTML ```html

Contenido

Tab 1

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

``` ### Con item activo [#](#con-item-activo) Añade `active: true` a una tab para mostrarla activa inicialmente. También puedes usar con javascript la función global `activateItemTabs(elementMenu, idItemSeleccionado)` para seleccionar una tab y su panel, usando sus ids. Ej: Abre la consola del navegador y escribe `activateItemTabs('tabs-active', 'tab-example-active-3')` para desactivar la tab actual y activar la tercera tab de este ejemplo. Mostrar códigodel ejemplo: Con item activo #### Contenido Nunjucks macro HTML ##### Nunjucks macro ```js {% from "components/tabs/_macro.tabs.njk" import componentTabs %} {{ componentTabs({ "tablistAriaLabel": "Ejemplo de tab", "idPrefix": "tab-example-active", "items": [ { "text": "Tab 1", "panel": { "html": "

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

" } }, { "text": "Tab 2", "panel": { "html": "

Panel 2. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 3", "panel": { "html": "

Panel 3. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 4", "active": true, "panel": { "html": "

Panel 4. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } } ], "attributes": { "id": "tabs-active" } }) }} ``` ##### HTML ```html

Contenido

Tab 1

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

``` ### Con muchos items [#](#con-muchos-items) Mostrar códigodel ejemplo: Con muchos items #### Contenido Nunjucks macro HTML ##### Nunjucks macro ```js {% from "components/tabs/_macro.tabs.njk" import componentTabs %} {{ componentTabs({ "tablistAriaLabel": "Ejemplo de tab", "idPrefix": "tab-example-many-items", "items": [ { "text": "Tab 1", "panel": { "html": "

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

" } }, { "text": "Tab 2", "panel": { "html": "

Panel 2. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 3", "panel": { "html": "

Panel 3. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 4", "panel": { "html": "

Panel 4. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 5", "panel": { "html": "

Panel 5. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

" } }, { "text": "Tab 6", "panel": { "html": "

Panel 6. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 7", "panel": { "html": "

Panel 7. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 8", "panel": { "html": "

Panel 8. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 9", "panel": { "html": "

Panel 9. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

" } }, { "text": "Tab 10", "panel": { "html": "

Panel 10. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 11", "panel": { "html": "

Panel 11. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 12", "panel": { "html": "

Panel 12. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } } ] }) }} ``` ##### HTML ```html

Contenido

Tab 1

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

``` ### Con scroll en móvil [#](#con-scroll-en-mvil) Usa `.c-tabs--scroll` para hacer que la apariencia en móvil sea la misma que en escritorio. Prueba a mirarlo en breakpoints pequeños y verás que aparece un scroll horizontal. Mostrar códigodel ejemplo: Con scroll en móvil #### Contenido Nunjucks macro HTML ##### Nunjucks macro ```js {% from "components/tabs/_macro.tabs.njk" import componentTabs %} {{ componentTabs({ "tablistAriaLabel": "Ejemplo de tab", "idPrefix": "tab-example-scroll-mobile", "classes": "c-tabs--scroll", "items": [ { "text": "Tab 1", "panel": { "html": "

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

" } }, { "text": "Tab 2", "panel": { "html": "

Panel 2. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 3", "panel": { "html": "

Panel 3. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 4", "panel": { "html": "

Panel 4. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 5", "panel": { "html": "

Panel 5. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

" } }, { "text": "Tab 6", "panel": { "html": "

Panel 6. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 7", "panel": { "html": "

Panel 7. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 8", "panel": { "html": "

Panel 8. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 9", "panel": { "html": "

Panel 9. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

" } }, { "text": "Tab 10", "panel": { "html": "

Panel 10. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 11", "panel": { "html": "

Panel 11. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 12", "panel": { "html": "

Panel 12. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } } ] }) }} ``` ##### HTML ```html

Contenido

Tab 1

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

``` ### Con html en tabs para mobile [#](#con-html-en-tabs-para-mobile) Mostrar códigodel ejemplo: Con html en tabs para mobile #### Contenido Nunjucks macro HTML ##### Nunjucks macro ```js {% from "components/tabs/_macro.tabs.njk" import componentTabs %} {{ componentTabs({ "tablistAriaLabel": "Ejemplo de tab", "idPrefix": "tab-example-html-stacked", "classes": "c-tabs--scroll", "items": [ { "html": "Tab 1", "panel": { "html": "

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

" } }, { "html": "Tab 2", "panel": { "html": "

Panel 2. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "html": "Tab 3", "panel": { "html": "

Panel 3. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } } ], "attributes": { "id": "tabs-active-icons" } }) }} ``` ##### HTML ```html

Contenido

Tab 1

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

``` ### Con clases de css aplicadas [#](#con-clases-de-css-aplicadas) Mostrar código para ver las clases aplicadas en el HTML. Mostrar códigodel ejemplo: Con clases de css aplicadas #### Contenido Nunjucks macro HTML ##### Nunjucks macro ```js {% from "components/tabs/_macro.tabs.njk" import componentTabs %} {{ componentTabs({ "tablistAriaLabel": "Ejemplo de tab", "idPrefix": "tab-example-classes", "items": [ { "text": "Tab 1", "panel": { "html": "

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

", "classes": "bg-primary-light" } }, { "text": "Tab 2", "panel": { "html": "

Panel 2. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

", "classes": "bg-primary-light" } }, { "text": "Tab 3", "panel": { "html": "

Panel 3. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

", "classes": "bg-primary-light" } }, { "text": "Tab 4", "panel": { "html": "

Panel 4. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

", "classes": "bg-primary-light" } } ] }) }} ``` ##### HTML ```html

Contenido

Tab 1

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

``` ### Con aspecto de links list [#](#con-aspecto-de-links-list) Usa la clase `.tabs--reset` para quitar los estilos por defecto de los tabs. Luego añade una clase modificadora propia de tu proyecto, o bien, esta de este ejemplo llamada `.tabs--list` para dar estilo a los elementos. Añade estilos adicionales con los parámetros `tablistClasses` y `panel.classes` para posicionar y tener mayor control del estilo de los elementos. Mostrar códigodel ejemplo: Con aspecto de links list #### Contenido Nunjucks macro HTML ##### Nunjucks macro ```js {% from "components/tabs/_macro.tabs.njk" import componentTabs %} {{ componentTabs({ "tablistClasses": "flex flex-col col-span-2 lg:col-span-1 lg:divide-y lg:divide-neutral-base mb-base lg:mb-0", "tablistAriaLabel": "Ejemplo de tab con aspecto de links list dispuesto en horizontal", "idPrefix": "tab-links-list", "items": [ { "html": "Tab 1", "panel": { "html": "

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

", "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base" } }, { "html": "Tab 2", "panel": { "html": "

Panel 2. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

", "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base" } }, { "html": "Tab 3", "panel": { "html": "

Panel 3. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

", "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base" } }, { "html": "Tab 4", "panel": { "html": "

Panel 4. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

", "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base" } } ], "classes": "c-tabs--reset c-tabs--list grid grid-cols-2 lg:grid-cols-4 lg:gap-lg", "attributes": { "id": "tabs-list" } }) }} ``` ##### HTML ```html

Contenido

``` ### Con ids individuales [#](#con-ids-individuales) Mostrar código para ver los `id` aplicados Mostrar códigodel ejemplo: Con ids individuales #### Contenido Nunjucks macro HTML ##### Nunjucks macro ```js {% from "components/tabs/_macro.tabs.njk" import componentTabs %} {{ componentTabs({ "tablistAriaLabel": "Ejemplo de tab", "items": [ { "text": "Tab 1", "id": "tab-example-a-1", "panel": { "html": "

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

" } }, { "text": "Tab 2", "id": "tab-example-b-1", "panel": { "html": "

Panel 2. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 3", "id": "tab-example-c", "panel": { "html": "

Panel 3. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } }, { "text": "Tab 4", "id": "tab-example-d", "panel": { "html": "

Panel 4. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

" } } ] }) }} ``` ##### HTML ```html

Contenido

Tab 1

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

``` ### Ejemplo complejo [#](#ejemplo-complejo) Ejemplo de uso real en una app. Mostrar códigodel ejemplo: Ejemplo complejo #### Contenido Nunjucks macro HTML ##### Nunjucks macro ```js {% from "components/tabs/_macro.tabs.njk" import componentTabs %} {{ componentTabs({ "tablistAriaLabel": "Ejemplo de tab", "items": [ { "text": "Cambios", "id": "tab-example-a-2", "panel": { "html": "

Cambios realizados hace 2 horas

" } }, { "text": "Ver original", "id": "tab-example-b-2", "panel": { "html": "

Texto original

" } } ] }) }} ``` ##### HTML ```html

Contenido

Cambios

  • Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 18 de noviembre de 2003) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio.

    Ver detalles de la normativa

  • Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015).
    Ver detalles de la normativa

Cambios realizados hace 2 horas

```