OrbitDrawer

Panel anclado a un borde que entra deslizando — misma base que OrbitModal (overlay color.overlay.scrim, <dialog> real en web), pero fijo al borde derecho en vez de centrado, alto completo, sin radio del lado pegado al borde. Fondo color.surface.raised (es un OrbitPanel 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.
content (Kotlin) / children (web)	slot	—	Contenido del drawer.