Todos los componentes (204)

Selector de hueco

Fechas y hora · SlotPicker · .amset-slots

Qué es y cuándo usarlo

Pedir cita: los días arriba, con cuántos huecos libres le quedan a cada uno, y las horas del día elegido debajo, partidas en mañana, tarde y noche. Arranca en el primer día que tiene algo libre, no en uno lleno.

Cuándo usarlo

Reservar una cita, una recogida o una visita entre huecos que da el servidor.
note en un hueco para lo que cambia algo («Solo online», «Con recargo»): se lee junto a la hora.
Los huecos con busy se enseñan igual, apagados y tachados: ver que el día se llena es información.

Cuándo no

Una hora libre, sin huecos cerrados: TimeField.
Solo el día: Calendar o DatePicker.
Ver lo que ya hay en la agenda: MonthAgenda.

Teclado: son dos listas y Tab pasa de una a otra, con el foco entrando en lo que ya está elegido. Las flechas arriba y abajo recorren la secuencia entera, salte de fila o no; las laterales se quedan dentro de su fila, así que al final de una se paran. Inicio y Fin van al primero y al último, y escribir salta al que empieza por esas letras. Intro o Espacio eligen. Los días llenos y los huecos ocupados se saltan: no se tragan el foco y no se pueden elegir, ni con el teclado.

Accesibilidad: el bloque es una sección con el nombre de label; las listas se llaman «Día» y «Hora del miércoles, 23 de septiembre», y cada franja es un grupo con su título. Cada día se llama entero, con lo que le queda («miércoles, 23 de septiembre, 3 huecos libres», «…, 1 hueco libre», «…, sin huecos libres»), y cada hora, con su nota separada por una coma. El tachado de los ocupados acompaña al apagado para no depender solo del color. Cambiar de día no mueve el foco, así que una región status dice lo que queda («3 huecos libres el miércoles, 23 de septiembre») o la cita elegida. Las cifras y los plurales salen del idioma. Con disabled la raíz lleva aria-disabled.

Estados de días y horas: al pasar el ratón se sombrean y el borde se oscurece; al pulsar ceden un poco; lo elegido va relleno de acento. Un día sin huecos y una hora ocupada van apagados y tachados, fuera del recorrido. Con disabled, todo apagado pero sin tachar (no es que esté lleno) y lo elegido se sigue viendo, en gris oscuro. El foco de teclado es un anillo de 2 px: por fuera en las horas y por dentro, doble, en la tira de días, que se desplaza y recorta lo que sobresale.

Movimiento: los colores y los bordes cambian con una transición corta, y al cambiar de día sus horas entran de nuevo con un fundido, sin que el foco salga de la tira de días.

Tamaños: sm, md (por defecto) y lg: horas de 30, 36 o 44 px de alto como mínimo y tarjetas de día y letra a juego. Con el dedo ninguna hora baja de 44 px; las tarjetas de día ya miden más. A 320 px la tira de días se desplaza dentro de su caja y las horas se reparten en las columnas que quepan.

Aspecto fino: variables CSS en .amset-slots:

Medidas: --amset-slots-height (el de cada hora), --amset-slots-column (ancho mínimo de una hora), --amset-slots-day-width, --amset-slots-day-padding, --amset-slots-slot (entre la tira, las horas y el estado), --amset-slots-radius y --amset-slots-target.
Letra: --amset-slots-number (el día del mes), --amset-slots-font (la hora), --amset-slots-description (semana, mes, cuántos, títulos y notas) y --amset-slots-state.
Colores: --amset-slots-background, --amset-slots-border, --amset-slots-selected y --amset-slots-selected-ink.

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se escriben los días.

Cómo se ve

2 huecos libres el miércoles, 7 de octubre

<SlotPicker
  label="Elige una cita"
  days={dias}
  value={hueco}
  onChange={setHueco}
/>

Props

Se importa con import { SlotPicker } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`days`obligatoria	`readonly AgendaDay[]`	—
`label`obligatoria	`string`	De que es la cita. Obligatoria: nombra el bloque entero.
`onChange`obligatoria	`(slot: SelectedSlot) => void`	—
`value`obligatoria	`SelectedSlot \| null`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	Todo apagado: se ve lo que hay y la cita elegida, pero no se puede cambiar.
`empty`	`string`	Texto cuando el dia visible no tiene ni un hueco.
`size`	`"sm" \| "md" \| "lg"`	Las horas de 30, 36 o 44 px de alto (`sm`, `md`, `lg`) y las tarjetas de los dias y la letra a juego. Con el dedo, ninguna hora baja de 44 px.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-slots-height`	`var(--amset-height-control)`
`--amset-slots-column`	`5rem`
`--amset-slots-day-width`	`4rem`
`--amset-slots-day-padding`	`var(--amset-space-2) var(--amset-space-3)`
`--amset-slots-number`	`var(--amset-text-lg)`
`--amset-slots-font`	`var(--amset-text-base)`
`--amset-slots-description`	`var(--amset-text-xs)`
`--amset-slots-state`	`var(--amset-text-sm)`
`--amset-slots-slot`	`var(--amset-space-4)`
`--amset-slots-radius`	`var(--amset-radius)`
`--amset-slots-target`	`1.5rem`
`--amset-slots-background`	`var(--amset-surface)`
`--amset-slots-border`	`var(--amset-border)`
`--amset-slots-selected`	`var(--amset-accent)`
`--amset-slots-selected-ink`	`var(--amset-accent-ink)`

Cómo se cambia

.amset-slots {
  --amset-slots-height: ...;
  --amset-slots-column: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: