Zoom Controls

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 />
  <ZoomControlsOut />
  <ZoomControlsValue value={100} />
</ZoomControls>

<ZoomControls>
  <ZoomControlsIn />
  <ZoomControlsOut />
  <ZoomControlsValue value={100} />
</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 is </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 is </span>
    100%
  </span>
</div>

Disabled

Use disabled on Zoom Control button when its action is at its boundary (e.g., max or min zoom)

ReactVanilla

<ZoomControls>
  <ZoomControlsIn disabled />
  <ZoomControlsOut />
  <ZoomControlsValue value={100} />
</ZoomControls>

<ZoomControls>
  <ZoomControlsIn disabled />
  <ZoomControlsOut />
  <ZoomControlsValue value={100} />
</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 is </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 is </span>
    100%
  </span>
</div>

prop	type	required	default	deprecation notes
⚠️ Deprecated `visuallyHiddenLabel` A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom in" @deprecated This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.	`ReactNode`	false	null	This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.
⚠️ Deprecated `accessibleText` A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom in" @deprecated This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.	`stringnull`	false	null	This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.

prop	type	required	default	deprecation notes
⚠️ Deprecated `visuallyHiddenLabel` A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom out" @deprecated This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.	`ReactNode`	false	null	This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.
⚠️ Deprecated `accessibleText` A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom out" @deprecated This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.	`stringnull`	false	null	This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.

prop	type	required	default	deprecation notes
⚠️ Deprecated `visuallyHiddenLabel` A localized label which describes the component to screen-reader users Typically it is just a string like "Current zoom level" @deprecated This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.	`ReactNode`	false	null	This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.
⚠️ Deprecated `accessibleText` A localized label which describes the component to screen-reader users Typically it is just a string representing the zoom value "Current zoom level" @deprecated This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.	`stringnull`	false	null	This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.
`value` The zoom value to display (typically a percentage, e.g. "100" for 100%)	`number`	false	null

Default Text	Key
Zoom in	`zoom-controls-in.accessible-text-for-zoom-in`
Zoom out	`zoom-controls-out.accessible-text-for-zoom-out`
Current zoom level is {{value}}	`zoom-controls-value.accessible-text-for-zoom-value`

Usage

Disabled

Internationalization