Por defecto #
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Checkboxes", 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>.
<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="default-hint">
<legend class="font-bold">
¿Cómo prefieres que te contactemos?
</legend>
<!-- hint -->
<p id="default-hint" class="block text-neutral-dark">Si lo deseas puedes seleccionar varios elementos.</p>
<!-- /hint -->
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default" name="default" type="checkbox" value="correo-electronico">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="default">Correo electrónico</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default-2" name="default" type="checkbox" value="correo-postal">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="default-2">Correo postal</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default-3" name="default" type="checkbox" value="telefono">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="default-3">Teléfono</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Checkboxes", 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/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "default",
"name": "default",
"fieldset": {
"legend": {
"text": "¿Cómo prefieres que te contactemos?"
}
},
"hint": {
"text": "Si lo deseas puedes seleccionar varios elementos."
},
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico"
},
{
"value": "correo-postal",
"text": "Correo postal"
},
{
"value": "telefono",
"text": "Teléfono"
}
]
}) }}Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "default",
"name": "default",
"fieldset": {
"legend": {
"text": "¿Cómo prefieres que te contactemos?"
}
},
"hint": {
"text": "Si lo deseas puedes seleccionar varios elementos."
},
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico"
},
{
"value": "correo-postal",
"text": "Correo postal"
},
{
"value": "telefono",
"text": "Teléfono"
}
]
}) }}