libj-vue-comp-dropdown

Part of libj tools

This contains a j-dropdown vue component which uses bootstrap styles

Usage (npm)

npm install libj-vue-comp-dropdown

Properties

• value (Boolean) | default: false Visibility of dropdown
• items (Array) | default: [] Items of dropdown
• minWidth (String) | default: '150px' min-width of dropdown
• maxWidth (String) | default: '400px' max-width of dropdown
• width (String) | default: '100%' width of dropdown
• maxHeight (String) | default: '250px' max-height of dropdown
• direction (String) | default: 'ltr' ltr or rtl

Slots

• trigger which is mainly a button to toggle dropdown
• header on top of the list
• footer bottom of the list
• default slot has item as its scope which is a member of items

Events

• selected: Is called when user clicks on an item. Has item as its argument which is a member of items.

With default theme

import 'libj-vue-comp-dropdown/dist/libj-vue-comp-dropdown.default.min.css'
import 'libj-vue-comp-dropdown'
// Now, j-dropdown is available globally

Customize theme

You'll need a separate .scss file like (showcase/showcase.scss):

// Set variables here
.
.
.
@import 'libj-vue-comp-dropdown/index.scss';
// Now override classes
.
.
.

SCSS Variables:

$j-dropdown-background-color: #f9f9f9 !default;
$j-dropdown-z-index: 1000 !default;
$j-dropdown-item-color: black !default;
$j-dropdown-item-hover-background-color: #f1f1f1 !default;

Test

• Run this in a separate command line to start node server

node server.js

• Run one of the following to re-create bundles

npm run dev
npm run dev:watch

• Navigate to http://localhost:3000

Build

npm run build
npm run build:watch