FullScreen
An icon button that puts the whole page, or one element, in full screen and back, named after where a click leads.
Full is the full-screen button of an application header. Pressing it asks the browser to
show the page in full screen; pressing it again, or Escape, leaves full screen. Its name and icon
follow the state.
// apps/docs/examples/ui/full-screen.tsx'use client';
import {FullScreen} from '@workspace/active-ui/components/composed/full-screen';import {TooltipProvider} from '@workspace/active-ui/components/primitives/tooltip';
/** * The full-screen button of an application header. It puts the whole page in * full screen; `Escape` or the button bring it back, and the button's name * follows. With `showTooltip` its name is also shown as a tooltip. */export default function FullScreenExample() { return ( <TooltipProvider> <FullScreen enterLabel="Full screen" exitLabel="Standard screen" showTooltip /> </TooltipProvider> );}What the composition adds#
A state that follows the browser: it listens to
fullscreenchange, so leaving full screen withEscapechanges the button too. When the browser refuses, nothing changes.Two names,
enterandLabel exit, both naming where a click leads.Label showshows the current name as a tooltip, the same word as the accessible name. Put aTooltip Tooltipabove it to set the delay.Provider target: a ref to one element (an example, a chart, a map) to show that element in full screen instead of the page. The button then follows only that element.
Usage#
import {FullScreen} from '@workspace/active-ui/components/composed/full-screen';
<FullScreen enterLabel="Full screen" exitLabel="Standard screen" showTooltip />;What your application provides#
Both names, translated and short.
A page that may use full screen: a frame without the
fullscreenpermission refuses it.
API#
Import from @workspace/
Props
- Type
string
Accessible name of the button when the screen is not full screen: "Full screen".
Required, and supplied translated. Never hard-code a string here: the icon carries no text, so this is the only name the button has, and active- does not translate.
Keep it short. This is a name tag, not an instruction: the button sits in a row of five, and a full sentence per button turns a row of tooltips into a reading exercise.
- Type
string
Accessible name when in full screen: "Standard screen".
Names the destination, not the action, just like enter: both say where a click leads. A command ("close full screen") breaks that pattern, because its counterpart points at a place.
- Type
string
Classes for the button.
- Type
boolean
Also shows the accessible name as a tooltip.
A flag and not a text, because the name changes with the button's state: a passed-in string would keep saying "open" once the screen is full screen. This way tooltip and aria- always show the same word, which is also the intent of WCAG 2.5.3 (label in name).
Off by default. The open delay lives on Tooltip., so a tooltip that enabled itself would open after 300ms in one tree and immediately in another, depending on whether a provider happens to sit above it. A caller that wants a tooltip provides the provider.
- Type
RefObject<HTMLElement | null>
The element to show full screen; without it, the whole page. With a target, the button reflects only that element: another element in full screen leaves it on enter.
Takes only the props listed.
Types
The props of Full, each described in its prop list on this page.
interface FullScreenProps {
enterLabel: string;
exitLabel: string;
showTooltip?: boolean;
className?: string;
target?: React.RefObject<HTMLElement | null>;
}