Newtonian Particle Motion

    @servicensw/regions

    2.1.15 • Public • Published

    @servicensw/regions

    Regions that show/hide. Suitable to be used with drop menus or tab navigation.

    Service NSW package documentation and examples
    (Login credentials required)

    Installation

    npm install @servicensw/regions --save-dev
    

    How to use

    CSS

    • PostCSS workflow: @import '@servicensw/regions';
    • Sass/Eyeglass: @import 'servicensw-regions';
    • Native CSS: @import url('dist/regions.css');
    • Link tag: <link href="dist/regions.css" rel="stylesheet" type="text/css">

    Vanilla JS

    • Vanilla JS / ES6: import '@servicensw/regions';
    • Script tag: <script src="dist/region-toggle.js" type="text/javascript"></script>

    Vanilla JS is called on DOMContentLoaded for all .regions elements.

    Alternatively, initialise it manually for a specific HTML element:

    const regionElement = document.querySelector(".region")
    const regions = new SNSW.RegionToggle(regionElement)

    HTML

    <ul>
      <li><a aria-controls="showHideRegion1">Region 1</a></li>
      <li><a aria-controls="showHideRegion2">Region 2</a></li>
      <li><a aria-controls="showHideRegion3">Region 3</a></li>
    </ul>
    <div class="regions">
      <div role="region" id="showHideRegion1" aria-label="Region 1">
        <p>Region 1</p>
      </div>
      <div role="region" id="showHideRegion2" aria-label="Region 2">
        <p>Region 2</p>
      </div>
      <div role="region" id="showHideRegion3" aria-label="Region 3">
        <p>Region 3</p>
      </div>
    </div>

    Developer notes

    Each region must have an id and role="region" attribute. The toggle for that region must have an aria-controls atttribute with the regions id as its value.

    Keywords

    none

    Install

    npm i @servicensw/regions

    DownloadsWeekly Downloads

    238

    Version

    2.1.15

    License

    MIT

    Unpacked Size

    10.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • rikki_iki
    • acbramley
    • erinsnsw
    • dojob65
    • ramya.shankaralingam
    • mariam.khoudier
    • christine.roque
    • previousnext-admin
    • mcaddz
    • jptaranto