mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
76 lines
2.2 KiB
Plaintext
76 lines
2.2 KiB
Plaintext
---
|
|
title: Controls
|
|
frameworkTitle:
|
|
html: media-controls
|
|
description: Containers for composing and auto-hiding player controls
|
|
---
|
|
|
|
import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
|
|
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
|
|
import StyleCase from "@/components/docs/StyleCase.astro";
|
|
import Demo from "@/components/docs/demos/Demo.astro";
|
|
|
|
{/* React demos */}
|
|
import BasicUsageDemoReact from "@/components/docs/demos/controls/react/css/BasicUsage";
|
|
import basicUsageReactTsx from "@/components/docs/demos/controls/react/css/BasicUsage.tsx?raw";
|
|
import basicUsageReactCss from "@/components/docs/demos/controls/react/css/BasicUsage.css?raw";
|
|
|
|
{/* HTML demos */}
|
|
import BasicUsageDemoHtml from "@/components/docs/demos/controls/html/css/BasicUsage.astro";
|
|
import basicUsageHtml from "@/components/docs/demos/controls/html/css/BasicUsage.html?raw";
|
|
import basicUsageHtmlCss from "@/components/docs/demos/controls/html/css/BasicUsage.css?raw";
|
|
import basicUsageHtmlTs from "@/components/docs/demos/controls/html/css/BasicUsage.ts?raw";
|
|
|
|
## Anatomy
|
|
|
|
Import the component and assemble its parts:
|
|
|
|
<FrameworkCase frameworks={["react"]}>
|
|
```tsx
|
|
<Controls.Root>
|
|
<Controls.Group />
|
|
</Controls.Root>
|
|
```
|
|
</FrameworkCase>
|
|
|
|
<FrameworkCase frameworks={["html"]}>
|
|
```html
|
|
<media-controls>
|
|
<media-controls-group></media-controls-group>
|
|
</media-controls>
|
|
```
|
|
</FrameworkCase>
|
|
|
|
## Examples
|
|
|
|
### Basic Usage
|
|
|
|
<FrameworkCase frameworks={["react"]}>
|
|
<StyleCase styles={["css"]}>
|
|
<Demo
|
|
files={[
|
|
{ title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
|
|
{ title: "App.css", code: basicUsageReactCss, lang: "css" },
|
|
]}
|
|
>
|
|
<BasicUsageDemoReact client:idle />
|
|
</Demo>
|
|
</StyleCase>
|
|
</FrameworkCase>
|
|
|
|
<FrameworkCase frameworks={["html"]}>
|
|
<StyleCase styles={["css"]}>
|
|
<Demo
|
|
files={[
|
|
{ title: "index.html", code: basicUsageHtml, lang: "html" },
|
|
{ title: "index.css", code: basicUsageHtmlCss, lang: "css" },
|
|
{ title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
|
|
]}
|
|
>
|
|
<BasicUsageDemoHtml />
|
|
</Demo>
|
|
</StyleCase>
|
|
</FrameworkCase>
|
|
|
|
<ApiReference component="Controls" />
|