mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
93 lines
3.1 KiB
Plaintext
93 lines
3.1 KiB
Plaintext
---
|
|
title: FullscreenButton
|
|
frameworkTitle:
|
|
html: fullscreen-button
|
|
description: A button component for toggling fullscreen mode
|
|
---
|
|
|
|
import { FullscreenButtonDemo } from '@/examples/react/FullscreenButton/FullscreenButtonDemo';
|
|
import componentModuleStr from '@/examples/react/FullscreenButton/BasicFullscreenButton.tsx?raw';
|
|
import cssModuleStr from '@/examples/react/FullscreenButton/FullscreenButton.module.css?raw';
|
|
import htmlStr from '@/examples/html/fullscreen-button/snippet.html?raw';
|
|
import htmlCssStr from '@/examples/html/fullscreen-button/fullscreen-button.css?raw';
|
|
import htmlJsStr from '@/examples/html/fullscreen-button/fullscreen-button.js?raw';
|
|
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
|
|
import ServerCode from '@/components/Code/ServerCode.astro';
|
|
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
|
|
|
|
## Features
|
|
|
|
- Automatically switches icons based on fullscreen state
|
|
- Works with browser Fullscreen API
|
|
- Falls back gracefully when fullscreen not supported
|
|
- Accessible keyboard navigation
|
|
|
|
## 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>
|
|
</TabsList>
|
|
<TabsPanel client:visible value="component" initial>
|
|
<ServerCode code={componentModuleStr} lang="tsx" />
|
|
</TabsPanel>
|
|
<TabsPanel client:visible value="css">
|
|
<ServerCode code={cssModuleStr} lang="css" />
|
|
</TabsPanel>
|
|
<FullscreenButtonDemo client:visible />
|
|
</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>
|
|
</TabsList>
|
|
<TabsPanel client:visible value="html" initial>
|
|
<ServerCode code={htmlStr} lang="html" />
|
|
</TabsPanel>
|
|
<TabsPanel client:visible value="css">
|
|
<ServerCode code={htmlCssStr} lang="css" />
|
|
</TabsPanel>
|
|
<TabsPanel client:visible value="javascript">
|
|
<ServerCode code={htmlJsStr} lang="js" />
|
|
</TabsPanel>
|
|
<FullscreenButtonDemo client:visible />
|
|
</TabsRoot>
|
|
</FrameworkCase>
|
|
|
|
## Data Attributes
|
|
|
|
The FullscreenButton automatically sets data attributes based on fullscreen state:
|
|
|
|
- `data-fullscreen` - Present when in fullscreen, absent when not
|
|
|
|
Use these attributes for state-based styling in your CSS.
|
|
|
|
<FrameworkCase frameworks={["react"]}>
|
|
|
|
## Props
|
|
|
|
All standard button props are supported, plus:
|
|
|
|
| Prop | Type | Description |
|
|
|------|------|-------------|
|
|
| `children` | `ReactNode` | Button content (typically icons) |
|
|
| `className` | `string` | CSS class name |
|
|
|
|
</FrameworkCase>
|
|
|
|
## Accessibility
|
|
|
|
- Automatically includes proper ARIA labels
|
|
- Keyboard accessible (Space/Enter)
|
|
- Announces fullscreen state changes to screen readers
|
|
|
|
## Browser Support
|
|
|
|
The FullscreenButton uses the standard Fullscreen API, which is supported in all modern browsers.
|