mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
docs(site): add Slider and Tooltip API reference pages (#862)
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
487be3ea96
commit
7a5ce94bca
@@ -73,7 +73,7 @@ media-controls:not([data-visible]) {
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
React renders `<div>` elements with the same data attributes. Add a `className` and use it as the selector:
|
||||
React renders `<div>` elements. Add a `className` to style them:
|
||||
|
||||
```css
|
||||
/* Click-through: clicks pass through controls to video beneath */
|
||||
|
||||
@@ -53,7 +53,7 @@ media-fullscreen-button[data-fullscreen] {
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
React renders a `<button>` with the same data attributes. Add a `className` and use it as the selector:
|
||||
React renders a `<button>` element. Add a `className` to style it:
|
||||
|
||||
```css
|
||||
/* In fullscreen */
|
||||
|
||||
@@ -62,7 +62,7 @@ media-mute-button:not([data-muted]) .icon-unmuted { display: inline; }
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
React renders a `<button>` with the same data attributes. Add a `className` and use it as the selector:
|
||||
React renders a `<button>` element. Add a `className` to style it:
|
||||
|
||||
```css
|
||||
.mute-button[data-muted] .icon-muted { display: inline; }
|
||||
|
||||
@@ -53,7 +53,7 @@ media-pip-button[data-pip] {
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
React renders a `<button>` with the same data attributes. Add a `className` and use it as the selector:
|
||||
React renders a `<button>` element. Add a `className` to style it:
|
||||
|
||||
```css
|
||||
/* In PiP mode */
|
||||
|
||||
@@ -57,7 +57,7 @@ media-play-button[data-ended] .replay-icon { display: inline; }
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
React renders a `<button>` with the same data attributes. Add a `className` and use it as the selector:
|
||||
React renders a `<button>` element. Add a `className` to style it:
|
||||
|
||||
```css
|
||||
/* Paused (but not ended) */
|
||||
|
||||
@@ -78,7 +78,7 @@ media-popover {
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
React renders standard DOM elements with the same data attributes and CSS custom properties. Add a `className` and use it as the selector:
|
||||
React renders standard DOM elements. Add a `className` to style them:
|
||||
|
||||
```css
|
||||
.popover {
|
||||
|
||||
@@ -56,7 +56,7 @@ media-poster:not([data-visible]) {
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
React renders an `<img>` with the same data attributes. Add a `className` and use it as the selector:
|
||||
React renders an `<img>` element. Add a `className` to style it:
|
||||
|
||||
```css
|
||||
.poster:not([data-visible]) {
|
||||
|
||||
@@ -0,0 +1,198 @@
|
||||
---
|
||||
title: Slider
|
||||
frameworkTitle:
|
||||
html: media-slider
|
||||
description: A composable slider component with track, fill, thumb, preview, and value parts
|
||||
---
|
||||
|
||||
import ComponentReference from "@/components/docs/api-reference/ComponentReference.astro";
|
||||
import DocsLink from "@/components/docs/DocsLink.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/slider/react/css/BasicUsage";
|
||||
import basicUsageReactTsx from "@/components/docs/demos/slider/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageReactCss from "@/components/docs/demos/slider/react/css/BasicUsage.css?raw";
|
||||
|
||||
import WithPreviewDemoReact from "@/components/docs/demos/slider/react/css/WithPreview";
|
||||
import withPreviewReactTsx from "@/components/docs/demos/slider/react/css/WithPreview.tsx?raw";
|
||||
import withPreviewReactCss from "@/components/docs/demos/slider/react/css/WithPreview.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/slider/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/slider/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlCss from "@/components/docs/demos/slider/html/css/BasicUsage.css?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/slider/html/css/BasicUsage.ts?raw";
|
||||
|
||||
import WithPreviewDemoHtml from "@/components/docs/demos/slider/html/css/WithPreview.astro";
|
||||
import withPreviewHtml from "@/components/docs/demos/slider/html/css/WithPreview.html?raw";
|
||||
import withPreviewHtmlCss from "@/components/docs/demos/slider/html/css/WithPreview.css?raw";
|
||||
import withPreviewHtmlTs from "@/components/docs/demos/slider/html/css/WithPreview.ts?raw";
|
||||
|
||||
## Anatomy
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
```tsx
|
||||
<Slider.Root>
|
||||
<Slider.Track>
|
||||
<Slider.Fill />
|
||||
</Slider.Track>
|
||||
<Slider.Thumb />
|
||||
<Slider.Preview>
|
||||
<Slider.Value type="pointer" />
|
||||
</Slider.Preview>
|
||||
</Slider.Root>
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
```html
|
||||
<media-slider>
|
||||
<media-slider-track>
|
||||
<media-slider-fill></media-slider-fill>
|
||||
</media-slider-track>
|
||||
<media-slider-thumb></media-slider-thumb>
|
||||
<media-slider-preview>
|
||||
<media-slider-value type="pointer"></media-slider-value>
|
||||
</media-slider-preview>
|
||||
</media-slider>
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
## Behavior
|
||||
|
||||
The base Slider provides a generic range input. It manages value, pointer tracking, and drag interactions. Domain-specific sliders like <DocsLink slug="reference/time-slider">TimeSlider</DocsLink> and <DocsLink slug="reference/volume-slider">VolumeSlider</DocsLink> extend this with media-specific bindings.
|
||||
|
||||
The slider supports vertical orientation via the `orientation` prop (defaults to `"horizontal"`).
|
||||
|
||||
|
||||
## Styling
|
||||
|
||||
Use [CSS custom properties](#root-css-custom-properties) to position fill, thumb, and preview elements:
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
```css
|
||||
media-slider-fill {
|
||||
width: var(--media-slider-fill);
|
||||
}
|
||||
|
||||
media-slider-thumb {
|
||||
left: var(--media-slider-fill);
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
React renders standard DOM elements. Add a `className` to style them:
|
||||
|
||||
```css
|
||||
.slider-fill {
|
||||
width: var(--media-slider-fill);
|
||||
}
|
||||
|
||||
.slider-thumb {
|
||||
left: var(--media-slider-fill);
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
Style based on [interaction state](#root-data-attributes):
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
```css
|
||||
media-slider[data-interactive] media-slider-track {
|
||||
height: 6px;
|
||||
}
|
||||
media-slider[data-pointing] media-slider-preview {
|
||||
opacity: 1;
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
```css
|
||||
.slider[data-interactive] .slider-track {
|
||||
height: 6px;
|
||||
}
|
||||
.slider[data-pointing] .slider-preview {
|
||||
opacity: 1;
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
## Accessibility
|
||||
|
||||
Renders with `role="slider"` and automatic ARIA attributes (`aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext`). Override the label 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>: jump to minimum
|
||||
- <kbd>End</kbd>: jump to maximum
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic
|
||||
|
||||
A slider with track, fill, and thumb.
|
||||
|
||||
<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>
|
||||
|
||||
### With Preview
|
||||
|
||||
A slider with a pointer-tracking preview that displays the value at the current pointer position.
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo
|
||||
files={[
|
||||
{ title: "App.tsx", code: withPreviewReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: withPreviewReactCss, lang: "css" },
|
||||
]}
|
||||
>
|
||||
<WithPreviewDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo
|
||||
files={[
|
||||
{ title: "index.html", code: withPreviewHtml, lang: "html" },
|
||||
{ title: "index.css", code: withPreviewHtmlCss, lang: "css" },
|
||||
{ title: "index.ts", code: withPreviewHtmlTs, lang: "ts" },
|
||||
]}
|
||||
>
|
||||
<WithPreviewDemoHtml />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<ComponentReference component="Slider" />
|
||||
@@ -116,7 +116,7 @@ media-thumbnail[data-error] {
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
React renders a `<div>` with the same data attributes. Add a `className` and use it as the selector:
|
||||
React renders a `<div>` element. Add a `className` to style it:
|
||||
|
||||
```css
|
||||
.thumbnail[data-hidden] {
|
||||
|
||||
@@ -48,17 +48,17 @@ Use [CSS custom properties](#root-css-custom-properties) to style the fill, poin
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
```css
|
||||
media-time-slider::before {
|
||||
width: calc(var(--media-slider-fill) * 1%);
|
||||
width: var(--media-slider-fill);
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
React renders a `<div>` with the same data attributes and CSS custom properties. Add a `className` and use it as the selector:
|
||||
React renders a `<div>` element. Add a `className` to style it:
|
||||
|
||||
```css
|
||||
.time-slider::before {
|
||||
width: calc(var(--media-slider-fill) * 1%);
|
||||
width: var(--media-slider-fill);
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
@@ -0,0 +1,219 @@
|
||||
---
|
||||
title: Tooltip
|
||||
frameworkTitle:
|
||||
html: media-tooltip
|
||||
description: A tooltip component for displaying contextual labels on hover and focus
|
||||
---
|
||||
|
||||
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/tooltip/react/css/BasicUsage";
|
||||
import basicUsageReactTsx from "@/components/docs/demos/tooltip/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageReactCss from "@/components/docs/demos/tooltip/react/css/BasicUsage.css?raw";
|
||||
|
||||
import GroupingDemoReact from "@/components/docs/demos/tooltip/react/css/Grouping";
|
||||
import groupingReactTsx from "@/components/docs/demos/tooltip/react/css/Grouping.tsx?raw";
|
||||
import groupingReactCss from "@/components/docs/demos/tooltip/react/css/Grouping.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/tooltip/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/tooltip/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlCss from "@/components/docs/demos/tooltip/html/css/BasicUsage.css?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/tooltip/html/css/BasicUsage.ts?raw";
|
||||
|
||||
import GroupingDemoHtml from "@/components/docs/demos/tooltip/html/css/Grouping.astro";
|
||||
import groupingHtml from "@/components/docs/demos/tooltip/html/css/Grouping.html?raw";
|
||||
import groupingHtmlCss from "@/components/docs/demos/tooltip/html/css/Grouping.css?raw";
|
||||
import groupingHtmlTs from "@/components/docs/demos/tooltip/html/css/Grouping.ts?raw";
|
||||
|
||||
## Anatomy
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
```tsx
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger>Hover me</Tooltip.Trigger>
|
||||
<Tooltip.Popup>
|
||||
<Tooltip.Arrow />
|
||||
Label text
|
||||
</Tooltip.Popup>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
```html
|
||||
<media-tooltip-group>
|
||||
<button commandfor="my-tooltip">Hover me</button>
|
||||
<media-tooltip id="my-tooltip">Label text</media-tooltip>
|
||||
</media-tooltip-group>
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
## Behavior
|
||||
|
||||
Displays a short label anchored to a trigger element. Opens after a configurable `delay` (default 600ms) on hover or immediately on focus. Closes when the pointer leaves or focus moves away, with an optional `closeDelay`.
|
||||
|
||||
The `side` and `align` props control placement relative to the trigger. Positioning uses CSS Anchor Positioning where supported, with a JavaScript measurement fallback.
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
The component is composed from four parts: `Root` manages state and context,
|
||||
`Trigger` renders a button that activates the tooltip, `Popup` contains the label content,
|
||||
and `Arrow` renders a decorative pointer. Wrap multiple tooltips in a `Tooltip.Provider`
|
||||
to coordinate open/close timing across a group — once a tooltip becomes visible, adjacent
|
||||
tooltips open instantly within the `timeout` window, skipping the normal `delay`.
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
The `<media-tooltip>` element is the popup itself. Link it to a trigger using
|
||||
the `commandfor` attribute on any button, pointing to the tooltip's `id`. The element
|
||||
discovers its trigger automatically and manages open/close state, ARIA attributes, and
|
||||
positioning. Wrap tooltip trigger/popup pairs in `<media-tooltip-group>` to coordinate
|
||||
timing — the group's `delay`, `close-delay`, and `timeout` attributes control shared
|
||||
timing for all contained tooltips.
|
||||
</FrameworkCase>
|
||||
|
||||
## Styling
|
||||
|
||||
Use [CSS custom properties](#root-css-custom-properties) for positioning offsets:
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
```css
|
||||
media-tooltip {
|
||||
--media-tooltip-side-offset: 8px;
|
||||
--media-tooltip-align-offset: 0px;
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
React renders standard DOM elements. Add a `className` to style them:
|
||||
|
||||
```css
|
||||
.tooltip-popup {
|
||||
--media-tooltip-side-offset: 8px;
|
||||
--media-tooltip-align-offset: 0px;
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
Style based on open state and transition phases:
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
```css
|
||||
media-tooltip[data-open] {
|
||||
display: block;
|
||||
}
|
||||
media-tooltip[data-starting-style] {
|
||||
opacity: 0;
|
||||
}
|
||||
media-tooltip[data-ending-style] {
|
||||
opacity: 0;
|
||||
}
|
||||
media-tooltip[data-side="top"] {
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
media-tooltip[data-side="bottom"] {
|
||||
transform-origin: top center;
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
```css
|
||||
.tooltip-popup[data-open] {
|
||||
display: block;
|
||||
}
|
||||
.tooltip-popup[data-starting-style] {
|
||||
opacity: 0;
|
||||
}
|
||||
.tooltip-popup[data-ending-style] {
|
||||
opacity: 0;
|
||||
}
|
||||
.tooltip-popup[data-side="top"] {
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
.tooltip-popup[data-side="bottom"] {
|
||||
transform-origin: top center;
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
## Accessibility
|
||||
|
||||
The trigger receives `aria-describedby` pointing to the popup when open. The popup renders with `role="tooltip"` and `popover="manual"`. Tooltips open on focus and close when focus leaves, ensuring keyboard-only users can access the label.
|
||||
|
||||
## 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>
|
||||
|
||||
### Grouping
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
Wrap multiple tooltips in a `Tooltip.Provider` to share a delay group. Once a tooltip
|
||||
becomes visible, adjacent tooltips open instantly within the `timeout` window, skipping
|
||||
the normal `delay`.
|
||||
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo
|
||||
files={[
|
||||
{ title: "App.tsx", code: groupingReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: groupingReactCss, lang: "css" },
|
||||
]}
|
||||
>
|
||||
<GroupingDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
Wrap tooltip trigger/popup pairs in `<media-tooltip-group>` to coordinate timing. The
|
||||
group's `delay`, `close-delay`, and `timeout` attributes control shared timing for all
|
||||
contained tooltips.
|
||||
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo
|
||||
files={[
|
||||
{ title: "index.html", code: groupingHtml, lang: "html" },
|
||||
{ title: "index.css", code: groupingHtmlCss, lang: "css" },
|
||||
{ title: "index.ts", code: groupingHtmlTs, lang: "ts" },
|
||||
]}
|
||||
>
|
||||
<GroupingDemoHtml />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<ComponentReference component="Tooltip" partOrder={["provider", "root", "trigger", "popup", "arrow"]} />
|
||||
@@ -52,7 +52,7 @@ media-volume-slider::before {
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
React renders a `<div>` with the same data attributes and CSS custom properties. Add a `className` and use it as the selector:
|
||||
React renders a `<div>` element. Add a `className` to style it:
|
||||
|
||||
```css
|
||||
.volume-slider::before {
|
||||
|
||||
Reference in New Issue
Block a user