device viewer docs

2.24.1

Device Viewer

Device Viewer Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-device-viewer
Source code
View on Github
Dependencies
@bolt/components-icon @bolt/components-image @bolt/core-v3.x @bolt/lazy-queue drift-zoom

Overview

Device frames for showcase. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-device-viewer
Overview Usage Schema Edit this page Testing Steps

Usage

  {% include "@bolt-components-device-viewer/device-viewer.twig" with {
  device: "iphone8",
  orientation: "portrait",
  color: "white",
  image: {
    src: "/images/sample/product-device-screenshot--phone.jpg"
  }
} only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
deviceName

Name of the device.

 string —
  • ipad, iphone8, macbook
color

Device color.

 string —
  • black, silver, gold
orientation

Device orientation.

 string —
  • portrait or landscape
magnify

Add the magnifier effect.

 boolean false
  • —
image object —
    • src

      Source url for the image.

      • —

device viewer

device viewer ipad variation

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

Magnification: true
Orientation: 'portrait'

Magnification: true
Orientation: 'landscape'

device viewer iphone8 variation

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

Color: gold
Orientation: 'portrait'

Color: gold
Orientation: 'landscape'

Magnification: true
Orientation: 'portrait'

Magnification: true
Orientation: 'landscape'

device viewer macbook variation

Magnification: true
Debug Panel