Combina elementos nativos, refs y componentes compuestos.
Liquidify usa elementos raíz nativos y semánticos. Pasa las props nativas documentadas y usa la ref para enfocar o medir el elemento. Mantén la distribución de la aplicación fuera del control.
asChildasChild no está disponible en todos los componentes. Solo se ofrece cuando el control puede transferir su comportamiento y accesibilidad a un único hijo de forma segura. Button admite esta composición:
import { Button } from "@liquidify/react"
export function DocumentationLink() {
return (
<Button asChild variant="glass">
<a href="/docs">Read the documentation</a>
</Button>
)
}El hijo determina la semántica del elemento. Proporciona exactamente un elemento y verifica el teclado. Los componentes que no admiten asChild lo rechazan mediante sus tipos.
La ref apunta a la raíz nativa, o al hijo combinado cuando se usa asChild:
import { useRef } from "react"
import { Button } from "@liquidify/react"
export function FocusExample() {
const buttonRef = useRef<HTMLButtonElement>(null)
return <Button ref={buttonRef}>Continue</Button>
}labelPropsLos componentes que generan sus propias etiquetas usan Text. Personaliza su tipografía con labelProps, sin añadir nodos con estilos propios. Esta API admite variant, weight, color, tint, tracking, transform, italic, lineHeight y wrap. Tus valores sustituyen los predeterminados del componente.
import { Toggle } from "@liquidify/react"
export function EmphasisedLabel() {
return (
<Toggle labelProps={{ variant: "headline", color: "secondary" }} defaultChecked>
Wi-Fi
</Toggle>
)
}Si pasas un elemento Text, Icon u otro nodo como etiqueta, el componente lo conserva sin envolverlo otra vez.
onPressonPress se ejecuta una vez por activación, ya sea con ratón, tacto o teclado. No recibe argumentos. Los controles con valor usan onChange: Toggle entrega un boolean, Slider un number, y TextField y Picker un string.
import { Button } from "@liquidify/react"
export function SaveAction({ onSave }: { onSave: () => void }) {
return (
<Button variant="borderedProminent" onPress={onSave}>
Guardar
</Button>
)
}Button renderiza <button type="button">. Ejecuta la acción desde onPress; no dependas del envío nativo implícito del formulario.
Algunas API incluyen una raíz con partes nombradas o listas de elementos. Respeta la estructura documentada y usa identificadores estables para menús, acciones, pestañas y otras colecciones.