Back to Panel-guidelines

JavaScriptThe latest version of this package is: 0.17.4, 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.17.4

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

Todo

  • Add keyboard navigation support, and keep in mind issues with navigation on selectable panels

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

Contact us, Opens in new window