Nightingale Posing Mischievously

    wc-menu-button
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.0 • Public • Published

    Build Published on webcomponents.org npm

    wc-menu-button

    A simple, animating side drawer built as a Web Component

    wc-menu-button demo

    Demo

    Installation

    You can integrate wc-menu-button via <script> tag or via NPM.

    Via <script> tag

    In the <head> of your index.html put a script tag like this:

    <script
      type="module"
      src="https://unpkg.com/wc-menu-button/wc-menu-button.js"
    ></script>
    
    <!-- Or use the minified version -->
    <script
      type="module"
      src="https://unpkg.com/wc-menu-button/wc-menu-button.min.js"
    ></script>

    Now you can use the wc-menu-button element anywhere in your html, JSX, template, etc.

    Via NPM

    npm install wc-menu-button --save

    And then you need to import the module before you can use it in your html/jsx/template:

    import "wc-menu-button";

    Web Component Browser Support

    This web component uses HTML templates, the shadow DOM, and custom elements. If you need to polyfill for any of these standards then take a look at the web components polyfill.

    API and Customization

    Attributes/Properties

    • open
      • Add this attribute to put the menu button in the "open" state.
        • Example: <wc-menu-button open></wc-menu-button>
      • Set the property in Javascript to imperatively toggle the drawer
        • Example: drawer.open = true
      • In (p)react you might need to set undefined in your JSX (since false !== undefined for html attribute existence)
        • Example: <wc-menu-button open={this.state.isMenuOpen || undefined}></wc-menu-button>

    Events

    • opened
      • Raised when the menu button changes to the "open" state.
      • Example: menu.addEventListener("opened", handleOpen())
      • When subscribing in html listen for onopened
        • Ex: <wc-menu-button onopened="handleOpen()">
    • closed
      • Raised when the menu button changes to the not "open" state.
      • Example: menu.addEventListener("closed", handleClose())
      • When subscribing in html listen for onclosed
        • Ex: <wc-menu-button onclosed="handleClose()">

    Styling

    You can style the wc-menu-button element as you would any regular element, in CSS. A list of supported CSS properties are below, along with the default values.

    :root {
      /* Menu button color is set with CSS variable */
      --wc-menu-button-color: #000000;
    
      /* The default mouse cursor is used by default */
      --wc-menu-button-cursor: default;
    }
    
    /* You only need to set the width, the height is calculated to maintain proportion */
    wc-menu-button {
      width: 37px;
    }
    
    /* Set to `1.0` if you do not want any hover opacity effect */
    wc-menu-button:hover {
      opacity: 0.75;
    }

    Contribute

    This project is built with standard HTML/CSS/TS, no frameworks or special web-component compilers here (for maximum simplicity and minimum size). If you want to learn more about writing custom elements see MDN or this web fundamentals page.

    The source for this web component is contained in wc-menu-button.js and example usage is in index.html. To debug/run the example you can just open index.html in a browser. For a hot-reload developer experience try using live server in vscode.

    You will need the dev dependencies of this project installed to run the post-commit hooks.

    npm install

    Acknowledgements

    Thanks to BrowserStack for cross browser testing.

    BrowserStack

    Install

    npm i wc-menu-button

    DownloadsWeekly Downloads

    100

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    15 kB

    Total Files

    6

    Last publish

    Collaborators

    • wes566