Zoom Controls

Zoom in and out of the current view.

styleKeys: zoomControls

UsageAPI

Zoom Controls provide buttons to let the user zoom in and out of the current view, as well as show the current level of zoom.

Usage

ReactVanilla

<>
  <ZoomControls>
    <ZoomControlsIn accessibleText="Zoom in" />
    <ZoomControlsOut accessibleText="Zoom out" />
    <ZoomControlsValue accessibleText="Current zoom level: ">
      100%
    </ZoomControlsValue>
  </ZoomControls>
</>

<>
  <ZoomControls>
    <ZoomControlsIn accessibleText="Zoom in" />
    <ZoomControlsOut accessibleText="Zoom out" />
    <ZoomControlsValue accessibleText="Current zoom level: ">
      100%
    </ZoomControlsValue>
  </ZoomControls>
</>

<div class="swan-zoom-controls">
  <button class="swan-zoom-controls-in">
    <span class="swan-sr-only">Zoom in</span></button
  ><button class="swan-zoom-controls-out">
    <span class="swan-sr-only">Zoom out</span></button
  ><span class="swan-zoom-controls-value"
    ><span class="swan-sr-only">Current zoom level: </span>100%</span
  >
</div>

<div class="swan-zoom-controls">
  <button class="swan-zoom-controls-in">
    <span class="swan-sr-only">Zoom in</span></button
  ><button class="swan-zoom-controls-out">
    <span class="swan-sr-only">Zoom out</span></button
  ><span class="swan-zoom-controls-value"
    ><span class="swan-sr-only">Current zoom level: </span>100%</span
  >
</div>

Note that the accessibleText props are mandatory, and their values must be localized.

Props

ZoomControlsIn

This component is implemented using the <button /> as the root element. You can utilize the native attributes supported by <button /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
visuallyHiddenLabel	`ReactNodeLike`	false	A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom in"	null
accessibleText	`string \| null`	false	Serves same purpose as `visuallyHiddenLabel` but accepts only string. In the long run, we prefer this over the former.	null

ZoomControls

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

ZoomControlsOut

See core props for additional props that can be applied to this component.

prop	type	required	description	default
visuallyHiddenLabel	`ReactNodeLike`	false	A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom in"	null
accessibleText	`string \| null`	false	Serves same purpose as `visuallyHiddenLabel` but accepts only string. In the long run, we prefer this over the former.	null

ZoomControlsValue

This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
visuallyHiddenLabel	`ReactNodeLike`	false	A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom in"	null
accessibleText	`string \| null`	false	Serves same purpose as `visuallyHiddenLabel` but accepts only string. In the long run, we prefer this over the former.	null

Was this page useful?

Published: Jan 25, 2022Last updated: Sep 3, 2024