Por defecto #
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Radios", 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>.
<!-- radios -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="default-hint">
<legend class="font-bold">
¿Quieres que te contactemos por correo electrónico?
</legend>
<!-- hint -->
<p id="default-hint" class="block text-neutral-dark">Sólo puedes seleccionar un elemento.</p>
<!-- /hint -->
<div class="c-radios" data-module="c-radios">
<div class=" c-radios__conditional-hidden ">
<div>
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 text-primary-base 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="por defecto" type="radio" value="si">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="default">Si</label>
<!-- /label -->
</div>
</div>
</div>
</div>
<div class=" c-radios__conditional-active ">
<div>
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 text-primary-base 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="por defecto" type="radio" value="no" checked>
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="default-2">No</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /radios -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Radios", 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/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
"idPrefix": "default",
"name": "por defecto",
"fieldset": {
"legend": {
"text": "¿Quieres que te contactemos por correo electrónico?"
}
},
"hint": {
"text": "Sólo puedes seleccionar un elemento."
},
"items": [
{
"value": "si",
"text": "Si"
},
{
"value": "no",
"text": "No",
"checked": true
}
]
}) }}Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
"idPrefix": "default",
"name": "por defecto",
"fieldset": {
"legend": {
"text": "¿Quieres que te contactemos por correo electrónico?"
}
},
"hint": {
"text": "Sólo puedes seleccionar un elemento."
},
"items": [
{
"value": "si",
"text": "Si"
},
{
"value": "no",
"text": "No",
"checked": true
}
]
}) }}