VueSidebarUi

A Sidebar UI component

Demo

Enjoy

Installation

Yarn

yarn add vue-sidebar-ui

NPM

npm i --save vue-sidebar-ui

Usage

ES6 Modules / CommonJS

import VueSidebarUi from 'vue-sidebar-ui';
import 'vue-sidebar-ui/dist/vue-sidebar-ui.css';

Vue.component('VueSidebarUi', VueSidebarUi);

<VueSidebarUi
  v-model="yourValue"
/>

Basic usage

Best way: Use CSS flexbox

CSS Sheet example

(or install my CSS framework style-helpers)

html, body, #app {
    height: 100vh;
}
.flex {
    display: flex;
}
.flex-1 {
    flex: 1;
}

Template

<div class="app flex">
  <VueSidebarUi
    v-model="hasLeftSidebarOpen"
  >
    Left side bar content
  </VueSidebarUi>
  <div class="flex-1">
    Main content
  </div>
  <VueSidebarUi
      v-model="hasRightSidebarOpen"
      right
    >
      Right side bar content
  </VueSidebarUi>
</div>

VueJS implementation

import VueSidebarUi from 'vue-sidebar-ui'
import 'vue-sidebar-ui/dist/vue-sidebar-ui.css'

export default {
  name: 'App',
  components: {
    VueSidebarUi
  },
  data () {
    return {
      hasLeftSidebarOpen: true,
      hasRightSidebarOpen: false
    }
  }
}

Check the demo

UMD

<link
  rel="stylesheet"
  type="text/css"
  href="${YOUR_PATH}/vue-sidebar-ui.css"
/>

<div id="app">
  <VueSidebarUi
      v-model="hasLeftSidebarOpen"
    >
      Sidebar content
  </VueSidebarUi>
</div>

<script src="https://unpkg.com/vue" charset="utf-8"></script>
<script
  src="${YOUR_PATH}/vue-sidebar-ui.umd.min.js"
  charset="utf-8"
></script>

<script type="text/javascript">
  Vue.component('vue-sidebar-ui', window['vue-sidebar-ui']);
  new Vue({
    el: '#app',
    data() {
      return {
        hasLeftSidebarOpen: false
      };
    }
  });
</script>

Props API

| Props | Type | Required | Default | | --------------------------- | ----------------- | -------- | --------------------------- | | v-model | Boolean | yes | - | | id | String | no | VueSidebarUi | | width | Number | no | 350 | | loader | Boolean | no | false | | without-close-btn | Boolean | no | false | | without-shadow | Boolean | no | false | | absolute (1) | Boolean | no | false | | right (2) | Boolean | no | false |

(1) absolute : Sidebar is open above the content

(2) right : You should use this props for the right sidebar

Slots

| Slots | Return | | --------------- | ------------------------------------------------- | | default | Content of the sidebar (see previous examples) | | button-icon (1) | Replace default icon of open/close button | | content-loader (2) | Replace default loader in sidebar content |

(1) Example:

<VueSidebarUi
  v-model="hasLeftSidebarOpen"
>
  <i
    slot="button-icon"
    class="material-icons"
  >
    {{ hasRightSidebarOpen ? 'arrow_forward_ios' : 'arrow_back_ios' }}
  </i>
</VueSidebarUi>

You should switch icon for open/close effect

(2) Example:

<VueSidebarUi
  v-model="hasLeftSidebarOpen"
>
  <MyOwnLoader
    slot="content-loader"
  />
</VueSidebarUi>

Events API

| Event | Return | | --------------- | ------------------------------------------------- | | input | Boolean value of sidebar (true if open, false if closed) |

Contribute

Setting up development server

Ensure you have Node and npm in your machine. Minimal config is:

• node >= 6.0
• npm >= 3.0

This project is built with [email protected].

Install the development dependencies by running:

npm install

or

npm ci # Recommanded if you have node > 10.x

Once your dependencies are installed, start the development server with:

npm run serve

This will start the development server available at http://localhost:8080.

Compiles and hot-reloads for development

npm run serve

Linter

npm run lint

License

This project is licensed under MIT License