Por defecto #
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Input Group", 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>.
<!-- input-group -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset role="group">
<legend class="font-bold">
Documento de identidad
</legend>
<div class="flex" id="doc-identidad-1">
<!-- select -->
<div class="c-form-group mr-base">
<!-- label -->
<label class="block" for="doc-identidad-1-tipo-doc">Tipo</label>
<!-- /label -->
<select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-auto" id="doc-identidad-1-tipo-doc" name="doc-identidad-tipo-doc">
<option value="1" selected>NIF</option>
<option value="2">Pasaporte</option>
</select>
</div>
<!-- /select -->
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="doc-identidad-1-num-doc">Número</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-64" id="doc-identidad-1-num-doc" name="doc-identidad-num-doc" type="text" placeholder="Ej: 28999876V">
</div>
<!-- /input -->
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /input-group -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Input Group", 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/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
"id": "doc-identidad-1",
"namePrefix": "doc-identidad",
"fieldset": {
"legend": {
"text": "Documento de identidad"
}
},
"items": [
{
"name": "tipo-doc",
"formGroup": {
"classes": "mr-base"
},
"classes": "w-full lg:w-auto",
"label": {
"text": "Tipo"
},
"isSelect": true,
"selectItems": [
{
"value": 1,
"text": "NIF",
"selected": true
},
{
"value": 2,
"text": "Pasaporte"
}
]
},
{
"name": "num-doc",
"classes": "w-full lg:w-64",
"label": {
"text": "Número"
},
"placeholder": "Ej: 28999876V"
}
]
}) }}Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
"id": "doc-identidad-1",
"namePrefix": "doc-identidad",
"fieldset": {
"legend": {
"text": "Documento de identidad"
}
},
"items": [
{
"name": "tipo-doc",
"formGroup": {
"classes": "mr-base"
},
"classes": "w-full lg:w-auto",
"label": {
"text": "Tipo"
},
"isSelect": true,
"selectItems": [
{
"value": 1,
"text": "NIF",
"selected": true
},
{
"value": 2,
"text": "Pasaporte"
}
]
},
{
"name": "num-doc",
"classes": "w-full lg:w-64",
"label": {
"text": "Número"
},
"placeholder": "Ej: 28999876V"
}
]
}) }}