desy-html 11.2.0 → 12.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/_global.foot.njk +1 -1
- package/docs/_macro.example-render.njk +62 -18
- package/docs/ds/_ds.section.textos.njk +1 -1
- package/docs/index.html +10 -0
- package/docs/pagina-prueba.html +2 -2
- package/package.json +2 -2
- package/src/css/component.text.css +0 -1
- package/src/js/aria/utils.js +80 -15
- package/src/js/desy-html.js +239 -196
- package/src/js/filters/filter-caller.js +4 -2
- package/src/js/filters/filter-escape-ltgt.js +7 -0
- package/src/js/filters/filter-quotes.js +50 -0
- package/src/js/filters/filter-version.js +8 -0
- package/src/js/filters/index.js +7 -1
- package/src/templates/components/accordion/_examples.accordion.njk +107 -107
- package/src/templates/components/accordion/_template.accordion.njk +5 -5
- package/src/templates/components/accordion-history/_examples.accordion-history.njk +119 -119
- package/src/templates/components/accordion-history/_template.accordion-history.njk +11 -11
- package/src/templates/components/alert/_examples.alert.njk +2 -2
- package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +4 -4
- package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +4 -4
- package/src/templates/components/button/_examples.button.njk +19 -19
- package/src/templates/components/button/_template.button.njk +2 -2
- package/src/templates/components/button-loader/_examples.button-loader.njk +17 -17
- package/src/templates/components/button-loader/_template.button-loader.njk +2 -2
- package/src/templates/components/card/_examples.card.njk +3 -3
- package/src/templates/components/card/_template.card.njk +4 -4
- package/src/templates/components/character-count/_examples.character-count.njk +2 -2
- package/src/templates/components/checkboxes/_examples.checkboxes.njk +6 -6
- package/src/templates/components/checkboxes/_template.checkboxes.njk +2 -2
- package/src/templates/components/collapsible/_examples.collapsible.njk +4 -4
- package/src/templates/components/collapsible/_template.collapsible.njk +1 -1
- package/src/templates/components/date-input/_template.date-input.njk +1 -1
- package/src/templates/components/datepicker/_examples.datepicker.njk +45 -62
- package/src/templates/components/datepicker/_styles.datepicker.css +4 -0
- package/src/templates/components/datepicker/_template.datepicker.njk +10 -2
- package/src/templates/components/description-list/_examples.description-list.njk +3 -3
- package/src/templates/components/description-list/_template.description-list.njk +2 -2
- package/src/templates/components/details/_examples.details.njk +3 -3
- package/src/templates/components/details/_template.details.njk +1 -1
- package/src/templates/components/dialog/_examples.dialog.njk +4 -4
- package/src/templates/components/dropdown/_examples.dropdown.njk +31 -17
- package/src/templates/components/dropdown/_template.dropdown.njk +1 -1
- package/src/templates/components/error-message/_examples.error-message.njk +1 -1
- package/src/templates/components/error-message/_template.error-message.njk +1 -1
- package/src/templates/components/error-summary/_template.error-summary.njk +2 -2
- package/src/templates/components/fieldset/_examples.fieldset.njk +3 -3
- package/src/templates/components/fieldset/_template.fieldset.njk +7 -7
- package/src/templates/components/footer/_examples.footer.njk +32 -32
- package/src/templates/components/footer/_template.footer.njk +6 -6
- package/src/templates/components/header/_examples.header.njk +14 -8
- package/src/templates/components/header/_template.header.header__navigation.njk +2 -2
- package/src/templates/components/header/_template.header.header__offcanvasButton.njk +1 -1
- package/src/templates/components/header/_template.header.header__subnav.njk +1 -1
- package/src/templates/components/header/_template.header.njk +2 -2
- package/src/templates/components/header-advanced/_examples.header-advanced.njk +14 -8
- package/src/templates/components/header-advanced/_template.header-advanced.njk +3 -3
- package/src/templates/components/header-mini/_examples.header-mini.njk +3 -3
- package/src/templates/components/header-mini/_template.header-mini.njk +2 -2
- package/src/templates/components/hint/_examples.hint.njk +1 -1
- package/src/templates/components/hint/_template.hint.njk +1 -1
- package/src/templates/components/input/_examples.input.njk +7 -7
- package/src/templates/components/input-group/_examples.input-group.njk +1 -1
- package/src/templates/components/input-group/_template.input-group.njk +1 -1
- package/src/templates/components/item/_examples.item.njk +23 -23
- package/src/templates/components/item/_template.item.njk +9 -9
- package/src/templates/components/label/_examples.label.njk +2 -2
- package/src/templates/components/label/_template.label.njk +1 -1
- package/src/templates/components/links-list/_examples.links-list.njk +29 -32
- package/src/templates/components/links-list/_template.links-list.njk +11 -11
- package/src/templates/components/listbox/_examples.listbox.njk +16 -16
- package/src/templates/components/listbox/_template.listbox.njk +3 -3
- package/src/templates/components/media-object/_examples.media-object.njk +5 -5
- package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +16 -16
- package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +2 -2
- package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +6 -6
- package/src/templates/components/menu-navigation/_template.menu-navigation.njk +4 -4
- package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +8 -8
- package/src/templates/components/menu-vertical/_template.menu-vertical.njk +9 -9
- package/src/templates/components/menubar/_examples.menubar.njk +16 -16
- package/src/templates/components/menubar/_template.menubar.njk +7 -7
- package/src/templates/components/modal/_examples.modal.njk +18 -18
- package/src/templates/components/modal/_template.modal.njk +8 -8
- package/src/templates/components/nav/_examples.nav.njk +7 -7
- package/src/templates/components/nav/_template.nav.njk +2 -2
- package/src/templates/components/notification/_examples.notification.njk +9 -9
- package/src/templates/components/notification/_template.notification.njk +11 -11
- package/src/templates/components/pagination/_examples.pagination.njk +6 -6
- package/src/templates/components/pagination/_template.pagination.njk +3 -3
- package/src/templates/components/pill/_examples.pill.njk +8 -8
- package/src/templates/components/pill/_template.pill.njk +3 -3
- package/src/templates/components/radios/_examples.radios.njk +2 -2
- package/src/templates/components/radios/_template.radios.njk +1 -1
- package/src/templates/components/select/_examples.select.njk +1 -1
- package/src/templates/components/skip-link/_examples.skip-link.njk +1 -1
- package/src/templates/components/skip-link/_template.skip-link.njk +1 -1
- package/src/templates/components/status/_examples.status.njk +1 -1
- package/src/templates/components/status/_template.status.njk +1 -1
- package/src/templates/components/status-item/_examples.status-item.njk +15 -15
- package/src/templates/components/status-item/_template.status-item.njk +3 -3
- package/src/templates/components/table/_examples.table.njk +3 -3
- package/src/templates/components/table/_template.table.njk +2 -2
- package/src/templates/components/table-advanced/_examples.table-advanced.njk +7 -7
- package/src/templates/components/table-advanced/_template.table-advanced.njk +5 -5
- package/src/templates/components/tabs/_examples.tabs.njk +19 -19
- package/src/templates/components/tabs/_styles.tabs.css +2 -2
- package/src/templates/components/tabs/_template.tabs.njk +7 -7
- package/src/templates/components/textarea/_examples.textarea.njk +2 -2
- package/src/templates/components/toggle/_examples.toggle.njk +29 -29
- package/src/templates/components/toggle/_template.toggle.njk +2 -2
- package/src/templates/components/tooltip/_examples.tooltip.njk +11 -11
- package/src/templates/components/tooltip/_template.tooltip.njk +3 -3
- package/src/templates/components/tree/_examples.tree.njk +12 -60
- package/src/templates/components/tree/_template.tree.njk +4 -4
- package/src/templates/includes/_test-include.njk +2 -2
- package/src/templates/pages/_page.footer.njk +1 -1
- package/src/templates/pages/_template.logged-selector-subheader.njk +1 -1
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
"name": "con estado activo",
|
|
37
|
-
"description":
|
|
37
|
+
"description": "Simula activar la pseudo-clase de CSS <code>:active</code>. En realidad sólo se usa para documentar estos ejemplos.",
|
|
38
38
|
"data": {
|
|
39
39
|
"id": "with-active-state",
|
|
40
40
|
"text": "Activo",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
},
|
|
69
69
|
{
|
|
70
70
|
"name": "con estado hover",
|
|
71
|
-
"description":
|
|
71
|
+
"description": "Simula activar la pseudo-clase de CSS <code>:hover</code>. En realidad sólo se usa para documentar estos ejemplos.",
|
|
72
72
|
"data": {
|
|
73
73
|
"id": "with-hover-state",
|
|
74
74
|
"text": "Hover",
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
},
|
|
103
103
|
{
|
|
104
104
|
"name": "con estado focus",
|
|
105
|
-
"description":
|
|
105
|
+
"description": "Simula activar la pseudo-clase de CSS <code>:focus</code>. En realidad sólo se usa para documentar estos ejemplos.",
|
|
106
106
|
"data": {
|
|
107
107
|
"id": "with-focus-state",
|
|
108
108
|
"text": "Focus",
|
|
@@ -479,7 +479,7 @@
|
|
|
479
479
|
},
|
|
480
480
|
{
|
|
481
481
|
"name": "con item activo",
|
|
482
|
-
"description":
|
|
482
|
+
"description": "Podemos seleccionar inicialmente un item si le añadimos el parámetro <code>'active': true</code>. También puedes usar con javascript la función global <code>activateItemListBox(elementMenu, activeItemId)</code> para seleccionar un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemListBox('listbox', 'with-active-item-listbox-item-2')</code> para seleccionar el segundo item de este ejemplo.",
|
|
483
483
|
"data": {
|
|
484
484
|
"id": "with-active-item",
|
|
485
485
|
"text": "con item activo",
|
|
@@ -516,7 +516,7 @@
|
|
|
516
516
|
},
|
|
517
517
|
{
|
|
518
518
|
"name": "Permite selecciones múltiples",
|
|
519
|
-
"description":
|
|
519
|
+
"description": "Usa el parámetro <code>'isMultiselectable': true</code>. En este caso al seleccionar un item el elemento no se cerrará. También puedes usar con javascript la función global <code>activateItemListBox(elementMenu, activeItemId)</code> para seleccionar varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemListBox('listbox-multiple', ['is-multiselectable-listbox-item-2', 'is-multiselectable-listbox-item-3'])</code> para seleccionar el segundo y el tercer item de este ejemplo.",
|
|
520
520
|
"data": {
|
|
521
521
|
"id": "is-multiselectable",
|
|
522
522
|
"isMultiselectable": true,
|
|
@@ -553,7 +553,7 @@
|
|
|
553
553
|
},
|
|
554
554
|
{
|
|
555
555
|
"name": "Cambia el texto del botón",
|
|
556
|
-
"description":
|
|
556
|
+
"description": "Usa el parámetro <code>'doesChangeButtonText': true</code> para hacer que el texto del botón se actualice al seleccionar un item. Si <code>'doesChangeButtonText': true</code>, entonces no tiene efecto",
|
|
557
557
|
"data": {
|
|
558
558
|
"id": "does-change-button-text",
|
|
559
559
|
"text": "Opción 1",
|
|
@@ -596,15 +596,15 @@
|
|
|
596
596
|
"items": [
|
|
597
597
|
{
|
|
598
598
|
"href": "#",
|
|
599
|
-
"html":
|
|
599
|
+
"html": "Opción 1 <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline ml-sm' aria-label='Archivo' focusable='false' role='img'><g id='new-file--empty-common-file-content'><path id='Subtract' fill='currentColor' fill-rule='evenodd' d='M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z' clip-rule='evenodd'></path></g></svg>"
|
|
600
600
|
},
|
|
601
601
|
{
|
|
602
602
|
"href": "#",
|
|
603
|
-
"html":
|
|
603
|
+
"html": "Opción 2 <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline ml-sm' aria-label='Link' focusable='false' role='img'><g id='link-chain--create-hyperlink-link-make-unlink-connection-chain'><path id='Union-1' fill='currentColor' fill-rule='evenodd' d='M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z' clip-rule='evenodd'></path></g></svg>"
|
|
604
604
|
},
|
|
605
605
|
{
|
|
606
606
|
"href": "#",
|
|
607
|
-
"html":
|
|
607
|
+
"html": "Opción 3 <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline ml-sm' aria-label='Solicitud' focusable='false' role='img'><g id='clipboard-text--edition-form-task-checklist-edit-clipboard'><path id='Union-2' fill='currentColor' fill-rule='evenodd' d='M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z' clip-rule='evenodd'></path></g></svg>"
|
|
608
608
|
}
|
|
609
609
|
]
|
|
610
610
|
}
|
|
@@ -620,32 +620,32 @@
|
|
|
620
620
|
"items": [
|
|
621
621
|
{
|
|
622
622
|
"href": "#",
|
|
623
|
-
"html":
|
|
623
|
+
"html": "Actuaciones previas/preparatorias <p class='text-xs font-normal pointer-events-none'>Consulta previa, actos preparatorios de expediente, bases reguladoras...</p>",
|
|
624
624
|
"classes": "flex-wrap"
|
|
625
625
|
},
|
|
626
626
|
{
|
|
627
627
|
"href": "#",
|
|
628
|
-
"html":
|
|
628
|
+
"html": "Inicio de la tramitación <p class='text-xs font-normal pointer-events-none'>Solicitud, subsanación, declaración responsable, aprobación expediente...</p>",
|
|
629
629
|
"classes": "flex-wrap"
|
|
630
630
|
},
|
|
631
631
|
{
|
|
632
632
|
"href": "#",
|
|
633
|
-
"html":
|
|
633
|
+
"html": "Otros trámites en fase de inicio <p class='text-xs font-normal pointer-events-none'>Documentos que no se puedan asociar a ningún otro tramite en fase de inicio</p>",
|
|
634
634
|
"classes": "flex-wrap"
|
|
635
635
|
},
|
|
636
636
|
{
|
|
637
637
|
"href": "#",
|
|
638
|
-
"html":
|
|
638
|
+
"html": "Participación pública <p class='text-xs font-normal pointer-events-none'>Información pública, alegaciones, audiencia...</p>",
|
|
639
639
|
"classes": "flex-wrap"
|
|
640
640
|
},
|
|
641
641
|
{
|
|
642
642
|
"href": "#",
|
|
643
|
-
"html":
|
|
643
|
+
"html": "Informes sectoriales <p class='text-xs font-normal pointer-events-none'>Informes sectoriales que se emiten en la tramitación por órganos distintos del instructor...</p>",
|
|
644
644
|
"classes": "flex-wrap"
|
|
645
645
|
},
|
|
646
646
|
{
|
|
647
647
|
"href": "#",
|
|
648
|
-
"html":
|
|
648
|
+
"html": "Valoración/Prueba/Licitación <p class='text-xs font-normal pointer-events-none'>Informe de valoración, documentos técnicos de evaluación, peticiones de prueba, documentos fase de licitación, informes propuesta...</p>",
|
|
649
649
|
"classes": "flex-wrap"
|
|
650
650
|
}
|
|
651
651
|
]
|
|
@@ -653,7 +653,7 @@
|
|
|
653
653
|
},
|
|
654
654
|
{
|
|
655
655
|
"name": "Menú abierto o cerrado con Javascript",
|
|
656
|
-
"description":
|
|
656
|
+
"description": "Podemos abrir o cerrar un menú usando con javascript la función global <code>toggleMenuListbox(elementMenu, open)</code> para abrir o cerrar un menú, usando su id. El parámetro <code>open</code> admite <code>true</code> o <code>false</code>, si le pasamos <code>true</code> abrirá el menú, y si le pasamos <code>false</code> cerrará el menú. Ej: Abre la consola del navegador y escribe <code>toggleMenuListbox('listbox-javascript', true)</code> para abrir el menú de este ejemplo.",
|
|
657
657
|
"data": {
|
|
658
658
|
"id": "with-active-unactive-item",
|
|
659
659
|
"text": "con item activo",
|
|
@@ -59,7 +59,7 @@ treat it as an interactive element - without this it will be
|
|
|
59
59
|
{% endif %}
|
|
60
60
|
{% set commonItemAttributes %}{% if id %} id="{{ id }}"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
|
|
61
61
|
<li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.active %} aria-selected="true"{% endif -%} {{- commonItemAttributes | safe }}>
|
|
62
|
-
{{ item.html | safe if item.html else item.text }}
|
|
62
|
+
{{ item.html | filterquotes | safe if item.html else item.text }}
|
|
63
63
|
</li>
|
|
64
64
|
{% endif %}
|
|
65
65
|
{% endfor %}
|
|
@@ -70,14 +70,14 @@ treat it as an interactive element - without this it will be
|
|
|
70
70
|
{% if params.label %}
|
|
71
71
|
<div id="{{ params.id }}-label" class="mb-sm {%- if params.label.classes %} {{ params.label.classes }}{% endif %}">
|
|
72
72
|
{% if params.label.html %}
|
|
73
|
-
{{ params.label.html | safe}}
|
|
73
|
+
{{ params.label.html | filterquotes | safe}}
|
|
74
74
|
{% else %}
|
|
75
75
|
<p>{{ params.label.text }}</p>
|
|
76
76
|
{% endif %}
|
|
77
77
|
</div>
|
|
78
78
|
{% endif %}
|
|
79
79
|
<button {{- commonAttributes | safe }} >
|
|
80
|
-
<span class="inline-flex self-center max-w-xs align-middle truncate">{%- if conditionalValue %} {{ conditionalValue }}{% else %}{{ params.html | safe if params.html else params.text }}{% endif %}</span>
|
|
80
|
+
<span class="inline-flex self-center max-w-xs align-middle truncate">{%- if conditionalValue %} {{ conditionalValue }}{% else %}{{ params.html | filterquotes | safe if params.html else params.text }}{% endif %}</span>
|
|
81
81
|
{# Indentation is intentional to output HTML nicely #}
|
|
82
82
|
{{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
|
|
83
83
|
</button>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
{
|
|
4
4
|
"name": "por defecto",
|
|
5
5
|
"data": {
|
|
6
|
-
"figureHtml": "<div class
|
|
6
|
+
"figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
|
|
7
7
|
"caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
|
|
8
8
|
}
|
|
9
9
|
},
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"name": "invertido",
|
|
12
12
|
"data": {
|
|
13
13
|
"reverse": true,
|
|
14
|
-
"figureHtml": "<div class
|
|
14
|
+
"figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
|
|
15
15
|
"caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
|
|
16
16
|
}
|
|
17
17
|
},
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"name": "figure centrado verticalmente",
|
|
20
20
|
"data": {
|
|
21
21
|
"center": true,
|
|
22
|
-
"figureHtml": "<div class
|
|
22
|
+
"figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
|
|
23
23
|
"caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
|
|
24
24
|
}
|
|
25
25
|
},
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"name": "clases añadiendo padding y margin",
|
|
28
28
|
"description": "Lo más habitual es añadir clases para dar estilos al componente, el figure y los elementos de contenido.",
|
|
29
29
|
"data": {
|
|
30
|
-
"figureHtml": "<div class
|
|
30
|
+
"figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
|
|
31
31
|
"figureClasses": "mr-base",
|
|
32
32
|
"contentClasses": "text-sm",
|
|
33
33
|
"caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"description": "Lo más habitual es añadir clases para dar estilos al componente, el figure y los elementos de contenido.",
|
|
40
40
|
"data": {
|
|
41
41
|
"reverse": true,
|
|
42
|
-
"figureHtml": "<div class
|
|
42
|
+
"figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
|
|
43
43
|
"figureClasses": "ml-base",
|
|
44
44
|
"contentClasses": "text-sm",
|
|
45
45
|
"caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
"name": "con item activo",
|
|
66
|
-
"description":
|
|
66
|
+
"description": "Añade active: true a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuHorizontal(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuHorizontal('mi-menu-horizontal', 'menu-item-2')</code> para desactivar el item actual y activar el segundo item de este ejemplo.",
|
|
67
67
|
"data": {
|
|
68
68
|
"items": [
|
|
69
69
|
{
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
],
|
|
91
91
|
"attributes": {
|
|
92
92
|
"aria-label": "Menu horizontal",
|
|
93
|
-
"id":"mi-menu-horizontal"
|
|
93
|
+
"id": "mi-menu-horizontal"
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
},
|
|
@@ -135,15 +135,15 @@
|
|
|
135
135
|
"items": [
|
|
136
136
|
{
|
|
137
137
|
"href": "#",
|
|
138
|
-
"html":
|
|
138
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Archivo' focusable='false' role='img'><g id='new-file--empty-common-file-content'><path id='Subtract' fill='currentColor' fill-rule='evenodd' d='M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z' clip-rule='evenodd'></path></g></svg> Opción 1"
|
|
139
139
|
},
|
|
140
140
|
{
|
|
141
141
|
"href": "#",
|
|
142
|
-
"html":
|
|
142
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Link' focusable='false' role='img'><g id='link-chain--create-hyperlink-link-make-unlink-connection-chain'><path id='Union-1' fill='currentColor' fill-rule='evenodd' d='M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z' clip-rule='evenodd'></path></g></svg> Opción 2"
|
|
143
143
|
},
|
|
144
144
|
{
|
|
145
145
|
"href": "#",
|
|
146
|
-
"html":
|
|
146
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Solicitud' focusable='false' role='img'><g id='clipboard-text--edition-form-task-checklist-edit-clipboard'><path id='Union-2' fill='currentColor' fill-rule='evenodd' d='M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z' clip-rule='evenodd'></path></g></svg> Opción 3"
|
|
147
147
|
}
|
|
148
148
|
],
|
|
149
149
|
"attributes": {
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
156
|
"name": "con clases de css aplicadas: tipo enlaces",
|
|
157
|
-
"description":
|
|
157
|
+
"description": "Clase modificadora aplicada: <code>.c-menu-horizontal--links</code>",
|
|
158
158
|
"data": {
|
|
159
159
|
"classes": "c-menu-horizontal--links",
|
|
160
160
|
"items": [
|
|
@@ -189,7 +189,7 @@
|
|
|
189
189
|
},
|
|
190
190
|
{
|
|
191
191
|
"name": "con clases de css aplicadas: con separadores y texto pequeño",
|
|
192
|
-
"description":
|
|
192
|
+
"description": "Clase modificadora aplicada: <code>.c-menu-horizontal--links</code>. Clases aplicadas a cada item para cambiar el padding y añadir un borde lateral.",
|
|
193
193
|
"data": {
|
|
194
194
|
"classes": "c-menu-horizontal--links",
|
|
195
195
|
"items": [
|
|
@@ -229,7 +229,7 @@
|
|
|
229
229
|
},
|
|
230
230
|
{
|
|
231
231
|
"name": "con clases de css aplicadas: navigation bar",
|
|
232
|
-
"description":
|
|
232
|
+
"description": "Clase modificadora aplicada: <code>.c-menu-horizontal--navigation-bar</code>",
|
|
233
233
|
"data": {
|
|
234
234
|
"classes": "c-menu-horizontal--navigation-bar",
|
|
235
235
|
"items": [
|
|
@@ -264,7 +264,7 @@
|
|
|
264
264
|
},
|
|
265
265
|
{
|
|
266
266
|
"name": "con clases de css aplicadas: navigation bar con scroll horizontal",
|
|
267
|
-
"description":
|
|
267
|
+
"description": "Clases modificadora aplicadas: <code>.c-menu-horizontal--navigation-bar</code> y <code>.c-menu-horizontal--scroll</code>. Te advertimos que esta aplicación suele dar problemas de accesibilidad y la incluimos para evitar problemas en anchuras muy pequeñas. Asegúrate que los items no desbordan en las anchuras más habituales o bien usa el ejemplo anterior.",
|
|
268
268
|
"data": {
|
|
269
269
|
"classes": "c-menu-horizontal--navigation-bar c-menu-horizontal--scroll",
|
|
270
270
|
"items": [
|
|
@@ -327,7 +327,7 @@
|
|
|
327
327
|
},
|
|
328
328
|
{
|
|
329
329
|
"name": "con clases de css aplicadas: tabs en escritorio",
|
|
330
|
-
"description":
|
|
330
|
+
"description": "Clase modificadora aplicada: <code>.c-menu-horizontal--tabs</code>",
|
|
331
331
|
"data": {
|
|
332
332
|
"classes": "c-menu-horizontal--tabs",
|
|
333
333
|
"items": [
|
|
@@ -362,22 +362,22 @@
|
|
|
362
362
|
},
|
|
363
363
|
{
|
|
364
364
|
"name": "con clases aplicadas: tabs en móvil",
|
|
365
|
-
"description":
|
|
365
|
+
"description": "Clases modificadoras aplicadas: <code>.c-menu-horizontal--tabs-mobile</code> y <code>.c-menu-horizontal--scroll</code>. Te advertimos que esta aplicación suele dar problemas de accesibilidad y la incluimos para evitar problemas en anchuras muy pequeñas. Asegúrate que los items no desbordan en las anchuras más habituales.",
|
|
366
366
|
"data": {
|
|
367
367
|
"classes": "c-menu-horizontal--tabs-mobile c-menu-horizontal--scroll",
|
|
368
368
|
"items": [
|
|
369
369
|
{
|
|
370
370
|
"href": "#",
|
|
371
|
-
"html":
|
|
371
|
+
"html": "<span class='flex flex-col items-center'><span class='block'><svg class='w-6 h-6 mb-xs' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-hidden='true' focusable='false' width='1em' height='1em'><g transform='scale(2)'><circle cx='2.5' cy='4' r='2.5' fill='currentColor'/><path d='M8.5 5H23a1 1 0 0 0 0-2H8.5a1 1 0 0 0 0 2Z' fill='currentColor'/><circle cx='2.5' cy='12' r='2.5' fill='currentColor'/><path d='M23 11H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z' fill='currentColor'/><circle cx='2.5' cy='20' r='2.5' fill='currentColor'/><path d='M23 19H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z' fill='currentColor'/></g></svg></span><span class='block text-sm'>Seguimiento</span></span>"
|
|
372
372
|
},
|
|
373
373
|
{
|
|
374
374
|
"href": "#",
|
|
375
|
-
"html":
|
|
375
|
+
"html": "<span class='flex flex-col items-center'><span class='block'><svg class='w-6 h-6 mb-xs' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M11 8h3.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2ZM11 12h7.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2Z' fill='currentColor' transform='scale(2)'/><path d='M23.71 5.71 18.29.29a1 1 0 0 0-.7-.29H8a2 2 0 0 0-2 2v11.17c0 .19.1.33.25.33h1.5a.25.25 0 0 0 .25-.25v-11A.25.25 0 0 1 8.25 2h8.82a.31.31 0 0 1 .18.07l4.68 4.68a.31.31 0 0 1 .07.18v12.82a.25.25 0 0 1-.25.25h-6a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H22a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7Z' fill='currentColor' transform='scale(2)'/><path d='M13 15H6a1 1 0 0 1-.8-.4l-.9-1.2a1 1 0 0 0-.8-.4H1a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Z' fill='currentColor' transform='scale(2)'/></svg></span><span class='block text-sm'>Documentos</span></span>",
|
|
376
376
|
"active": true
|
|
377
377
|
},
|
|
378
378
|
{
|
|
379
379
|
"href": "#",
|
|
380
|
-
"html":
|
|
380
|
+
"html": "<span class='flex flex-col items-center'><span class='block'><svg class='w-6 h-6 mb-xs' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM19.5 22h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h1.75a.25.25 0 0 1 .25.25V13a.5.5 0 0 0 .31.46.47.47 0 0 0 .54-.11l2-2a.27.27 0 0 1 .36 0l2 2a.47.47 0 0 0 .35.15.43.43 0 0 0 .19 0 .5.5 0 0 0 .25-.5V2.25a.25.25 0 0 1 .25-.25H15a.49.49 0 0 1 .36.15l4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5Z' fill='currentColor' transform='scale(2)'/></svg></span><span class='block text-sm'>Notificaciones</span></span>"
|
|
381
381
|
}
|
|
382
382
|
],
|
|
383
383
|
"attributes": {
|
|
@@ -388,7 +388,7 @@
|
|
|
388
388
|
},
|
|
389
389
|
{
|
|
390
390
|
"name": "con idPrefix",
|
|
391
|
-
"description":
|
|
391
|
+
"description": "Mostrar código para ver el <code>idPrefix</code> aplicado",
|
|
392
392
|
"data": {
|
|
393
393
|
"idPrefix": "site-menu-item",
|
|
394
394
|
"items": [
|
|
@@ -420,7 +420,7 @@
|
|
|
420
420
|
},
|
|
421
421
|
{
|
|
422
422
|
"name": "con ids individuales",
|
|
423
|
-
"description":
|
|
423
|
+
"description": "Mostrar código para ver los <code>id</code> aplicados",
|
|
424
424
|
"data": {
|
|
425
425
|
"items": [
|
|
426
426
|
{
|
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
{% if item.active %}
|
|
19
19
|
<a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
|
|
20
20
|
{%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif -%} {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} aria-current="page" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
21
|
-
<strong class="flex items-center pointer-events-none font-bold">{{ item.html | safe if item.html else item.text }}</strong>
|
|
21
|
+
<strong class="flex items-center pointer-events-none font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
|
|
22
22
|
</a>
|
|
23
23
|
{% else %}
|
|
24
24
|
<a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
|
|
25
25
|
{%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif -%} {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
26
26
|
<span class="flex items-center pointer-events-none">
|
|
27
|
-
{{ item.html | safe if item.html else item.text }}
|
|
27
|
+
{{ item.html | filterquotes | safe if item.html else item.text }}
|
|
28
28
|
</span>
|
|
29
29
|
</a>
|
|
30
30
|
{% endif %}
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
},
|
|
107
107
|
{
|
|
108
108
|
"name": "con item activo",
|
|
109
|
-
"description":
|
|
109
|
+
"description": "Añade <code>active: true</code> a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuNavigation('mi-menu', 'with-active-item-example-3')</code> para desactivar el item actual y activar el tercer item de este ejemplo.",
|
|
110
110
|
"data": {
|
|
111
111
|
"idPrefix": "with-active-item-example",
|
|
112
112
|
"items": [
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
},
|
|
133
133
|
{
|
|
134
134
|
"name": "con sub-item activo",
|
|
135
|
-
"description":
|
|
135
|
+
"description": "Añade <code>active: true</code> a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateSubItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateSubItemMenuNavigation('mi-sub-menu', 'sub-active-sub-item-example-2-2')</code> para desactivar el sub-item actual y activar el tercer sub-item de este ejemplo.",
|
|
136
136
|
"data": {
|
|
137
137
|
"idPrefix": "with-active-sub-item-example",
|
|
138
138
|
"items": [
|
|
@@ -261,7 +261,7 @@
|
|
|
261
261
|
"href": "#",
|
|
262
262
|
"text": "Item 2",
|
|
263
263
|
"divider": {
|
|
264
|
-
"html":
|
|
264
|
+
"html": "<div class='absolute h-11 border-l border-neutral-base'></div>"
|
|
265
265
|
}
|
|
266
266
|
},
|
|
267
267
|
{
|
|
@@ -827,7 +827,7 @@
|
|
|
827
827
|
},
|
|
828
828
|
{
|
|
829
829
|
"name": "con estilos de cabecera",
|
|
830
|
-
"description":
|
|
830
|
+
"description": "Un Menu navigation puede estar anidado en <code>customNavigationHtml</code> en el componente Header. Añade <code>active: true</code> a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateSubItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateSubItemMenuNavigation('mi-menu-header', 'sub-header-custom-nav-item-1-1')</code> para desactivar el sub-item actual y activar el primer sub-item del primer item de este ejemplo.",
|
|
831
831
|
"data": {
|
|
832
832
|
"idPrefix": "header-custom-nav",
|
|
833
833
|
"classes": "bg-neutral-lighter c-menu-navigation--last-right w-full",
|
|
@@ -940,7 +940,7 @@
|
|
|
940
940
|
},
|
|
941
941
|
{
|
|
942
942
|
"name": "con idPrefix",
|
|
943
|
-
"description":
|
|
943
|
+
"description": "Mostrar código para ver el <code>idPrefix</code> aplicado",
|
|
944
944
|
"data": {
|
|
945
945
|
"idPrefix": "with-id-prefix-example",
|
|
946
946
|
"items": [
|
|
@@ -1136,7 +1136,7 @@
|
|
|
1136
1136
|
{
|
|
1137
1137
|
"text": "Padre con divisor",
|
|
1138
1138
|
"divider": {
|
|
1139
|
-
"html":
|
|
1139
|
+
"html": "<div class='absolute h-11 border-l border-neutral-base'></div>"
|
|
1140
1140
|
},
|
|
1141
1141
|
"id": "with-sub-items-1",
|
|
1142
1142
|
"sub": {
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
<li class="relative">
|
|
28
28
|
{% if item.href %}
|
|
29
29
|
<a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} role="link" aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
30
|
-
<span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | safe if item.html else item.text }}</span>
|
|
30
|
+
<span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | filterquotes | safe if item.html else item.text }}</span>
|
|
31
31
|
</a>
|
|
32
32
|
{% else %}
|
|
33
33
|
<button {%- if item.sub %} aria-expanded="true" aria-haspopup="true" aria-controls="{{ id }}-sub-list"{% endif %}
|
|
34
|
-
{%- if id %} id="{{ id }}"{% endif %} class="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{% if item.active %}<span class="sr-only">Item activo: </span>{% endif %}<span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | safe if item.html else item.text }}</span>
|
|
34
|
+
{%- if id %} id="{{ id }}"{% endif %} class="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{% if item.active %}<span class="sr-only">Item activo: </span>{% endif %}<span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | filterquotes | safe if item.html else item.text }}</span>
|
|
35
35
|
{# Indentation is intentional to output HTML nicely #}
|
|
36
36
|
{{- iconHtml | safe | trim if iconHtml -}}
|
|
37
37
|
</button>
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
{% set commonSubItemAttributes %}{% if subId %} id="{{ subId }}"{% else %} id="subitem-{{ loop.index }}"{% endif %} {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
|
|
51
51
|
<li>
|
|
52
52
|
<a {%- if subitem.active %} aria-current="page"{% endif %} href="{{ subitem.href }}" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if subitem.classes %} {{ subitem.classes }}{% endif -%} {%- if subitem.disabled %} pointer-events-none{% endif -%}" {%- if subitem.disabled %} tabindex="-1"{% endif -%} {%- if subitem.target %} target="{{ subitem.target }}"{% endif %} {{- commonSubItemAttributes | safe }}>
|
|
53
|
-
{{ subitem.html | safe if subitem.html else subitem.text }}
|
|
53
|
+
{{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
|
|
54
54
|
{% if subitem.disabled %}
|
|
55
55
|
<svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle flex-initial ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
|
|
56
56
|
{% endif %}
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
{% if item.divider %}
|
|
71
71
|
<li {%- if item.divider.classes %} class="{{ item.divider.classes }}"{% endif %} role="presentation" aria-hidden="true">
|
|
72
72
|
{% if item.divider.html %}
|
|
73
|
-
{{ item.divider.html | safe }}
|
|
73
|
+
{{ item.divider.html | filterquotes | safe }}
|
|
74
74
|
{% else %}
|
|
75
75
|
{{ item.divider.text }}
|
|
76
76
|
{% endif %}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
},
|
|
49
49
|
{
|
|
50
50
|
"name": "con item activo",
|
|
51
|
-
"description":
|
|
51
|
+
"description": "Añade <code>active: true</code> a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuVertical(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuVertical('mi-menu', 'active-item-3')</code> para desactivar el item actual y activar el tercer item de este ejemplo.",
|
|
52
52
|
"data": {
|
|
53
53
|
"idPrefix": "active-item",
|
|
54
54
|
"items": [
|
|
@@ -335,7 +335,7 @@
|
|
|
335
335
|
},
|
|
336
336
|
{
|
|
337
337
|
"name": "con hasUnderline, con deshabilitado o sin href en un padre e hijo",
|
|
338
|
-
"description":
|
|
338
|
+
"description": "Usa <code>'hasUnderline': true</code> cuando tienes mezclados, items deshabilitados o sin href e items normales.",
|
|
339
339
|
"data": {
|
|
340
340
|
"idPrefix": "nav-item-without-href",
|
|
341
341
|
"hasUnderline": true,
|
|
@@ -453,15 +453,15 @@
|
|
|
453
453
|
"items": [
|
|
454
454
|
{
|
|
455
455
|
"href": "#",
|
|
456
|
-
"html":
|
|
456
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Archivo' focusable='false' role='img'><g id='new-file--empty-common-file-content'><path id='Subtract' fill='currentColor' fill-rule='evenodd' d='M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z' clip-rule='evenodd'></path></g></svg> Opción 1"
|
|
457
457
|
},
|
|
458
458
|
{
|
|
459
459
|
"href": "#",
|
|
460
|
-
"html":
|
|
460
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Link' focusable='false' role='img'><g id='link-chain--create-hyperlink-link-make-unlink-connection-chain'><path id='Union-1' fill='currentColor' fill-rule='evenodd' d='M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z' clip-rule='evenodd'></path></g></svg> Opción 2"
|
|
461
461
|
},
|
|
462
462
|
{
|
|
463
463
|
"href": "#",
|
|
464
|
-
"html":
|
|
464
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Solicitud' focusable='false' role='img'><g id='clipboard-text--edition-form-task-checklist-edit-clipboard'><path id='Union-2' fill='currentColor' fill-rule='evenodd' d='M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z' clip-rule='evenodd'></path></g></svg> Opción 3"
|
|
465
465
|
}
|
|
466
466
|
],
|
|
467
467
|
"attributes": {
|
|
@@ -472,7 +472,7 @@
|
|
|
472
472
|
},
|
|
473
473
|
{
|
|
474
474
|
"name": "con idPrefix",
|
|
475
|
-
"description":
|
|
475
|
+
"description": "Mostrar código para ver el <code>idPrefix</code> aplicado",
|
|
476
476
|
"data": {
|
|
477
477
|
"idPrefix": "site-menu-item",
|
|
478
478
|
"items": [
|
|
@@ -504,7 +504,7 @@
|
|
|
504
504
|
},
|
|
505
505
|
{
|
|
506
506
|
"name": "con ids individuales",
|
|
507
|
-
"description":
|
|
507
|
+
"description": "Mostrar código para ver los <code>id</code> aplicados",
|
|
508
508
|
"data": {
|
|
509
509
|
"items": [
|
|
510
510
|
{
|
|
@@ -692,7 +692,7 @@
|
|
|
692
692
|
"href": "#",
|
|
693
693
|
"text": "Con HTML dentro",
|
|
694
694
|
"sub": {
|
|
695
|
-
"html":
|
|
695
|
+
"html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p><p>Este es otro párrafo.</p>"
|
|
696
696
|
}
|
|
697
697
|
},
|
|
698
698
|
{
|