Components
Track
A themed native track primitive.
Props
Native attributes and event handlers are forwarded to the underlying track element
unless handled by the component.
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLTrackElement | null | null | Bindable reference to the underlying DOM element. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isVisible | boolean | true | Bindable visibility state. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import Track from sveltewind/components. This example shows its default styling in a usable context.
Loading...Track provides captions or other timed text inside Audio or Video. Set src to your WebVTT file. It has no visible box to style or animate.
Examples
Theme variants
Every variant available for Track in the built-in themes is shown below.
hidden — Apply the hidden variant.
Loading...visible — Apply the visible variant.
Loading...unstyled — Apply the unstyled variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally. Classes are forwarded to this configuration element; its parent provides the visible surface.
Loading...Props and behavior
Change label, srclang, default while retaining the default component styling.
Loading...Content and values
Provide different label, srclang, kind values.
Loading...