Kazoku UI view controls layouts

The view controls · The layouts in the README

One element, four layouts, chosen by the layout attribute. Each one below is live: drag a card, press the buttons, slide the zoom. More shows the rest in every layout.

Layout

Zoom range

import "@johnmorrisdotca/kazoku-ui/view-controls/define";

`layout="horizontal"`

A tidy bar under the view: the turn on one row, the zoom slider on the next; one row when it is wide.

`layout="vertical"`

A column beside the view. Auto-turn and More stay at the top; the turn, then the zoom.

`layout="compact"`

One short row for a card or a phone: Auto-turn, the zoom and More. More opens the slider, the angle and the rest.

`layout="classic"` (the default)

The bar of 0.10 and before, unchanged: a page that names no layout keeps it.

layout="horizontal"

layout="vertical"

layout="compact"

layout="classic" (the default)

`layout="horizontal"`

`layout="vertical"`

`layout="compact"`

`layout="classic"` (the default)