This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@shapla/vue-dropdown

Shapla Dropdown

A simple and interactive dropdown menu for discoverable content for Vue 3

Table of contents

• Installation
• Usage

Installation

npm install --save @shapla/vue-dropdown

Usage

Styles

with Sass:

import '@shapla/vue-dropdown/src/index.scss';

with CSS:

import '@shapla/vue-dropdown/dist/style.css';

Javascript Instantiation

import ShaplaDropdown from '@shapla/vue-dropdown';

export default {
  name: 'Hello',

  components: {
    ShaplaDropdown
  }
}

<shapla-dropdown :hoverable="false" :right="true">
  <template v-slot:trigger>
    <div class="shapla-icon is-hoverable">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path
          d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
          fill="currentColor"/>
      </svg>
    </div>
  </template>
  <a href="https://example.com" class="shapla-dropdown-item is-active">Link 1</a>
  <a href="https://example.com" class="shapla-dropdown-item">Link 2</a>
  <span class="shapla-dropdown-divider"></span>
</shapla-dropdown>

Props

Property	Type	Required	Default	Description
hoverable	Boolean	no	true	If set true, the dropdown will show up when hovering the trigger slot.
right	Boolean	no	false	Set true to have a right-aligned dropdown.
role	String	no	menu	Role of component. Mostly for accessibility.
direction	Boolean	no	auto	Value can be auto, up, down