Skip to content

Highly customizable, simple and modern Vue 3 dropdown component.

Notifications You must be signed in to change notification settings

storinka/dropdown

Repository files navigation

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>

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 */
}

About

Highly customizable, simple and modern Vue 3 dropdown component.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published