Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/storinka/dropdown
Highly customizable, simple and modern Vue 3 dropdown component.
https://github.com/storinka/dropdown
Last synced: about 2 months ago
JSON representation
Highly customizable, simple and modern Vue 3 dropdown component.
- Host: GitHub
- URL: https://github.com/storinka/dropdown
- Owner: storinka
- Created: 2021-10-06T02:17:36.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2021-11-08T15:11:26.000Z (over 2 years ago)
- Last Synced: 2024-01-24T12:02:03.817Z (4 months ago)
- Language: Vue
- Homepage: https://xo79e.csb.app/
- Size: 374 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Lists
- awesome-vue - SDropdown - Highly customizable, simple and modern Vue 3 dropdown component. (Components & Libraries / UI Components)
- awesome-vue - SDropdown - Highly customizable, simple and modern Vue 3 dropdown component. (Components & Libraries / UI Components)
README
# Storinka Dropdown
Highly customizable, simple and modern Vue 3 dropdown component.
## Setup
#### 1. Install package via NPM or Yarn:
```shell
yarn add @storinka/dropdown
```
```shell
npm i @storinka/dropdown
```
#### 2. Install as Vue plugin:
```javascript
import { createApp } from "vue";
import SDropdown from "@storinka/dropdown";
const app = createApp();
app.use(SDropdown);
```
## Usage
Example 1 (with provided name):
```vue
toggle
dropdown content
```
Example 2 (without provided name):
```vue
toggle
dropdown content
```
## 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.
```javascript
// 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.
```css
.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 */
}
```