@kanety/stimulus-contextmenu

    1.0.1 • Public • Published

    stimulus-contextmenu

    A stimulus controller for simple contextmenu.

    Dependencies

    • @hotwired/stimulus 3.0

    Installation

    Install from npm:

    $ npm install @kanety/stimulus-contextmenu --save
    

    Usage

    Register controller:

    import { Application } from '@hotwired/stimulus';
    import ContextmenuController from '@kanety/stimulus-contextmenu';
    
    const application = Application.start();
    application.register('contextmenu', ContextmenuController);

    Import css:

    @import '@kanety/stimulus-contextmenu';

    Build html as follows:

    <div data-controller="contextmenu">
      <p>content</p>
      <p>content</p>
      <ul class="st-contextmenu" data-contextmenu-target="menu">
        <li><a href="#">Menu1-1</a></li>
        <li><a href="#">Menu1-2</a></li>
      </ul>
    </div>

    You can specify context area bound to menu:

    <div data-controller="contextmenu">
      <div data-contextmenu-target="context">
        <p>content</p>
        <p>content</p>
      </div>
      <ul class="st-contextmenu" data-contextmenu-target="menu">
        <li><a href="#">Menu1-1</a></li>
        <li><a href="#">Menu1-2</a></li>
      </ul>
    </div>

    You can also use @kanety/stimulus-menu as menu:

    <div data-controller="contextmenu">
      <p>content</p>
      <p>content</p>
      <div class="st-contextmenu" data-contextmenu-target="menu">
        <ul class="st-menu st-menu--vertical" data-controller="menu">
          <li>
            <span class="st-menu__icon"><a href="#">Menu1</a></span>
            <ul class="st-menu--vertical">
              <li><a href="#">Menu1-1</a></li>
              <li><a href="#">Menu1-2</a></li>
            </ul>
          </li>
          <li>
            <span class="st-menu__icon"><a href="#">Menu2</a></span>
            <ul class="st-menu--vertical">
              <li><a href="#">Menu2-1</a></li>
              <li><a href="#">Menu2-2</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

    License

    The library is available as open source under the terms of the MIT License.

    Install

    npm i @kanety/stimulus-contextmenu

    DownloadsWeekly Downloads

    155

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    22.6 kB

    Total Files

    24

    Last publish

    Collaborators

    • kanety