mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
feat(site): add interactive getting started guide (#280)
Co-authored-by: Darius Cepulis <dcepulis@mux.com>
This commit is contained in:
Daniel Hayes
co-authored by
Darius Cepulis
Darius Cepulis
parent
0c530765d5
commit
8ed455c20a
@@ -25,38 +25,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
|
||||
## Example
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<TabsRoot client:visible>
|
||||
<TabsList client:visible label="React implementation">
|
||||
<Tab client:visible value="component" initial>Component</Tab>
|
||||
<Tab client:visible value="css">CSS Module</Tab>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="React implementation">
|
||||
<Tab client:idle value="component" initial>Component</Tab>
|
||||
<Tab client:idle value="css">CSS Module</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:visible value="component" initial>
|
||||
<TabsPanel client:idle value="component" initial>
|
||||
<ServerCode code={componentModuleStr} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="css">
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={cssModuleStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<FullscreenButtonDemo client:visible />
|
||||
<FullscreenButtonDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<TabsRoot client:visible>
|
||||
<TabsList client:visible label="HTML implementation">
|
||||
<Tab client:visible value="html" initial>HTML</Tab>
|
||||
<Tab client:visible value="css">CSS</Tab>
|
||||
<Tab client:visible value="javascript">JS</Tab>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="HTML implementation">
|
||||
<Tab client:idle value="html" initial>HTML</Tab>
|
||||
<Tab client:idle value="css">CSS</Tab>
|
||||
<Tab client:idle value="javascript">JS</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:visible value="html" initial>
|
||||
<TabsPanel client:idle value="html" initial>
|
||||
<ServerCode code={htmlStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="css">
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={htmlCssStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="javascript">
|
||||
<TabsPanel client:idle value="javascript">
|
||||
<ServerCode code={htmlJsStr} lang="js" />
|
||||
</TabsPanel>
|
||||
<FullscreenButtonDemo client:visible />
|
||||
<FullscreenButtonDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
@@ -87,6 +87,6 @@ All standard button props are supported, plus:
|
||||
- Keyboard accessible (Space/Enter)
|
||||
- Announces fullscreen state changes to screen readers
|
||||
|
||||
## Browser Support
|
||||
## Browser support
|
||||
|
||||
The FullscreenButton uses the standard Fullscreen API, which is supported in all modern browsers.
|
||||
|
||||
@@ -25,38 +25,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
|
||||
## Example
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<TabsRoot client:visible>
|
||||
<TabsList client:visible label="React implementation">
|
||||
<Tab client:visible value="component" initial>Component</Tab>
|
||||
<Tab client:visible value="css">CSS Module</Tab>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="React implementation">
|
||||
<Tab client:idle value="component" initial>Component</Tab>
|
||||
<Tab client:idle value="css">CSS Module</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:visible value="component" initial>
|
||||
<TabsPanel client:idle value="component" initial>
|
||||
<ServerCode code={componentModuleStr} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="css">
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={cssModuleStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<MuteButtonDemo client:visible />
|
||||
<MuteButtonDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<TabsRoot client:visible>
|
||||
<TabsList client:visible label="HTML implementation">
|
||||
<Tab client:visible value="html" initial>HTML</Tab>
|
||||
<Tab client:visible value="css">CSS</Tab>
|
||||
<Tab client:visible value="javascript">JS</Tab>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="HTML implementation">
|
||||
<Tab client:idle value="html" initial>HTML</Tab>
|
||||
<Tab client:idle value="css">CSS</Tab>
|
||||
<Tab client:idle value="javascript">JS</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:visible value="html" initial>
|
||||
<TabsPanel client:idle value="html" initial>
|
||||
<ServerCode code={htmlStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="css">
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={htmlCssStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="javascript">
|
||||
<TabsPanel client:idle value="javascript">
|
||||
<ServerCode code={htmlJsStr} lang="js" />
|
||||
</TabsPanel>
|
||||
<MuteButtonDemo client:visible />
|
||||
<MuteButtonDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
|
||||
@@ -25,38 +25,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
|
||||
## Example
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<TabsRoot client:visible>
|
||||
<TabsList client:visible label="React implementation">
|
||||
<Tab client:visible value="component" initial>Component</Tab>
|
||||
<Tab client:visible value="css">CSS Module</Tab>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="React implementation">
|
||||
<Tab client:idle value="component" initial>Component</Tab>
|
||||
<Tab client:idle value="css">CSS Module</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:visible value="component" initial>
|
||||
<TabsPanel client:idle value="component" initial>
|
||||
<ServerCode code={componentModuleStr} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="css">
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={cssModuleStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<PlayButtonDemo client:visible />
|
||||
<PlayButtonDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<TabsRoot client:visible>
|
||||
<TabsList client:visible label="HTML implementation">
|
||||
<Tab client:visible value="html" initial>HTML</Tab>
|
||||
<Tab client:visible value="css">CSS</Tab>
|
||||
<Tab client:visible value="javascript">JS</Tab>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="HTML implementation">
|
||||
<Tab client:idle value="html" initial>HTML</Tab>
|
||||
<Tab client:idle value="css">CSS</Tab>
|
||||
<Tab client:idle value="javascript">JS</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:visible value="html" initial>
|
||||
<TabsPanel client:idle value="html" initial>
|
||||
<ServerCode code={htmlStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="css">
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={htmlCssStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="javascript">
|
||||
<TabsPanel client:idle value="javascript">
|
||||
<ServerCode code={htmlJsStr} lang="js" />
|
||||
</TabsPanel>
|
||||
<PlayButtonDemo client:visible />
|
||||
<PlayButtonDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
|
||||
@@ -26,38 +26,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
|
||||
## Example
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<TabsRoot client:visible>
|
||||
<TabsList client:visible label="React implementation">
|
||||
<Tab client:visible value="component" initial>Component</Tab>
|
||||
<Tab client:visible value="css">CSS Module</Tab>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="React implementation">
|
||||
<Tab client:idle value="component" initial>Component</Tab>
|
||||
<Tab client:idle value="css">CSS Module</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:visible value="component" initial>
|
||||
<TabsPanel client:idle value="component" initial>
|
||||
<ServerCode code={componentModuleStr} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="css">
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={cssModuleStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<TimeSliderDemo client:visible />
|
||||
<TimeSliderDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<TabsRoot client:visible>
|
||||
<TabsList client:visible label="HTML implementation">
|
||||
<Tab client:visible value="html-horizontal" initial>HTML (Horizontal)</Tab>
|
||||
<Tab client:visible value="html-vertical">HTML (Vertical)</Tab>
|
||||
<Tab client:visible value="css">CSS</Tab>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="HTML implementation">
|
||||
<Tab client:idle value="html-horizontal" initial>HTML (Horizontal)</Tab>
|
||||
<Tab client:idle value="html-vertical">HTML (Vertical)</Tab>
|
||||
<Tab client:idle value="css">CSS</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:visible value="html-horizontal" initial>
|
||||
<TabsPanel client:idle value="html-horizontal" initial>
|
||||
<ServerCode code={htmlHorizontalStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="html-vertical">
|
||||
<TabsPanel client:idle value="html-vertical">
|
||||
<ServerCode code={htmlVerticalStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="css">
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={htmlCssStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<TimeSliderDemo client:visible />
|
||||
<TimeSliderDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
|
||||
@@ -26,38 +26,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
|
||||
## Example
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<TabsRoot client:visible>
|
||||
<TabsList client:visible label="React implementation">
|
||||
<Tab client:visible value="component" initial>Component</Tab>
|
||||
<Tab client:visible value="css">CSS Module</Tab>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="React implementation">
|
||||
<Tab client:idle value="component" initial>Component</Tab>
|
||||
<Tab client:idle value="css">CSS Module</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:visible value="component" initial>
|
||||
<TabsPanel client:idle value="component" initial>
|
||||
<ServerCode code={componentModuleStr} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="css">
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={cssModuleStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<VolumeSliderDemo client:visible />
|
||||
<VolumeSliderDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<TabsRoot client:visible>
|
||||
<TabsList client:visible label="HTML implementation">
|
||||
<Tab client:visible value="html-horizontal" initial>HTML (Horizontal)</Tab>
|
||||
<Tab client:visible value="html-vertical">HTML (Vertical)</Tab>
|
||||
<Tab client:visible value="css">CSS</Tab>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="HTML implementation">
|
||||
<Tab client:idle value="html-horizontal" initial>HTML (Horizontal)</Tab>
|
||||
<Tab client:idle value="html-vertical">HTML (Vertical)</Tab>
|
||||
<Tab client:idle value="css">CSS</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:visible value="html-horizontal" initial>
|
||||
<TabsPanel client:idle value="html-horizontal" initial>
|
||||
<ServerCode code={htmlHorizontalStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="html-vertical">
|
||||
<TabsPanel client:idle value="html-vertical">
|
||||
<ServerCode code={htmlVerticalStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:visible value="css">
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={htmlCssStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<VolumeSliderDemo client:visible />
|
||||
<VolumeSliderDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user