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
@@ -19,9 +19,10 @@ import InlineMarkdown from './InlineMarkdown.astro';
|
||||
|
||||
interface Props {
|
||||
component: string;
|
||||
partOrder?: string[];
|
||||
}
|
||||
|
||||
const { component } = Astro.props;
|
||||
const { component, partOrder } = Astro.props;
|
||||
const { framework } = Astro.params;
|
||||
if (!framework || !isValidFramework(framework)) {
|
||||
throw new Error(`Invalid or missing framework param.`);
|
||||
@@ -31,7 +32,7 @@ const entry = await getEntry('componentReference', kebabCase(component));
|
||||
const apiRef: ComponentReference | null = entry?.data ?? null;
|
||||
if (!apiRef) return;
|
||||
|
||||
const apiReferenceModel = createComponentReferenceModel(component, apiRef);
|
||||
const apiReferenceModel = createComponentReferenceModel(component, apiRef, partOrder);
|
||||
if (!apiReferenceModel) return;
|
||||
const showAttributeName = framework === 'html';
|
||||
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './BasicUsage.html?raw';
|
||||
import './BasicUsage.css';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import "./BasicUsage.ts";
|
||||
</script>
|
||||
@@ -0,0 +1,59 @@
|
||||
.html-slider-basic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.html-slider-basic__slider {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.html-slider-basic__track {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
transition: height 150ms ease;
|
||||
}
|
||||
|
||||
.html-slider-basic__slider[data-interactive] .html-slider-basic__track {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.html-slider-basic__fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: var(--media-slider-fill);
|
||||
background: white;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.html-slider-basic__thumb {
|
||||
position: absolute;
|
||||
left: var(--media-slider-fill);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%) scale(0);
|
||||
transition: transform 150ms ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.html-slider-basic__slider[data-interactive] .html-slider-basic__thumb {
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
|
||||
.html-slider-basic__slider[data-dragging] .html-slider-basic__thumb {
|
||||
transform: translateX(-50%) scale(1.1);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="html-slider-basic">
|
||||
<media-slider class="html-slider-basic__slider" value="50">
|
||||
<media-slider-track class="html-slider-basic__track">
|
||||
<media-slider-fill class="html-slider-basic__fill"></media-slider-fill>
|
||||
</media-slider-track>
|
||||
<media-slider-thumb class="html-slider-basic__thumb"></media-slider-thumb>
|
||||
</media-slider>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
import '@videojs/html/ui/slider';
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './WithPreview.html?raw';
|
||||
import './WithPreview.css';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import "./WithPreview.ts";
|
||||
</script>
|
||||
@@ -0,0 +1,81 @@
|
||||
.html-slider-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 40px 24px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.html-slider-preview__slider {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.html-slider-preview__track {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
transition: height 150ms ease;
|
||||
}
|
||||
|
||||
.html-slider-preview__slider[data-interactive] .html-slider-preview__track {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.html-slider-preview__fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: var(--media-slider-fill);
|
||||
background: white;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.html-slider-preview__thumb {
|
||||
position: absolute;
|
||||
left: var(--media-slider-fill);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%) scale(0);
|
||||
transition: transform 150ms ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.html-slider-preview__slider[data-interactive] .html-slider-preview__thumb {
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
|
||||
.html-slider-preview__slider[data-dragging] .html-slider-preview__thumb {
|
||||
transform: translateX(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
.html-slider-preview__preview {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
margin-bottom: 6px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
|
||||
.html-slider-preview__slider[data-pointing] .html-slider-preview__preview {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.html-slider-preview__value {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<div class="html-slider-preview">
|
||||
<media-slider class="html-slider-preview__slider" value="50">
|
||||
<media-slider-track class="html-slider-preview__track">
|
||||
<media-slider-fill class="html-slider-preview__fill"></media-slider-fill>
|
||||
</media-slider-track>
|
||||
<media-slider-thumb class="html-slider-preview__thumb"></media-slider-thumb>
|
||||
<media-slider-preview class="html-slider-preview__preview">
|
||||
<media-slider-value type="pointer" class="html-slider-preview__value"></media-slider-value>
|
||||
</media-slider-preview>
|
||||
</media-slider>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
import '@videojs/html/ui/slider';
|
||||
@@ -0,0 +1,59 @@
|
||||
.react-slider-basic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.react-slider-basic__slider {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.react-slider-basic__track {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
transition: height 150ms ease;
|
||||
}
|
||||
|
||||
.react-slider-basic__slider[data-interactive] .react-slider-basic__track {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.react-slider-basic__fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: var(--media-slider-fill);
|
||||
background: white;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.react-slider-basic__thumb {
|
||||
position: absolute;
|
||||
left: var(--media-slider-fill);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%) scale(0);
|
||||
transition: transform 150ms ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.react-slider-basic__slider[data-interactive] .react-slider-basic__thumb {
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
|
||||
.react-slider-basic__slider[data-dragging] .react-slider-basic__thumb {
|
||||
transform: translateX(-50%) scale(1.1);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Slider } from '@videojs/react';
|
||||
import { useState } from 'react';
|
||||
|
||||
import './BasicUsage.css';
|
||||
|
||||
export default function BasicUsage() {
|
||||
const [value, setValue] = useState(50);
|
||||
|
||||
return (
|
||||
<div className="react-slider-basic">
|
||||
<Slider.Root className="react-slider-basic__slider" value={value} onValueChange={setValue}>
|
||||
<Slider.Track className="react-slider-basic__track">
|
||||
<Slider.Fill className="react-slider-basic__fill" />
|
||||
</Slider.Track>
|
||||
<Slider.Thumb className="react-slider-basic__thumb" />
|
||||
</Slider.Root>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
.react-slider-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 40px 24px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.react-slider-preview__slider {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.react-slider-preview__track {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
transition: height 150ms ease;
|
||||
}
|
||||
|
||||
.react-slider-preview__slider[data-interactive] .react-slider-preview__track {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.react-slider-preview__fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: var(--media-slider-fill);
|
||||
background: white;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.react-slider-preview__thumb {
|
||||
position: absolute;
|
||||
left: var(--media-slider-fill);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%) scale(0);
|
||||
transition: transform 150ms ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.react-slider-preview__slider[data-interactive] .react-slider-preview__thumb {
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
|
||||
.react-slider-preview__slider[data-dragging] .react-slider-preview__thumb {
|
||||
transform: translateX(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
.react-slider-preview__preview {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
margin-bottom: 6px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
|
||||
.react-slider-preview__slider[data-pointing] .react-slider-preview__preview {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.react-slider-preview__value {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Slider } from '@videojs/react';
|
||||
import { useState } from 'react';
|
||||
|
||||
import './WithPreview.css';
|
||||
|
||||
export default function WithPreview() {
|
||||
const [value, setValue] = useState(50);
|
||||
|
||||
return (
|
||||
<div className="react-slider-preview">
|
||||
<Slider.Root className="react-slider-preview__slider" value={value} onValueChange={setValue}>
|
||||
<Slider.Track className="react-slider-preview__track">
|
||||
<Slider.Fill className="react-slider-preview__fill" />
|
||||
</Slider.Track>
|
||||
<Slider.Thumb className="react-slider-preview__thumb" />
|
||||
<Slider.Preview className="react-slider-preview__preview">
|
||||
<Slider.Value type="pointer" className="react-slider-preview__value" />
|
||||
</Slider.Preview>
|
||||
</Slider.Root>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './BasicUsage.html?raw';
|
||||
import './BasicUsage.css';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import "./BasicUsage.ts";
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
.html-tooltip-basic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 24px;
|
||||
}
|
||||
|
||||
.html-tooltip-basic__trigger {
|
||||
padding: 6px 16px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
color: black;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.html-tooltip-basic__popup {
|
||||
--media-tooltip-side-offset: 8px;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
padding: 4px 10px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="html-tooltip-basic">
|
||||
<button type="button" commandfor="tooltip-demo" class="html-tooltip-basic__trigger">Hover me</button>
|
||||
<media-tooltip id="tooltip-demo" class="html-tooltip-basic__popup">
|
||||
Tooltip content
|
||||
</media-tooltip>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
import '@videojs/html/ui/tooltip';
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './Grouping.html?raw';
|
||||
import './Grouping.css';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import "./Grouping.ts";
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
.html-tooltip-grouping {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 24px;
|
||||
}
|
||||
|
||||
.html-tooltip-grouping__trigger {
|
||||
padding: 6px 16px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
color: black;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.html-tooltip-grouping__popup {
|
||||
--media-tooltip-side-offset: 8px;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
padding: 4px 10px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
<media-tooltip-group class="html-tooltip-grouping">
|
||||
<button type="button" commandfor="tooltip-play" class="html-tooltip-grouping__trigger">Play</button>
|
||||
<media-tooltip id="tooltip-play" class="html-tooltip-grouping__popup">Play video</media-tooltip>
|
||||
|
||||
<button type="button" commandfor="tooltip-mute" class="html-tooltip-grouping__trigger">Mute</button>
|
||||
<media-tooltip id="tooltip-mute" class="html-tooltip-grouping__popup">Mute audio</media-tooltip>
|
||||
|
||||
<button type="button" commandfor="tooltip-fullscreen" class="html-tooltip-grouping__trigger">Fullscreen</button>
|
||||
<media-tooltip id="tooltip-fullscreen" class="html-tooltip-grouping__popup">Enter fullscreen</media-tooltip>
|
||||
</media-tooltip-group>
|
||||
@@ -0,0 +1,2 @@
|
||||
import '@videojs/html/ui/tooltip';
|
||||
import '@videojs/html/ui/tooltip-group';
|
||||
@@ -0,0 +1,34 @@
|
||||
.react-tooltip-basic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 24px;
|
||||
}
|
||||
|
||||
.react-tooltip-basic__trigger {
|
||||
padding: 6px 16px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
color: black;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.react-tooltip-basic__popup {
|
||||
--media-tooltip-side-offset: 8px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
padding: 4px 10px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.react-tooltip-basic__arrow {
|
||||
fill: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Tooltip } from '@videojs/react';
|
||||
|
||||
import './BasicUsage.css';
|
||||
|
||||
export default function BasicUsage() {
|
||||
return (
|
||||
<div className="react-tooltip-basic">
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger className="react-tooltip-basic__trigger">Hover me</Tooltip.Trigger>
|
||||
<Tooltip.Popup className="react-tooltip-basic__popup">
|
||||
<Tooltip.Arrow className="react-tooltip-basic__arrow" />
|
||||
Tooltip content
|
||||
</Tooltip.Popup>
|
||||
</Tooltip.Root>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
.react-tooltip-grouping {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 24px;
|
||||
}
|
||||
|
||||
.react-tooltip-grouping__trigger {
|
||||
padding: 6px 16px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
color: black;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.react-tooltip-grouping__popup {
|
||||
--media-tooltip-side-offset: 8px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
padding: 4px 10px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.react-tooltip-grouping__arrow {
|
||||
fill: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { Tooltip } from '@videojs/react';
|
||||
|
||||
import './Grouping.css';
|
||||
|
||||
export default function Grouping() {
|
||||
return (
|
||||
<div className="react-tooltip-grouping">
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger className="react-tooltip-grouping__trigger">Play</Tooltip.Trigger>
|
||||
<Tooltip.Popup className="react-tooltip-grouping__popup">
|
||||
<Tooltip.Arrow className="react-tooltip-grouping__arrow" />
|
||||
Play video
|
||||
</Tooltip.Popup>
|
||||
</Tooltip.Root>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger className="react-tooltip-grouping__trigger">Mute</Tooltip.Trigger>
|
||||
<Tooltip.Popup className="react-tooltip-grouping__popup">
|
||||
<Tooltip.Arrow className="react-tooltip-grouping__arrow" />
|
||||
Mute audio
|
||||
</Tooltip.Popup>
|
||||
</Tooltip.Root>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger className="react-tooltip-grouping__trigger">Fullscreen</Tooltip.Trigger>
|
||||
<Tooltip.Popup className="react-tooltip-grouping__popup">
|
||||
<Tooltip.Arrow className="react-tooltip-grouping__arrow" />
|
||||
Enter fullscreen
|
||||
</Tooltip.Popup>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user