Drawer

Panel anclado a un borde que entra deslizando — misma base que OrbitModal: el fondo detrás es el contenido real de la app, desenfocado (backdrop-filter: blur en web; en Kotlin, una capa capturada del propio árbol vía OrbitTheme), no un scrim plano — así lo que queda atrás se sigue leyendo en vez de ir a negro liso. Fijo al borde derecho en vez de centrado, alto completo, sin radio del lado pegado al borde. Fondo color.surface.raised (es un panel que flota, no una OrbitCard). Entra en 180ms — la misma duración que usa el thumb de OrbitSwitch.

Nota

En web, la animación de entrada usa @starting-style (CSS moderno). Es mejora progresiva: en navegadores que no lo soportan todavía, el drawer igual aparece/desaparece correctamente, solo que sin el deslizamiento — nada se rompe.

Uso

Abrir drawer

Configuración

Ajustes del proyecto.

Web

<orbit-button id="open">Configuración</orbit-button>
<orbit-drawer id="drawer">
  <h3>Configuración</h3>
  <p>Ajustes del proyecto.</p>
</orbit-drawer>

<script>
  open.addEventListener('click', () => drawer.setAttribute('open', ''));
</script>

Compose Multiplatform

var showDrawer by remember { mutableStateOf(false) }
OrbitButton(text = "Configuración", onClick = { showDrawer = true })
OrbitDrawer(visible = showDrawer, onDismissRequest = { showDrawer = false }) {
    Text("Configuración")
    Text("Ajustes del proyecto.")
}

Props

Prop	Tipo	Default	Descripción
visible (Kotlin) / attr open (web)	boolean	false	Controla si el drawer está abierto.
onDismissRequest (Kotlin) / evento close (web)	() => void	—	Se dispara al cerrar.
width (Kotlin) / custom property --drawer-width (web)	Dp / css length	320.dp / 320px	Ancho del panel.
contentPadding (Kotlin) / custom property --drawer-content-padding (web)	Dp / css length	space.lg	Padding interno; bajalo para contenido que ya maneja su propio padding por sección (p. ej. anidar OrbitSidebar adentro para un off-canvas responsive, ver OrbitAppShell).
content (Kotlin) / children (web)	slot	—	Contenido del drawer.