@servicensw/regions
v2.2.26
Published
Region toggle component
Downloads
250
Maintainers
Keywords
Readme
@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
The recommended usage is of ES modules, to take advantage of code-splitting.
import RegionToggle from "@servicensw/regions"
const regionToggles = document.querySelectorAll(".regions:not(.is-excluded)")
regionToggles.forEach(element => {
new RegionToggle(element)
})
Legacy usage;
- IIFE:
<script src="dist/region-toggle.js" type="text/javascript"></script>
(initialized for all.regions
elements) - Common JS:
const RegionToggle = require("@servicensw/regions")
(initialize yourself)
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.
Change log