A Vue plugin to quickly generate a webapplication layout

by Vue.js Examples

vue-ads-layout

This is a vue component library to create a default web application layout. You can create a toolbar, footer, left and right drawers. And each of those 4 components can be placed as a fixed component.

The left and right drawers can be minified or hidden by buttons or by resizing the window (responsive design)

I also added two default buttons to hide and minify the drawers.

View demo Download Source

Installation

You can install the package via npm or yarn.

NPM

npm install vue-ads-layout --save

YARN

yarn add vue-ads-layout

Usage

Here you can find a simple example on how to use this layout component.

<template>
    <div id="app">
        <vue-ads-layout :full-bar="true">
            <vue-ads-bar
                slot="toolbar"
                :fixed="true"
                class="bg-red"
            >
                <vue-ads-menu-button slot="first" :hidden="hiddenLeft" @toggle="hideLeft"></vue-ads-menu-button>
                <vue-ads-menu-button slot="last" :hidden="hiddenRight" @toggle="hideRight"></vue-ads-menu-button>
            </vue-ads-bar>
            <vue-ads-bar
                slot="footer"
                :fixed="false"
                :footer="true"
                class="bg-purple"
            >
            </vue-ads-bar>
            <vue-ads-drawer
                slot="left-drawer"
                :minified="minifiedLeft"
                :hidden="hiddenLeft"
                :fixed="true"
                @minify="minifyLeft"
                @hide="hideLeft"
                class="bg-yellow"
            >
                <vue-ads-minify-button slot="bottom" :minified="minifiedLeft" @toggle="minifyLeft"></vue-ads-minify-button>
            </vue-ads-drawer>
            <vue-ads-drawer
                slot="right-drawer"
                :minified="minifiedRight"
                :hidden="hiddenRight"
                :fixed="false"
                @minify="minifyRight"
                @hide="hideRight"
                class="bg-blue"
            >
                <vue-ads-minify-button slot="bottom" :right="true" :minified="minifiedRight" @toggle="minifyRight"></vue-ads-minify-button>
            </vue-ads-drawer>
            
            My content
            
        </vue-ads-layout>
    </div>
</template>

<script>
import './node_modules/@fortawesome/fontawesome-free/css/all.css';

import './node_modules/vue-ads-layout/dist/vue-ads-layout.css';

import { VueAdsLayout, VueAdsBar, VueAdsDrawer, VueAdsMenuButton, VueAdsMinifyButton } from 'vue-ads-layout';

export default {
    name: 'app',

    components: {
        VueAdsMinifyButton,
        VueAdsMenuButton,
        VueAdsDrawer,
        VueAdsBar,
        VueAdsLayout,
    },

    data () {
        return {
            minifiedLeft: false,
            minifiedRight: false,
            hiddenLeft: false,
            hiddenRight: false,
        };
    },

    methods: {
        minifyLeft (minified) {
            this.minifiedLeft = minified;
        },

        hideLeft (hidden) {
            this.hiddenLeft = hidden;
        },

        minifyRight (minified) {
            this.minifiedRight = minified;
        },

        hideRight (hidden) {
            this.hiddenRight = hidden;
        },
    },
};
</script>

Components

VueAdsLayout

This is the base component. All the other components need to be nested in this one by slots.

Properties
  • full-bar: (type: boolean) If true, a horizontal layout is created, where the bars overlap the drawers.
    If false, a vertical layout is created, where the drawers overlap the bars.
Templates
toolbar

The toolbar template is used to define the top bar. Use the VueAdsBar component for it.

<vue-ads-bar slot="toolbar"></vue-ads-bar>

The footer template is used to define the footer. Use the VueAdsBar component for it with the footer option = true.

<vue-ads-bar slot="footer" :footer="true"></vue-ads-bar>
left-drawer / right drawer

The left/right-drawer template is used to define the left/right drawer. Use the VueAdsDrawer component for it.

<vue-ads-drawer slot="left-drawer"></vue-ads-drawer>
<vue-ads-drawer slot="right-drawer"></vue-ads-drawer>
default

This is the most important template. Here you place your application content.

Just add it as a child element between the vue-ads-layout tags.

VueAdsBar

The bar component is used to create a toolbar and a footer.

Properties
  • fixed: (type: boolean, default: false) Indicates if the bar is positioned fixed.
  • height: (type: number, default: 16) If you want to increase the default height, add this option.
    Only use the valid, numeric Tailwindcss height options
  • footer: (type: boolean, default: false) Indicates if the bar is a footer.
Templates

There are 2 possibilities for using the bar templates:

  • overriding the default template with a custom template.
  • use the predefined 3 column template: first, middle, last.
    This method uses the flex css style, where the middle template has a flex-grow attribute.

For example if you want to use the VueAdsMenuButton buttons on the left/right position of the bar,
use the following templates.

<vue-ads-menu-button slot="first" :hidden="hiddenLeft" @toggle="hideLeft"></vue-ads-menu-button>
<vue-ads-menu-button slot="last" :hidden="hiddenRight" @toggle="hideRight"></vue-ads-menu-button>

VueAdsDrawer

The drawer component is used to create a drawers on the left and right side of your screen.

Properties
  • fixed: (type: boolean, default: false) Indicates if the drawer is positioned fixed.
  • width: (type: number, default: 64) If you want to increase the default width, add this option.
    Only use the valid, numeric Tailwindcss width options
  • minified-width: (type: number, default: 16) If you want to increase the minified width, add this option.
    Only use the valid, numeric Tailwindcss width options
  • minified: (type: boolean, default: false) Indicates if the drawer is minified.
  • hidden: (type: boolean, default: false) Indicates if the drawer is hidden.
  • responsive-minified: (type: array, default: ['all', 'sm']) A list of all Tailwindcss screen sizes
    where the drawer has to be minified.
  • responsive-hidden: (type: array, default: ['all']) A list of all Tailwindcss screen sizes
    where the drawer has to be hidden.
Events
  • minify: Emitted if the drawer is minified.
    • minified: (type: boolean) Indicates if the drawer is minified.
  • hide: Emitted if the drawer is hidden.
    • hidden: (type: boolean) Indicates if the drawer is hidden.
Templates

There are 2 possibilities for using the drawer templates:

  • overriding the default template with a custom template.
  • use the predefined 2 rows template: top, bottom.
    This method uses the flex css style, where the top template has a flex-grow attribute.

All the slots (default, top and bottom) are scoped with the following variables:

  • fixed: (type: boolean) Indicates if the drawer is positioned fixed.
  • minified: (type: boolean) Indicates if the drawer is minified.
  • hidden: (type: boolean) Indicates if the drawer is hidden.
  • hidden: (type: boolean) Indicates if the drawer is hidden.
  • width: (type: number) the current numeric tailwindcss width

For example if you want to use the VueAdsMinifyButton on the bottom of the bar to minify it,
use the following template.

<vue-ads-minify-button slot="bottom" :minified="minifiedLeft" @toggle="minifyLeft"></vue-ads-minify-button>

VueAdsMenuButton

A menu button that can be used to open or close the drawers.

If you want to use the font awesome icons,
don't forget to import the css library. It's a dependency of this library so it's automatically installed.

Properties
  • hidden: (type: boolean, required) Indicates if the linked drawer is hidden or not.
Events
  • toggle: Emitted if the button is clicked.
    • hidden: (type: boolean) Indicates if the drawer is hidden.
Templates

You can add a default template to override the default icon.

<vue-ads-menu-button :hidden="false">
   <i class="fa fa-check"></i>
</vue-ads-menu-button>

VueAdsMinifyButton

A minify button that can be used to minify the drawers.

If you want to use the font awesome icons,
don't forget to import the css library. It's a dependency of this library so it's automatically installed.

Properties
  • minified: (type: boolean, required) Indicates if the linked drawer is minified or not.
  • right: (type: boolean, default: false) Indicates if the button is used for the right drawer.
    If so the arrows are flipped.
Events
  • toggle: Emitted if the button is clicked.
    • minified: (type: boolean) Indicates if the drawer is minified.
Templates

You can add a default template to override the default icon.

<vue-ads-minify-button :minified="false">
   <i class="fa fa-check"></i>
</vue-ads-minify-button>

Testing

Needs to be done. You can run all the test (currently zero) by executing the following command.

npm run test:unit

GitHub