Preview Box

Preview box is a re-creation of Adam Wathan's and Steve Schoger's previewer which has recently been used on their upcoming project, Tailwind UI. We have also added an extra tab for setup and a full screen mode.

Usage

npm i preview-box

In your js file add the component to your vue instance;

import PreviewBox from 'preview-box/src/components/PreviewBoxComponent';
window.Vue = require('vue');

if(document.getElementById('example')) {
    new Vue({
        components: {
            'preview-box': PreviewBox
        },
        el: '#example',
    });
}

In you HTML or template use the following setup;

<div id="example">
    <!-- Other properties are :title and :language -->
    <preview-box
        :min-screen-size="380"
        :snap-to-width="true"
        :show-guides="true"
        :iframe-src="'/card.html'"
    >
        <template v-slot:setup>
            <div>Some setup text</div>
        </template>
        <template v-slot:copy-setup>
            &lt;!-- When on the setup screen, click the copy button and this data will be copied to the clipboard --&gt;
        </template>
        <template v-slot:code-snippet>
            <!-- must be wrapped in the div with the v-pre attribute -->
            <div v-pre>&lt;div&gt;This code is to be in a raw entity format for syntax highlighting&lt;/div&gt;</div>
        </template>
        <template v-slot:copy-code-snippet>
            <!-- must be wrapped in the div with the v-pre attribute -->
            <div v-pre>&lt;div&gt;When on the any other screen, click the copy button and this data will be copied to the clipboard &lt;/div&gt;</div>
        </template>
    </preview-box>
</div>

Extra Features

• [x] Full screen mode
• [x] Setup tab
• [x] Display screen width in pixels
• [x] Snap guides to preset widths with visual markers
• [x] Use arrow keys to fine tune width

If you have released the handle and not clicked on any other elements you can now use the arrow keys to shift the width a pixel either way.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.