zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): tabs (#144)

Browse Source
This commit is contained in:
Darius Cepulis
2025-10-29 12:43:03 -05:00
committed by GitHub
parent 419911f2f2
commit df4692dbda
35 changed files with 999 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/resources/time-slider.mdx
+32 -25
View File
@@ -13,7 +13,8 @@ import htmlVerticalStr from '@/examples/html/time-slider/snippet-vertical.html?r
import htmlCssStr from '@/examples/html/time-slider/time-slider.css?raw';
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
import Container from '@/components/docs/Container.astro';
import ServerCode from '@/components/ServerCode.astro';
import ServerCode from '@/components/Code/ServerCode.astro';
import { TabsRoot, TabsPanel } from '@/components/Tabs';
## Features
@@ -23,40 +24,46 @@ import ServerCode from '@/components/ServerCode.astro';
- Keyboard accessible (Arrow keys for seeking)
- Touch-friendly drag interaction
## Live Example
<Container>
<TimeSliderDemo client:load />
</Container>
## Usage
## Example
<FrameworkCase frameworks={["react"]}>
<TabsRoot
aria-label="React implementation"
titles={{ component: 'Component', css: 'CSS Module' }}
client:load
>
<TabsPanel value="component" client:load>
<ServerCode code={componentModuleStr} lang="tsx" />
</TabsPanel>
### Component
<ServerCode code={componentModuleStr} lang="tsx" />
### CSS Module
<ServerCode code={cssModuleStr} lang="css" />
<TabsPanel value="css" client:load>
<ServerCode code={cssModuleStr} lang="css" />
</TabsPanel>
<TimeSliderDemo client:load />
</TabsRoot>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
<TabsRoot
aria-label="HTML implementation"
titles={{ 'html-horizontal': 'HTML (Horizontal)', 'html-vertical': 'HTML (Vertical)', css: 'CSS' }}
client:load
>
<TabsPanel value="html-horizontal" client:load>
<ServerCode code={htmlHorizontalStr} lang="html" />
</TabsPanel>
### Horizontal Orientation
<TabsPanel value="html-vertical" client:load>
<ServerCode code={htmlVerticalStr} lang="html" />
</TabsPanel>
<ServerCode code={htmlHorizontalStr} lang="html" />
### Vertical Orientation
<ServerCode code={htmlVerticalStr} lang="html" />
### CSS
<ServerCode code={htmlCssStr} lang="css" />
<TabsPanel value="css" client:load>
<ServerCode code={htmlCssStr} lang="css" />
</TabsPanel>
<TimeSliderDemo client:load />
</TabsRoot>
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>