Por defecto #
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Modal", versión: 12.0.1, del sistema de diseño DESY
Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.
Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
<!-- modal -->
<div id="default-example" class="mt-16 sm:mt-0 relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
<h2 id="label-default-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1">
Aviso
</h2>
<p class="c-p my-base text-center">
Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.
</p>
<div class="flex flex-wrap gap-sm w-full justify-center">
<div class="mt-sm">
<!-- button -->
<button class="c-button c-button--primary">
De acuerdo, continuar
</button>
<!-- /button -->
</div>
</div>
<div class="absolute top-0 right-0 p-sm lg:p-base">
<button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar la ventana emergente" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation">
<path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor" />
</svg>
</button>
</div>
</div>
<!-- /modal -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Modal", versión: 12.0.1, del sistema de diseño DESY
Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
"id": "default-example",
"title": {
"text": "Aviso"
},
"description": {
"text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
},
"itemsPrimary": [
{
"text": "De acuerdo, continuar",
"classes": "c-button--primary"
}
],
"isDismissible": true
}) }}Aviso
Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.
Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
"id": "default-example",
"title": {
"text": "Aviso"
},
"description": {
"text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
},
"itemsPrimary": [
{
"text": "De acuerdo, continuar",
"classes": "c-button--primary"
}
],
"isDismissible": true
}) }}