StatusBar

The bottom bar: document facts on the left, zoom on the right.

import { StatusBar, StatusSpacer, ZoomControl } from '@kition/tessera-ui'

Examples

Zoom

status-bar.tsx

import { useState } from 'react'
import { StatusBar, StatusSpacer, ZoomControl } from '@kition/tessera-ui'

export default function Demo() {
  const [zoom, setZoom] = useState(1)
  return (
    <div className="demo-frame">
      <StatusBar>
        <span>Slide 3 of 12</span>
        <StatusSpacer />
        <ZoomControl zoom={zoom} onZoom={setZoom} onFit={() => setZoom(1)} labels={{ out: 'Zoom out', in: 'Zoom in', fit: 'Fit' }} />
      </StatusBar>
    </div>
  )
}

Props

StatusBar

Prop	Type	Default	Description
`children`required	`ReactNode`	—
`onClick`	`(event: ReactMouseEvent<HTMLElement>) => void`	—

StatusSpacer

No props.

ZoomControl

Zoom out, a slider from min to max, zoom in, the value, and fit.

Prop	Type	Default
`zoom`required	`number`	—
`onZoom`required	`(zoom: number) => void`	—
`onFit`required	`() => void`	—
`min`	`number`	`0.1`
`max`	`number`	`4`
`labels`required	`{ out: string; in: string; fit: string }`	—