OrbitTabs

Tabs con subrayado — cada tab dibuja su propia línea inferior de 2px cuando está activo (color.primary.500, el mismo lima que Orbit reserva para selección/foco), en vez de un indicador único que se desliza — evita la máquina de medición de layout extra que necesitaría un indicador compartido. Sin cambio de fondo, los tabs quedan planos.

Uso

En web, los tabs son hijos <orbit-tab value="..."> en el DOM liviano.

PreviewCódigoAjustes

Web

<orbit-tabs value="preview">
  <orbit-tab value="preview">Preview</orbit-tab>
  <orbit-tab value="code">Código</orbit-tab>
  <orbit-tab value="settings">Ajustes</orbit-tab>
</orbit-tabs>

Compose Multiplatform

var tab by remember { mutableStateOf("preview") }
OrbitTabs(
    tabs = listOf("preview", "code", "settings"),
    selected = tab,
    onSelectedChange = { tab = it },
    tabLabel = { mapOf("preview" to "Preview", "code" to "Código", "settings" to "Ajustes").getValue(it) },
)

Props

Prop	Tipo	Default	Descripción
tabs (Kotlin) / hijos <orbit-tab> (web)	List<T>	—	Los tabs disponibles.
selected / attr value	T	—	Tab activo.
onSelectedChange / evento orbit-change	(T) => void	—	Se dispara al elegir un tab.
tabLabel (Kotlin)	(T) => string	toString()	Cómo renderizar cada tab.