Storinka Dropdown

Highly customizable, simple and modern Vue 3 dropdown component.

Setup

1. Install package via NPM or Yarn:

yarn add @storinka/dropdown

npm i @storinka/dropdown

2. Install as Vue plugin:

import { createApp } from "vue";
import SDropdown from "@storinka/dropdown";

const app = createApp();

app.use(SDropdown);

Usage

Example 1 (with provided name):

<template>
  <div class="container">
    <button v-s-dropdown-toggle:some-dropdown>
      toggle
    </button>
    <SDropdown name="some-dropdown">
      dropdown content
    </SDropdown>
  </div>
</template>

Example 2 (without provided name):

<template>
  <div class="container">
    <SDropdown>
      <template #toggle="{ name }">
        <button v-s-dropdown-toggle:[name]>
          toggle
        </button>
      </template>

      dropdown content
    </SDropdown>
  </div>
</template>

WARNING: You must always set id provided in template props for toggle element.

Props

z-index

• Type: number | undefined
• Default: 1000

Provide custom z-index for dropdown container.

offset

• Type: number | undefined
• Default: 10

Provide custom offset for dropdown container from toggle element.

align

• Type: string | undefined
• Value: "left" | "right"
• Default: "right"

Provide initial dropdown align.

position

• Type: string | undefined
• Value: "top" | "bottom"
• Default: "bottom"

Provide initial dropdown position.

theme

• Type: string | undefined
• Value: "light" | "dark" | "tooltip-light" | "tooltip-dark"
• Default: undefined

Specify a theme.

hover

• Type: boolean | undefined
• Default: false

Open dropdown on hover.

is-enabled

• Type: boolean | undefined
• Default: true

Enable or disable dropdown.

keep-toggle-width

• Type: boolean | undefined
• Default: false

Enable or disable making dropdown width same as toggle width.

Slot props

Available slots: toggle, default

name

• Type: string

Dropdown name.

isOpen

• Type: boolean

Is dropdown open or not.

Themes

The component by default comes without any styles. But, there are few built-in themes you can use.

// theme: "dark"
import "@storinka/dropdown/dist/styles/dark-theme.css";

// theme: "light"
import "@storinka/dropdown/dist/styles/light-theme.css";

// theme: "tooltip-dark"
import "@storinka/dropdown/dist/styles/tooltip-dark-theme.css";

// theme: "tooltip-light"
import "@storinka/dropdown/dist/styles/tooltip-light-theme.css";

Customization

If you want to customize the dropdown, you can apply any styles to s-dropdown class.

.s-dropdown {
    background-color: white;

    border: 1px solid #eee;
    border-radius: 10px;

    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.s-dropdown-position-bottom {
    /* when position is bottom */
}

.s-dropdown-position-top {
    /* when position is top */
}

.s-dropdown-align-right {
    /* when align is right */
}

.s-dropdown-align-left {
    /* when align is left */
}

.s-dropdown-align-center {
    /* when align is center */
}