Variantes de componentes
Biblioteca con opciones para elegir el diseño de un elemento · Centro Deportivo Aurora · 15-09-2026
Cómo se usa esta página
Cada sección muestra las opciones posibles de un mismo elemento, una al lado de la otra, con lo que gana y lo que pierde cada una. Al elegir, la opción elegida pasa a ser la clase por defecto del patrón y las demás quedan como referencia. Mientras no haya elección, ninguna vista cambia: estas clases son nuevas y solo se usan aquí.
1 · Cómo se marca el calendario en la tarjeta del horario
La pregunta de la reunión: el color no debe ocupar el fondo completo (con tonos claros se pierde el texto) y hay que encontrar algo distinto a la barra lateral que usa todo el rubro. Las cuatro muestran el mismo bloque —07:00 · cupo 20— más un caso de color claro (HIIT, lima) y otro de bloque lleno.
Gana: ordena sin competir con las señales de estado (lleno, urgencia) y funciona con cualquier color. Pierde: es el recurso más visto del rubro (Pablo lo marcó).
Gana: el color rodea sin teñir ni cortar la lectura. Pierde: con 44 bloques seguidos el borde pesa; el lima sobre fondo oscuro brilla más que el resto.
Gana: el color solo toca el nombre; la hora y los cupos quedan neutros y la vista se lee como un tablero. Pierde: la etiqueta crece con nombres largos («Funcional adultos mayores»).
Gana: se nota el calendario de un vistazo y conserva el fondo oscuro donde va el texto. Pierde: el degradado ya no es un color exacto, así que un tono claro se mezcla y puede leerse como «otro» color.
HTML de cada variante (mismo bloque, cambia solo la clase del chip):
<!-- A · vigente --> <div class="chip type-cross"> … </div> <!-- B · borde de tarjeta --> <div class="chip v-borde type-cross"> … </div> <!-- C · etiqueta transparente --> <div class="chip v-badge type-cross"> … </div> <!-- D · degradado --> <div class="chip v-degradado type-cross"> … </div>
2 · Tres formatos para pedir datos sin salir de la pantalla
La reunión pidió asistente por pasos para inscribir y renovar, y evaluar sacar los datos desde abajo en lugar del panel lateral. Los tres formatos conviven: se elige por tarea, no uno para todo.
Para 1–3 campos y una confirmación. No sirve para el alta completa: 5 pasos en un modal centrado se sienten largos.
Para altas y renovaciones: una pregunta por pantalla, se ve cuánto falta y se puede volver. Es el formato que el equipo pidió como «estilo wizard».
Cobrar y renovar · Josefa Contreras
Comparado con el panel lateral: no tapa la lista, en móvil queda al alcance del pulgar y usa el ancho completo para campos anchos. Pierde: en pantallas muy altas queda lejos del encabezado, y para un detalle largo hay que empujar la página.
<!-- A · centrado --> <div class="modal-overlay is-open"><div class="modal"> … </div></div> <!-- B · asistente --> <div class="modal is-wide"> + <div class="wizard-steps"> … </div> + <div class="wizard-foot"> … </div> <!-- C · panel inferior --> <div class="sheet-bottom is-open"><span class="sheet-bottom-grab"></span><div class="sheet-bottom-head"> … </div> …</div>
3 · Elegir planes cuando el centro tiene muchos
Alejandro advirtió que hay centros con muchas páginas de planes (el caso Katsu). El panel de casillas se vuelve largo: estas son las dos salidas.
Directo y sin clics extra. Con 8 planes está bien; con 60 obliga a recorrer todo el panel para encontrar uno.
Aguanta cualquier cantidad: escribe, filtra y muestra arriba lo ya elegido. Cuesta un clic más al abrir.
<!-- A --> <label class="check"><input type="checkbox"><span class="check-box">…</span><span class="check-text">Full Mensual</span></label> <!-- B --> <div class="pick"><div class="pick-head">…<span class="pick-count">3 de 60 elegidos</span></div><div class="pick-list"><label class="pick-opt is-on">…</label></div></div>
4 · Tabla con columnas que se ocultan
«Ocultar o mostrar columnas en las tablas de datos para reducir la fatiga visual»: cada persona elige qué columnas ve y el panel recuerda su elección. Va en el botón «Columnas» de la cabecera de la tarjeta.
Alumnos activos
| Alumno | Plan | Último pago | Estado |
|---|---|---|---|
| JCJosefa Contreras | Full Mensual | $34.990 | Al día |
| MAMatías Aguirre | Prueba | — | Por vencer |
<button class="btn btn-outline"><i data-lucide="columns-3" class="nav-ico size-3"></i>Columnas<span class="badge badge-neutral ml-1"><span class="badge-dot"></span>5 de 7</span></button> <!-- panel: .dropdown-panel + un .check por columna + ítem «Volver a las columnas por defecto» -->