Wondering what’s next for npm?Check out our public roadmap! »

    dropmic

    0.3.3 • Public • Published

    Logo dropmic

    Introduction

    dropmic is a lightweight dropdown plugin written in pure javascript

    • No dependencies required
    • No extra files to download
    • Fully customizable via CSS
    • Simple API

    Documentation

    Installation

    Method Procedure
    Bower bower install dropmic --save
    NPM npm install dropmic
    Yarn (obsolete since npm5) yarn add dropmic
    Download Download zip

    Then dropmic have some css you will have to add (feel free to custom it for a better integration in your UI):

    <link rel="stylesheet" href="dist/dropmic.min.css">

    Finally just link the dropmic's code at the end of your document:

    <!-- Browser build -->
    <script src="dist/dropmic.min.js"></script>

    Or as a JS module:

    // ES6 module build
    import dropmic from 'dropmic'

    Use

    Create the base layout for your button

    1. Add data-dropmic-btn attribute to your button
    2. Create a div with a dropmic css class
    3. Add a data-dropmic-direction attribute to the div (default behavior: bottom-right):
    • data-dropmic-direction="top-left"
    • data-dropmic-direction="top-right"
    • data-dropmic-direction="top-middle"
    • data-dropmic-direction="bottom-left"
    • data-dropmic-direction="bottom-right"
    • data-dropmic-direction="bottom-middle"
    1. You can also add a data-dropmic attribute to you div for target it.

    Example:

    <div class="dropmic" data-dropmic="42"
    data-dropmic-direction="bottom-right">
      <button data-dropmic-btn>click me</button>
      <div class="dropmic-menu" aria-hidden="true">quality content</div>
    </div>

    Instantiate your new dropdown

    var dropmic = new Dropmic(document.querySelector('[data-dropmic="42"]'));

    Add content

    You can create the content by yourself or use the API (cf. below)

    Use this template (<div class="dropmic-menu" aria-hidden="true"> is needed, otherwise you can completely customize his content)

    <div class="dropmic" data-dropmic="42" data-dropmic-direction="bottom-right" role="navigation">
        <button data-dropmic-btn>click me</button>
        <div class="dropmic-menu" aria-hidden="true">
            <div class="dropmic-menu__custom">Custom content</div>
            <ul class="dropmic-menu__list" role="menu">
                <li class="dropmic-menu__listItem" role="menuitem">
                    <a class="dropmic-menu__listContent" href="http://example.com" tabindex="-1">label link</a>
                </li>
                <li class="dropmic-menu__listItem" role="menuitem">
                    <button class="dropmic-menu__listContent" tabindex="-1">label button</button>
                </li>
            </ul>
        </div>
    </div>

    API

    You can use the API to generate content and open or close your dropdown with JS:

    Name Parameter type(s) Description
    addLink(label, url) string or int, string Add a link
    addBtn(label, callback) string or int, function Add a button
    addLabel(label) string or int Add a text label
    setCustomContent(content) string Set a custom content
    updateTargetBtn(content) string Update target button content
    open() Open your dropdown
    close() Close your dropdown

    Example:

    dropmic.setCustomContent("toto custom");
    dropmic.addLink('link label', 'http://example.com');
    dropmic.addBtn('close dropdown', function() {
      dropmic.close();
    });
    dropmic.addLabel('text label');

    Options

    Name Type Description
    onOpen function Callback to execute when dropmic is open
    onClose function Callback to execute when dropmic is closed
    beforeOpen function Callback to execute before opening dropmic
    beforeClose function Callback to execute before closing dropmic

    Example:

    var dropmic = new Dropmic(document.querySelector('[data-dropmic="1"]'), {
      onOpen: function() {
          dropmic.updateTargetBtn("Click to close");
      },
      onClose: function() {
          dropmic.updateTargetBtn("Bottom right (default)");
      }
    });

    Modify dropmic

    1. Setup dependencies: npm i (or npm ci if you don't want to impact package-lock)
    2. Run hot-reloads server for development npm run dev
    3. (Build for production npm run build)

    Roadmap

    • Add open and close public method in the API
    • Add top-middle and bottom-middle direction
    • A11y friendly (with keyboard navigation)
    • Permit to update button content with dropdown is open
    • Instantiate severals dropmic with one initialization command
    • Permit to update a list item value

    Licence

    Released under the MIT LICENSE

    Install

    npm i dropmic

    DownloadsWeekly Downloads

    62

    Version

    0.3.3

    License

    MIT

    Unpacked Size

    104 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar