mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
feat(site): add TimeSlider, VolumeSlider, Popover API references (#685)
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
916f4700ae
commit
8ab596ea30
@@ -0,0 +1,127 @@
|
||||
---
|
||||
title: Popover
|
||||
frameworkTitle:
|
||||
html: media-popover
|
||||
description: A popover component for displaying contextual content anchored to a trigger
|
||||
---
|
||||
|
||||
import ComponentReference from "@/components/docs/api-reference/ComponentReference.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/popover/react/css/BasicUsage";
|
||||
import basicUsageReactTsx from "@/components/docs/demos/popover/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageReactCss from "@/components/docs/demos/popover/react/css/BasicUsage.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/popover/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/popover/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlCss from "@/components/docs/demos/popover/html/css/BasicUsage.css?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/popover/html/css/BasicUsage.ts?raw";
|
||||
|
||||
## Anatomy
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
```tsx
|
||||
<Popover.Root>
|
||||
<Popover.Trigger>Open</Popover.Trigger>
|
||||
<Popover.Popup>
|
||||
<Popover.Arrow />
|
||||
Content
|
||||
</Popover.Popup>
|
||||
</Popover.Root>
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
```html
|
||||
<media-popover>
|
||||
<button>Open</button>
|
||||
<div>Content</div>
|
||||
</media-popover>
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
## Behavior
|
||||
|
||||
Displays contextual content anchored to a trigger element. By default, opens on click and closes when clicking outside, pressing <kbd>Escape</kbd>, or when the trigger loses focus.
|
||||
|
||||
Set `openOnHover` to open on pointer hover instead of click. Use `delay` and `closeDelay` to control timing for hover interactions.
|
||||
|
||||
The `side` and `align` props control popup placement relative to the trigger. The popup repositions automatically to stay within viewport bounds.
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
In React, the component is composed from four parts: `Root` manages state,
|
||||
`Trigger` toggles the popover, `Popup` contains the content, and `Arrow`
|
||||
renders a directional arrow.
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
In HTML, the `media-popover` element wraps a trigger (first child button) and
|
||||
popup content (second child). The element manages open/close state and
|
||||
positioning automatically.
|
||||
</FrameworkCase>
|
||||
|
||||
## Styling
|
||||
|
||||
Use [CSS custom properties](#css-custom-properties) for positioning offsets:
|
||||
|
||||
```css
|
||||
media-popover {
|
||||
--media-popover-side-offset: 8px;
|
||||
--media-popover-align-offset: 0px;
|
||||
}
|
||||
```
|
||||
|
||||
Style based on open state and transition phases:
|
||||
|
||||
```css
|
||||
media-popover[data-open] .popup {
|
||||
display: block;
|
||||
}
|
||||
media-popover[data-starting-style] .popup {
|
||||
opacity: 0;
|
||||
}
|
||||
media-popover[data-ending-style] .popup {
|
||||
opacity: 0;
|
||||
}
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
The trigger receives `aria-expanded` reflecting the open state. When `modal` is set, the popup receives `aria-modal="true"`. Closing via <kbd>Escape</kbd> is enabled by default and can be disabled with `closeOnEscape={false}`.
|
||||
|
||||
## 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>
|
||||
|
||||
<ComponentReference component="Popover" />
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
title: TimeSlider
|
||||
frameworkTitle:
|
||||
html: media-time-slider
|
||||
description: A slider component for seeking through media playback time
|
||||
---
|
||||
|
||||
import ComponentReference from "@/components/docs/api-reference/ComponentReference.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 WithPartsDemoReact from "@/components/docs/demos/time-slider/react/css/WithParts";
|
||||
import withPartsReactTsx from "@/components/docs/demos/time-slider/react/css/WithParts.tsx?raw";
|
||||
import withPartsReactCss from "@/components/docs/demos/time-slider/react/css/WithParts.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import WithPartsDemoHtml from "@/components/docs/demos/time-slider/html/css/WithParts.astro";
|
||||
import withPartsHtml from "@/components/docs/demos/time-slider/html/css/WithParts.html?raw";
|
||||
import withPartsHtmlCss from "@/components/docs/demos/time-slider/html/css/WithParts.css?raw";
|
||||
import withPartsHtmlTs from "@/components/docs/demos/time-slider/html/css/WithParts.ts?raw";
|
||||
|
||||
## Anatomy
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
```tsx
|
||||
<TimeSlider.Root />
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
```html
|
||||
<media-time-slider></media-time-slider>
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
## Behavior
|
||||
|
||||
Displays and controls the current playback position. Dragging the slider seeks the media. The fill level reflects `currentTime / duration` as a percentage, and the buffer level shows how much media has been buffered.
|
||||
|
||||
Seeking is throttled via the `commitThrottle` prop (default 100ms) to avoid overwhelming the media element during drag operations.
|
||||
|
||||
## Styling
|
||||
|
||||
Use [CSS custom properties](#css-custom-properties) to style the fill, pointer, and buffer levels:
|
||||
|
||||
```css
|
||||
media-time-slider::before {
|
||||
width: calc(var(--media-slider-fill) * 1%);
|
||||
}
|
||||
```
|
||||
|
||||
Use `data-seeking` to style during active seek operations:
|
||||
|
||||
```css
|
||||
media-time-slider[data-seeking] {
|
||||
opacity: 0.8;
|
||||
}
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Renders with `role="slider"` and automatic `aria-label` of "Seek". Override with the `label` prop. Keyboard controls:
|
||||
|
||||
- <kbd>Arrow Left</kbd> / <kbd>Arrow Right</kbd>: step by `step` increment
|
||||
- <kbd>Page Up</kbd> / <kbd>Page Down</kbd>: step by `largeStep` increment
|
||||
- <kbd>Home</kbd>: seek to start
|
||||
- <kbd>End</kbd>: seek to end
|
||||
|
||||
## Examples
|
||||
|
||||
Nest sub-components for full control over the slider's DOM structure. This example includes a track, fill bar, buffer indicator, draggable thumb, and a tooltip that shows the pointed-at time.
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo
|
||||
files={[
|
||||
{ title: "App.tsx", code: withPartsReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: withPartsReactCss, lang: "css" },
|
||||
]}
|
||||
>
|
||||
<WithPartsDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo
|
||||
files={[
|
||||
{ title: "index.html", code: withPartsHtml, lang: "html" },
|
||||
{ title: "index.css", code: withPartsHtmlCss, lang: "css" },
|
||||
{ title: "index.ts", code: withPartsHtmlTs, lang: "ts" },
|
||||
]}
|
||||
>
|
||||
<WithPartsDemoHtml />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<ComponentReference component="TimeSlider" />
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
title: VolumeSlider
|
||||
frameworkTitle:
|
||||
html: media-volume-slider
|
||||
description: A slider component for controlling media playback volume
|
||||
---
|
||||
|
||||
import ComponentReference from "@/components/docs/api-reference/ComponentReference.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 WithPartsDemoReact from "@/components/docs/demos/volume-slider/react/css/WithParts";
|
||||
import withPartsReactTsx from "@/components/docs/demos/volume-slider/react/css/WithParts.tsx?raw";
|
||||
import withPartsReactCss from "@/components/docs/demos/volume-slider/react/css/WithParts.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import WithPartsDemoHtml from "@/components/docs/demos/volume-slider/html/css/WithParts.astro";
|
||||
import withPartsHtml from "@/components/docs/demos/volume-slider/html/css/WithParts.html?raw";
|
||||
import withPartsHtmlCss from "@/components/docs/demos/volume-slider/html/css/WithParts.css?raw";
|
||||
import withPartsHtmlTs from "@/components/docs/demos/volume-slider/html/css/WithParts.ts?raw";
|
||||
|
||||
## Anatomy
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
```tsx
|
||||
<VolumeSlider.Root />
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
```html
|
||||
<media-volume-slider></media-volume-slider>
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
## Behavior
|
||||
|
||||
Controls the media volume level. The slider maps its 0–100 internal range to the media's 0–1 volume scale. When the media is muted, the fill level drops to 0 regardless of the stored volume value.
|
||||
|
||||
## Styling
|
||||
|
||||
Use [CSS custom properties](#css-custom-properties) to style the fill and pointer levels:
|
||||
|
||||
```css
|
||||
media-volume-slider::before {
|
||||
width: calc(var(--media-slider-fill) * 1%);
|
||||
}
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Renders with `role="slider"` and automatic `aria-label` of "Volume". Override with the `label` prop. Keyboard controls:
|
||||
|
||||
- <kbd>Arrow Left</kbd> / <kbd>Arrow Right</kbd>: step by `step` increment
|
||||
- <kbd>Page Up</kbd> / <kbd>Page Down</kbd>: step by `largeStep` increment
|
||||
- <kbd>Home</kbd>: set volume to 0
|
||||
- <kbd>End</kbd>: set volume to max
|
||||
|
||||
## Examples
|
||||
|
||||
Nest sub-components for full control over the slider's DOM structure. This example includes a track, fill bar, draggable thumb, and a tooltip that shows the volume percentage on hover.
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo
|
||||
files={[
|
||||
{ title: "App.tsx", code: withPartsReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: withPartsReactCss, lang: "css" },
|
||||
]}
|
||||
>
|
||||
<WithPartsDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo
|
||||
files={[
|
||||
{ title: "index.html", code: withPartsHtml, lang: "html" },
|
||||
{ title: "index.css", code: withPartsHtmlCss, lang: "css" },
|
||||
{ title: "index.ts", code: withPartsHtmlTs, lang: "ts" },
|
||||
]}
|
||||
>
|
||||
<WithPartsDemoHtml />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<ComponentReference component="VolumeSlider" />
|
||||
Reference in New Issue
Block a user