mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
98 lines
2.7 KiB
Plaintext
98 lines
2.7 KiB
Plaintext
---
|
|
title: MuteButton
|
|
frameworkTitle:
|
|
html: mute-button
|
|
description: A button component for toggling audio mute state
|
|
---
|
|
|
|
import { MuteButtonDemo } from '@/examples/react/MuteButton/MuteButtonDemo';
|
|
import componentModuleStr from '@/examples/react/MuteButton/BasicMuteButton.tsx?raw';
|
|
import cssModuleStr from '@/examples/react/MuteButton/MuteButton.module.css?raw';
|
|
import htmlStr from '@/examples/html/mute-button/snippet.html?raw';
|
|
import htmlCssStr from '@/examples/html/mute-button/mute-button.css?raw';
|
|
import htmlJsStr from '@/examples/html/mute-button/mute-button.js?raw';
|
|
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
|
|
import ServerCode from '@/components/Code/ServerCode.astro';
|
|
import { TabsRoot, TabsPanel } from '@/components/Tabs';
|
|
|
|
## Features
|
|
|
|
- Multi-state icon display (high, low, off)
|
|
- Automatically reflects volume level changes
|
|
- Toggles mute/unmute on click
|
|
- Accessible keyboard navigation
|
|
|
|
## 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>
|
|
|
|
<TabsPanel value="css" client:load>
|
|
<ServerCode code={cssModuleStr} lang="css" />
|
|
</TabsPanel>
|
|
|
|
<MuteButtonDemo client:load />
|
|
</TabsRoot>
|
|
</FrameworkCase>
|
|
|
|
<FrameworkCase frameworks={["html"]}>
|
|
<TabsRoot
|
|
aria-label="HTML implementation"
|
|
titles={{ html: 'HTML', css: 'CSS', javascript: 'JS' }}
|
|
client:load
|
|
>
|
|
<TabsPanel value="html" client:load>
|
|
<ServerCode code={htmlStr} lang="html" />
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="css" client:load>
|
|
<ServerCode code={htmlCssStr} lang="css" />
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="javascript" client:load>
|
|
<ServerCode code={htmlJsStr} lang="js" />
|
|
</TabsPanel>
|
|
|
|
<MuteButtonDemo client:load />
|
|
</TabsRoot>
|
|
</FrameworkCase>
|
|
|
|
|
|
|
|
## Data Attributes
|
|
|
|
The MuteButton automatically sets data attributes based on volume level:
|
|
|
|
- `data-volume-level="high"` - Volume > 50%
|
|
- `data-volume-level="medium"` - Volume 25-50%
|
|
- `data-volume-level="low"` - Volume 1-24%
|
|
- `data-volume-level="off"` - Volume 0% (muted)
|
|
|
|
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 volume state changes to screen readers
|