Neutral Pork Motel

    @pluginjs/dropdown

    0.8.16 • Public • Published

    Dropdown

    npm package

    A flexible modern dropdown js plugin.

    Samples

    Introduction

    Installation

    Yarn

    yarn add @pluginjs/dropdown

    NPM

    npm i @pluginjs/dropdown

    Getting Started

    CDN:

    Development:

    <script src="https://unpkg.com/@pluginjs/dropdown/dist/dropdown.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@pluginjs/dropdown/dist/dropdown.css">

    Production:

    <script src="https://unpkg.com/@pluginjs/dropdown/dist/dropdown.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@pluginjs/dropdown/dist/dropdown.min.css">

    Initialize

    HTML:

    <div class="element"></div>

    ECMAScript Module:

    import Dropdown from "@pluginjs/dropdown"
    import "@pluginjs/dropdown/dist/dropdown.css"
    
    Dropdown.of(document.querySelector('.element'), options)

    CommonJS:

    require("@pluginjs/dropdown/dist/dropdown.css")
    const Dropdown = require("@pluginjs/dropdown")
    
    Dropdown.of(document.querySelector('.element'), options)

    Browser:

    <link rel="stylesheet" href="https://unpkg.com/@pluginjs/dropdown/dist/dropdown.css">
    <script src="https://unpkg.com/@pluginjs/dropdown/dist/dropdown.js"></script>
    <script>
      Pj.dropdown('.element', options)
    </script>

    API

    Options

    Options are called on dropdown instances through the dropdown options itself. You can also save the instances to variable for further use.

    Name Description Default
    "theme" Add plugin theme option null
    "panel" Add panel to plugin +
    "trigger" Add trigger action click
    "exclusive" Show exclusive true or false true
    "hideOnSelect" Hidden or not when plugin has be select true
    "hideOutClick" When clicking outside of the dropdown, trigger hide event true
    "keyboard" Enable keyboard of not false
    "placement" Set dropdown items display placement bottom-left
    "imitateSelect" Behave like select false
    "inputLabel" Input label with select false
    "placeholder" Input element placeholder Please select
    "icon" Set icon false
    "select" Set initial select value, when imitateSelect is true null
    "itemValueAttr" Set item tag name value
    "data" Add a json for loading null
    "width" Set width null
    "constraintToScrollParent" Set constraint to scroll parent true
    "constraintToWindow" Set constraint to window true
    "templates" Set plugin default templates {}

    Events

    Events are called on dropdown instances through the dropdown events itself. You can also save the instances to variable for further use.

    Name Description
    "ready" Gets fired when plugin is ready
    "enable" Gets fired when plugin is enabled
    "disable" Gets fired when plugin is disabled
    "destroy" Gets fired when plugin is destroy
    "hide" Gets fired when plugin is hidden
    "show" Gets fired when plugin is show
    "change" Gets fired when plugin is changed
    "click" Gets fired when plugin is clicked
    "trigger" Gets fired when plugin is triggerd

    Methods

    Methods are called on dropdown instances through the dropdown method itself. You can also save the instances to variable for further use.

    Name Description
    "enable" Enabled plugin if plugin is disabled
    "disable" Disable plugin
    "destroy" Destroy plugin
    "show" Show plugin
    "hide" Hide plugin
    "get" Get value by key
    "set" Set value by key
    "toggle" Active plugin or anti-active
    "update" Update plugin
    "replaceByData" Replace items by data
    "appendByData" Append items from data

    Classes

    Name | Description | Default --|| "NAMESPACE" | Declare plugin namespace | pj-dropdown "THEME" | Declare plugin theme | {namespace}--{theme} "INPUTMODE" | Declare input mode | {namespace}-input "SELECTMODE" | Declare select mode | {namespace}-select "ELEMENT" | Declare dropdown element | {namespace} "LABEL" | Declare dropdown label | {namespace}-label "ICON" | Declare icon element of dropdown | {namespace}-icon "ITEM" | Declare item element of dropdown | {namespace}-item "SHOW" | Declare show plugin | {namespace}-show "MASK" | Declare mask of dropdown | {namespace}-mask "WRAP" | Declare wrap of dropdown | {namespace}-wrap "PANEL" | Declare panel element of dropdown | {namespace}-panel "PANELWRAP" | Declare panel wrap element of dropdown | {namespace}-panel-wrap "DISABLED" | Announce plugin is disabled | {namespace}-disabled "FOCUS" | Declare focus status | {namespace}-focus "ACITVE" | Declare active status | {namespace}-active "HOVER" | Declare hover status | {namespace}-hover

    Browser support

    Tested on all major browsers.

    IE / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari OperaOpera
    IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

    License

    @pluginjs/dropdown is Licensed under the GPL-v3 license.

    If you want to use @pluginjs/dropdown project to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary.

    For purchase an Commercial License, contact us purchase@thecreation.co.

    Copyright

    Copyright (C) 2022 Creation Studio Limited.

    Keywords

    none

    Install

    npm i @pluginjs/dropdown

    Homepage

    pluginjs.com

    DownloadsWeekly Downloads

    91

    Version

    0.8.16

    License

    GPL-3.0

    Unpacked Size

    159 kB

    Total Files

    16

    Last publish

    Collaborators

    • thecreation
    • kaptinlin