Examples · prueba y copia

Examples de Ally

Ejemplos funcionales construidos con las clases y atributos públicos de Ally. Abre cada demo, interactúa con sus controles y copia el HTML para adaptarlo a tu sitio.

Abrir sitio de ejemplo Probar componentes Ver catálogo y código

Galería interactiva

Las tarjetas llevan a páginas de demostración ejecutables. Los nombres debajo coinciden con las rutas y scripts incluidos en el proyecto.

Starter

Sitio básico

Instalación mínima, layout, modal y HTML semántico.

Abrir y probar

Landing

Inicio de producto

Hero, tarjetas, CTA, navegación y footer.

Abrir ejemplo

Dashboard

Panel de auditoría

Métricas, filtros, tabla, gráfico y estados.

Abrir ejemplo

Formulario

Flujo de registro

Campos, validación, stepper y confirmación.

Abrir ejemplo

Catálogo

Componentes interactivos

Tabs, dropdown, popover, carrusel y modal.

Abrir ejemplo

Debug

Demo integrada

Componentes más motor de auditoría.

Abrir ejemplo

Sistema

Design system

Tokens, tipografía, estados y muestras.

Abrir ejemplo

Tienda

Comercio

Tarjetas, carrito, filtros y resumen de compra.

Abrir ejemplo

Contenido

Blog y artículos

Lectura, navegación, tarjetas editoriales y pie.

Abrir ejemplo

Multimedia

Galería multimedia

Galería, lightbox y controles de reproducción.

Abrir ejemplo

Startup

Nexo — Espacios para ideas

Sitio de empresa hecho con la grilla responsive, componentes y carrusel nativo de Ally.

Abrir sitio Nexo

Copia un ejemplo mínimo

Este bloque se puede pegar en un HTML después de cargar ally.min.css y ally.min.js. El botón abre y cierra un disclosure mediante teclado, mouse y lector de pantalla.

<div class="ally-dropdown">
  <button class="ally-btn ally-dropdown-trigger" type="button"
    data-ally-dropdown-trigger aria-expanded="false">Acciones</button>
  <div class="ally-dropdown-menu" data-ally-dropdown-panel hidden>
    <a href="/editar">Editar elemento</a>
    <a href="/duplicar">Duplicar elemento</a>
  </div>
</div>

Cómo probar

Abre index.html en la raíz para entrar a la documentación.
Abre un ejemplo y prueba sus controles, estados y enlaces.
Comprueba navegación con Tab, Enter, flechas y Escape donde corresponda.
Copia el snippet de un componente y pruébalo en tu propio HTML.
Las demos independientes usan archivos locales de dist/; también puedes abrirlas directamente desde el proyecto.