0.0.3 • Published 4 years ago
vue-sidebar-ui v0.0.3
VueSidebarUi
A Sidebar UI component
Demo
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
node@10.x
.
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