'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Acciones
SelectionBar
Una barra que aparece mientras hay elementos seleccionados: la cantidad, acciones sobre la selección y una forma de quitarla. Flotando abajo de la pantalla, o en línea sobre una lista o tabla.
import { SelectionBar } from '@alea/ui';
Ejemplos
Selección
Selecciona algunos archivos: la barra aparece con la cantidad y las acciones, Escape o la X la quitan. variant="inline" la pone sobre la lista en lugar de flotar abajo de la pantalla.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-accent-subtle…--alea-chip-bg…--alea-chip-text…--alea-text…
Space
--alea-space-2…--alea-space-6…
Radius
--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-weight-semibold…
Shadow
--alea-shadow-pop…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Layer
--alea-z-sticky…
Props
SelectionBar props
Una barra que aparece mientras hay elementos seleccionados, con la cantidad, acciones sobre ellos y una forma de quitar la selección. Una barra de herramientas (un grupo de acciones); la cantidad se anuncia cuando cambia; Escape quita la selección.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | Acciones sobre la selección: Archivar, Eliminar, Mover (Buttons o IconButtons pequeños). |
countobligatoria | number | - | Cuántos elementos están seleccionados; en 0 la barra se oculta. |
onClearobligatoria | () => void | - | Quita la selección (el botón X y Escape). |
className | string | - | Clases extra. |
label | ((count: number) => ReactNode) | - | El texto con la cantidad. Por defecto "3 elegidos". |
variant | "inline" | "floating" | 'floating' | floating (centrada abajo de la pantalla, por defecto) o inline (donde la pongas, como una barra sobre una tabla). |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
variantinlinefloating- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-selbar.alea-selbar-inner.alea-selbar-count.alea-selbar-sep.alea-selbar-actions- Atributos data
data-variant=floatingdata-variant=inlinedata-visible
Accesibilidad
- Una barra de herramientas llamada "Selección"; su cantidad es un estado, así los lectores de pantalla escuchan "3 elegidos" cuando cambia.
- Escape quita la selección; el botón de quitar tiene nombre.
- Mientras no hay nada seleccionado la barra está oculta e inerte, así nunca ocupa una parada de Tab.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Recorre las acciones |
| Escape | Borra la selección |
Qué hacer y qué evitar
Hacer
- Nombra las acciones por lo que hacen con la selección: Archivar, Mover a, Eliminar.
- Pon las acciones destructivas al final, y confírmalas.
Evitar
- No muestres más de cuatro o cinco acciones: pon el resto en un menú Más.
- No tapes el contenido que se está seleccionando: deja espacio abajo de la página.
En Figma
SelectionBar con Variant (Floating, Inline), una cantidad y un slot de acciones.