Web SDKv1.0.0

layout.phone

In a tiny container the bar layout composes itself for a phone. The tool section — the tool groups and the More button — moves into a strip at the bottom of the screen, labeled, five across, with the four most recently used tools kept and the rest behind More, which opens upward. Above the strip an inspector sheet carries the active tool's options: the same options bar the tool mounts at the top of the document on a desktop, laid out as the sheet's content, under a head that names the tool and offers a close. A pill handle folds the options away without leaving the tool. A tool with no options shows its name above the strip and nothing more. The top bar keeps the chrome: the panel toggles, Select / Pan, undo and redo, Print and Download and the host's actions; toolbarPositionCompact is ignored while the shell is on, because the strip owns the bottom.

phone picks one of four placements; every one takes the bar's tool section as a strip and gives the active tool the sheet's body for its options, and they differ in where the two sit. Held sideways — wider than tall and no taller than 500px, which the viewer publishes as data-ks-height="short" at any width — every placement but 'none' becomes the side rails below the comfortable width: the tools down the left, the options down the right, the pages between.

'sheet' | 'dock' | 'split' | 'float' | 'none'default 'sheet'

Values

  • 'sheet'Default. The strip along the bottom, the options rising above it in the inspector sheet.
  • 'dock'The strip along the bottom, the options as one row of chips above it: the document keeps the most room, and a chip opens its popover as it would above a desktop bar.
  • 'split'The tools as a row of labeled chips under the top bar, the options in a sheet at the bottom.
  • 'float'Document first: a button in the bottom-right corner unfolds into a column of labeled tools; choosing one folds it away and the button wears that tool. The options rise in a sheet; the page navigator keeps left, clear of the button.
  • 'none'Keep the one-bar composition on phones.

Example

phoneTypeScript
// Keep the one-bar composition on phones instead.
new PDFViewer(container, doc, { layout: { phone: 'none' } });

More in Layout