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" aria-controls="zoom-control">
    <span class="swan-sr-only">Zoom in</span>
  </button>
  <button class="swan-zoom-controls-out" aria-controls="zoom-control">
    <span class="swan-sr-only">Zoom out</span>
  </button>
  <span class="swan-zoom-controls-value" id="zoom-control">
    <span class="swan-sr-only">Current zoom level: </span>
    100%
  </span>
</div>

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

Accessibility

ZoomControls requires you to set some accessibility props for a11y compliance:

The accessibleText prop is required on sub components ZoomControlsIn, ZoomControlsOut and ZoomControlsValue. These should be set to localized text that describes the button to the user e.g. "Zoom in", "Zoom out" and some text for the current zoom value "Current zoom level: 100%" respectively.

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	`ReactNode`	false	⚠️ Deprecated - Use `accessibleText` instead 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	A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom in"	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	`ReactNode`	false	⚠️ Deprecated - Use `accessibleText` instead A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom out"	null
accessibleText	`string \| null`	false	A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom out"	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	`ReactNode`	false	⚠️ Deprecated - Use `accessibleText` instead A localized label which describes the component to screen-reader users Typically it is just a string like "Current zoom level"	null
accessibleText	`string \| null`	false	A localized label which describes the component to screen-reader users Typically it is just a string representing the zoom value "Current zoom level"	null