Methods
Call show, hide, focus, and other imperative APIs via refs, @query, or DOM ids.
Overview
Many components expose imperative methods (show, hide, focus, open, and others). Call them on the vu-* custom element — how you obtain that reference differs per environment.
Across frameworks
| React | Vue | HTML / Lit | |
|---|---|---|---|
| Get element | useRef on the wrapper | Template ref (element or $el) | Lit @query / HTML getElementById |
| Overlays | ref.current?.show() / controlled open | Prefer v-model:open; ref for other methods | dialog.show() / hide() |
| Type hint | HTMLElementTagNameMap["vu-*"] for method signatures | ||
Examples
import { useRef } from "react";
import { VuButton } from "@velkin/react/button";
import { VuDialog } from "@velkin/react/dialog";
export function Confirm() {
const dialogRef = useRef<HTMLElementTagNameMap["vu-dialog"] | null>(null);
return (
<>
<VuButton onClick={() => dialogRef.current?.show()}>Open</VuButton>
<VuDialog ref={dialogRef as never} closable onVuClose={() => dialogRef.current?.hide()}>
<span slot="header">Hello</span>
<div slot="body">Opened with show().</div>
</VuDialog>
</>
);
}Edge cases
- Use methods for imperative overlays, focus after async work, or APIs that are awkward as props alone.
- Prefer documented props and events when they exist — for example controlled
openplus close handlers when state lives in your app. - Method names are listed on each component's Methods table. Do not invent helpers.