JavaScriptThe latest version of this package is: 0.18.6, Opens in new window
JavaScript library for the Panel Component
This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-js/panel@0.18.6
Table of Contents
Usage
Required markup
<div class="if panel is-expandable">
<div
class="if title"
aria-expanded="false"
aria-controls="exp-main-1"
tabindex="0"
>
Expelliarmus
</div>
<div class="if content" role="region" id="exp-main-1" tabindex="-1">
<p class="if text lead center">
Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr
eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig
som äger hus.
</p>
<p class="if text body center">
En husägare kan råka ut för olika händelser. Det kan vara inbrott, brand-
eller vattenskada eller att värmepannan går sönder. I villaförsäkringen
ingår reseskydd och försäkring för de personliga saker du och familjen
äger, hyr eller lånar. Villaförsäkringen kan du köpa till villa, radhus
eller kedjehus.
</p>
<div class="if input-wrapper center">
<button type="button" class="if button primary large">
Jämför våra villaförsäkringar
</button>
</div>
</div>
</div>
With script tag
<script src="/assets/panel.iife.js"></script>
<script>
const expandables = document.querySelectorAll('.if.panel.is-expandable');
expandables.forEach((expandable) => {
new IDSPanel.Panel(expandable);
});
</script>
As a module
import { Panel as IDSPanel } from '@ids-js/panel';
const expandables = document.querySelectorAll('.if.panel.is-expandable');
expandables.forEach((expandable) => {
new IDSPanel(expandable);
});
Api
IDSPanel
Kind: global class
- IDSPanel
- new IDSPanel()
- .isOpen :
Boolean
- .panel :
Element
- .isExpandable :
Element
- .isSelectable :
Element
- .expandableButtonEl :
Element
- .expandableContentEl :
Element
- .radioButtonEl :
Element
- .closeAllExpandables()
- .toggle()
- .close()
- .open()
- .initExpandable()
- .init()
new IDSPanel()
A library to set up usage of the Panel Component
idsPanel.isOpen : Boolean
Kind: instance property of IDSPanel
idsPanel.panel : Element
Kind: instance property of IDSPanel
idsPanel.isExpandable : Element
Kind: instance property of IDSPanel
idsPanel.isSelectable : Element
Kind: instance property of IDSPanel
idsPanel.expandableButtonEl : Element
Kind: instance property of IDSPanel
idsPanel.expandableContentEl : Element
Kind: instance property of IDSPanel
idsPanel.radioButtonEl : Element
Kind: instance property of IDSPanel
idsPanel.closeAllExpandables()
Get sibling expandables
Kind: instance method of IDSPanel
idsPanel.toggle()
Toggle panel, if expandable
Kind: instance method of IDSPanel
idsPanel.close()
Close current panel, if it is expandable
Kind: instance method of IDSPanel
idsPanel.open()
Open current panel, if it is expandable
Kind: instance method of IDSPanel
idsPanel.initExpandable()
Initialize expandable panel
Kind: instance method of IDSPanel
idsPanel.init()
Initialize
Kind: instance method of IDSPanel
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.17.0 (2021-10-21)
Code Refactoring
- 💡 Remove support for CommonJS (9f84d9a)
BREAKING CHANGES
- 🧨 We have removed the support for CommonJS for all @ids-js packages
0.16.1 (2021-10-21)
Bug Fixes
- Use common for cjs and main for esm (96f673d)