Cómo declarar atributos en Pug
En Pug, los atributos de las etiquetas HTML se definen utilizando paréntesis después del nombre de la etiqueta. Dentro de los paréntesis, se declaran los atributos en formato clave-valor, separados por comas.
Ejemplo básico:
a(href="https://example.com" target="_blank") EnlaceEsto se traduce en el siguiente HTML:
<a href="https://example.com" target="_blank">Enlace</a>Uso de atributos dinámicos
Si necesitas valores dinámicos o condicionales, puedes usar interpolación de variables de JavaScript dentro de los atributos, utilizando ${}.
Ejemplo:
- const isActive = true;
div(class=isActive ? 'activo' : 'inactivo') ContenidoEl código generado será:
<div class="activo">Contenido</div>Agrupación de atributos
Pug también soporta la inclusión de objetos que representan atributos. Esto es útil para manejar múltiples atributos dinámicos desde un objeto.
- const atributos = { id: "main", class: "container" };
div(...atributos) Contenedor principalEl resultado será:
<div id="main" class="container">Contenedor principal</div>Ejemplos adicionales
1. Declarar un atributo booleano:
input(type="checkbox" checked)Salida HTML:
<input type="checkbox" checked>2. Añadir un atributo con comillas simples:
img(src='imagen.jpg' alt='Descripción')3. Atributos condicionales más complejos:
button(disabled=isDisabled) BotónReferencia oficial
Para más detalles sobre el uso de atributos en Pug, visita la documentación oficial de Pug.
Jorge García
Fullstack developer