1.0.2 • Published 1 year ago

vue-sidebar-menu-akahon v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

vue-sidebar-menu-akahon

Software License Latest Version on NPM npm Vue 2.x

A Vue.js sidebar menu component.

Demo

View demo | Sandbox

demo

Install

yarn add vue-sidebar-menu-akahon

Or

npm install --save vue-sidebar-menu-akahon

Add to project

Global

// main.js
import VueSidebarMenuAkahon from "vue-sidebar-menu-akahon";
Vue.component('vue-sidebar-menu-akahon', VueSidebarMenuAkahon);

Local Usage

<template>
  <div>
      <VueSidebarMenuAkahon />
  </div>
</template>

<script>
  import VueSidebarMenuAkahon from "vue-sidebar-menu-akahon";
  
  export default {
    name: 'component.vue',
    components: {VueSidebarMenuAkahon},
    data() {
      return {}
    }
  }
</script>

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.

Props

You can use icons from boxicons

Menu settings

Props (Parameter)TypeDefaultDescription
isMenuOpenBooleantrueOpen/Close menu
menuTitleString'Akahon'Menu title
menuLogoString-Logo
menuIconString'bxl-c-plus-plus'Icon (boxicons)

Menu items

Props (Parameter)TypeDefaultDescription
menuItemsArray[{link: "#",name: "Dashboard", tooltip: "Dashboard", icon: "bx-grid-alt" }]Items

Search

Props (Parameter)TypeDefaultDescription
isSearchBooleantrueEnable/Disable search input
searchPlaceholderString'Search...'Search input placeholder
searchTooltipString'Search'Search input tooltip

Profile detailes

Props (Parameter)TypeDefaultDescription
profileImgString'@/assets/img/photo.jpg'Profile avatar
profileNameString'Fayzullo Saidakbarov'Profile full name
profileRoleString'Frontend vue developer'Profile role title
isExitButtonBooleantrueEnable/Disable exit button

Styles

Props (Parameter)TypeDefaultDescription
bgColorString'#11101d'Background color
secondaryColorString'#1d1b31'Secondary color
homeSectionColorString'#e4e9f7'
logoTitleColorString'#fff'
iconsColorString'#fff'
itemsTooltipColorString'#e4e9f7'
searchInputTextColorString'#fff'
menuItemsHoverColorString'#fff'
menuItemsTextColorString'#fff'
menuFooterTextColorString'#fff'

Events

EventOutputDescription
button-exit-clicked-Emitted when the exit button has been clicked
search-input-emitStringEmitted when user types in the search input

Thanks for design

Prem Shahi

License

The MIT License

Vue CLI configuration

See Configuration Reference.

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago

0.2.1

1 year ago

0.2.0

1 year ago

0.2.3

1 year ago

0.2.2

1 year ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.0

2 years ago