@slickteam/slick-side-menu
v0.0.3-9
Published
A side menu for navigation purposes
Downloads
19
Maintainers
Readme
slick-side-menu
Description
A navigation drawer that has a boolean property that states if it's open or closed. When open, an overlay displays and a click on it hides the menu.
Installation
npm i @slickteam/slick-side-menu
Usage
- Html vanilla
<script type="module">
import '@slickteam/slick-side-menu';
</script>
<slick-side-menu></slick-side-menu>
- Vue.js
<template>
<slick-side-menu
:avatar="image"
></slick-side-menu>
</template>
<script>
import '@slickteam/slick-side-menu';
import image from './path/to/image/file'
export default {
name: 'TestPage',
data() {
return {
image: image,
}
},
}
</script>
<style scoped>
/* Put CSS */
</style>
Template
<slick-side-menu
open
title="Menu title"
user
username="Michel Laboule"
avatar="importImageHere"
items="[]"
color="#FFF"
background="#f97316"
></slick-side-menu>
Properties
Name | Type | Description
--- | --- | ---
open
| Boolean | Shows the menu when true
title
| String | Define text content of the menu title
user
| Boolean | Shows the user section when true
username
| String | Define user section name
avatar
| File | The user section avatar's image
items
| Array | An array of items that defines the menu. Structure must be => [ title = 'My title', to = '/MyHrefLink', icon = 'should be filled with the "d" property of a path tag from a svg tag']
color
| String | Hex color
background
| String | Hex color
Events
Name | Description
--- | ---
slick-logout
| The event emitted when the logout button is clicked in the user section.
slick-overlay
| The event emitted when the overlay is clicked.
Development
Demoing with Storybook
To run a local instance of Storybook for your component, run
npm run storybook
To build a production version of Storybook, run
npm run storybook:build