Åpne/lukke-boks Boks som kan åpnes og lukkes ved trykk.

Struktur

<lk-toggle>
  <button>
    <span>
      <slot name="title" />
    </span>
    <span>
      <svg>
        ...
      </svg>
    </span>
  </button>
  <div>
    <slot/>
  </div>
</lk-toggle>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt Tillatte verdier Default Beskrivelse
small boolean false
color string "green"
opened boolean false
has-counter boolean false
class string Bruk class="background--color", f. eks. "background--blue--pale" for å legge til en farget bakgrunn til innholdet
background hex:string null Deprecated

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot= Beskrivelse
* Elementer uten slot= attributter blir plassert inni en <div> som vises/skjules
title Plasseres i et <span> som alltid synes

Metoder

Merk at alle metoder er asynkrone. Ref. Stenciljs.com

Metode Parameter Retur Beskrivelse
changeDisplayStatus (display:boolean) null

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.

Om Fleetwood

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat. Nulla malesuada pellentesque elit eget gravida. Odio euismod lacinia at quis risus sed vulputate odio. Pellentesque elit ullamcorper dignissim cras tincidunt. Porttitor rhoncus dolor purus non enim. In mollis nunc sed id semper. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Ut morbi tincidunt augue interdum velit euismod in pellentesque. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Non sodales neque sodales ut etiam sit amet. Nulla pellentesque dignissim enim sit amet.

A arcu cursus vitae congue mauris. Netus et malesuada fames ac turpis egestas sed. Netus et malesuada fames ac turpis. Habitant morbi tristique senectus et netus et. Euismod nisi porta lorem mollis aliquam ut porttitor. Vitae nunc sed velit dignissim sodales ut eu sem integer. Ornare aenean euismod elementum nisi. Augue neque gravida in fermentum et. Convallis posuere morbi leo urna molestie at elementum. Quis commodo odio aenean sed adipiscing. Tellus in metus vulputate eu scelerisque. Ut eu sem integer vitae justo eget. Scelerisque in dictum non consectetur a. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Dui nunc mattis enim ut tellus elementum sagittis. Ac auctor augue mauris augue neque. Eu sem integer vitae justo.

Enda mer om Fleetwood

Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Facilisi cras fermentum odio eu. Sed augue lacus viverra vitae congue eu consequat ac. Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Commodo ullamcorper a lacus vestibulum sed arcu non odio. Est ante in nibh mauris cursus mattis molestie. Euismod lacinia at quis risus. In egestas erat imperdiet sed euismod nisi. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Mollis aliquam ut porttitor leo a diam sollicitudin tempor id. Quis vel eros donec ac odio tempor orci. Enim ut tellus elementum sagittis vitae et leo duis.

Nullam non nisi est sit amet facilisis. Eget felis eget nunc lobortis mattis. Viverra aliquet eget sit amet tellus. Turpis tincidunt id aliquet risus feugiat. Aliquam malesuada bibendum arcu vitae. Neque sodales ut etiam sit amet nisl purus. In nulla posuere sollicitudin aliquam ultrices sagittis orci a. Nec tincidunt praesent semper feugiat. Id diam vel quam elementum pulvinar etiam non quam. Nulla malesuada pellentesque elit eget. In dictum non consectetur a. Quis auctor elit sed vulputate. Dolor sit amet consectetur adipiscing elit. Proin sagittis nisl rhoncus mattis rhoncus urna neque. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu. Congue mauris rhoncus aenean vel elit. Nunc sed augue lacus viverra.

Lillestrøm kommune

Yo!
Det er jammen lite her.

Web og Portal

Yo!
Det er jammen lite her.

StencilJS

Yo!
Det er jammen lite her.

Open from begininng

Yo!
Det er jammen lite her.


Bakgrunn

Yo!
Det er jammen lite her.



Avfall og gjenvinning
Neste hente dato avfall:
Din addresse
Din Hentedato

22.01.2020

22.01.2020

Neste hente dato avfall:
Din addresse
Din Hentedato

22.01.2020

22.01.2020


Åpne/lukke bokser med nummer

  1. Om Fleetwood

    Yo!
    Det er jammen lite her.

  2. Lillestrøm kommune

    Yo!
    Det er jammen lite her.

  3. Web og Portal

    Yo!
    Det er jammen lite her.

  4. StencilJS

    Yo!
    Det er jammen lite her.

<lk-toggle>
  <h2 slot="title">Om Fleetwood </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat. Nulla malesuada pellentesque elit eget gravida. Odio euismod lacinia at quis risus sed vulputate odio. Pellentesque elit ullamcorper dignissim cras tincidunt. Porttitor rhoncus dolor purus non enim. In mollis nunc sed id semper. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Ut morbi tincidunt augue interdum velit euismod in pellentesque. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Non sodales neque sodales ut etiam sit amet. Nulla pellentesque dignissim enim sit amet.</p>
  <p>A arcu cursus vitae congue mauris. Netus et malesuada fames ac turpis egestas sed. Netus et malesuada fames ac turpis. Habitant morbi tristique senectus et netus et. Euismod nisi porta lorem mollis aliquam ut porttitor. Vitae nunc sed velit dignissim sodales ut eu sem integer. Ornare aenean euismod elementum nisi. Augue neque gravida in fermentum et. Convallis posuere morbi leo urna molestie at elementum. Quis commodo odio aenean sed adipiscing. Tellus in metus vulputate eu scelerisque. Ut eu sem integer vitae justo eget. Scelerisque in dictum non consectetur a. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Dui nunc mattis enim ut tellus elementum sagittis. Ac auctor augue mauris augue neque. Eu sem integer vitae justo.</p>
  <lk-toggle class="background--green--pale">
    <h2 slot="title">Enda mer om Fleetwood </h2>
    <p>Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Facilisi cras fermentum odio eu. Sed augue lacus viverra vitae congue eu consequat ac. Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Commodo ullamcorper a lacus vestibulum sed arcu non odio. Est ante in nibh mauris cursus mattis molestie. Euismod lacinia at quis risus. In egestas erat imperdiet sed euismod nisi. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Mollis aliquam ut porttitor leo a diam sollicitudin tempor id. Quis vel eros donec ac odio tempor orci. Enim ut tellus elementum sagittis vitae et leo duis.</p>
    <p>Nullam non nisi est sit amet facilisis. Eget felis eget nunc lobortis mattis. Viverra aliquet eget sit amet tellus. Turpis tincidunt id aliquet risus feugiat. Aliquam malesuada bibendum arcu vitae. Neque sodales ut etiam sit amet nisl purus. In nulla posuere sollicitudin aliquam ultrices sagittis orci a. Nec tincidunt praesent semper feugiat. Id diam vel quam elementum pulvinar etiam non quam. Nulla malesuada pellentesque elit eget. In dictum non consectetur a. Quis auctor elit sed vulputate. Dolor sit amet consectetur adipiscing elit. Proin sagittis nisl rhoncus mattis rhoncus urna neque. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu. Congue mauris rhoncus aenean vel elit. Nunc sed augue lacus viverra.</p>
  </lk-toggle>
</lk-toggle>

<lk-toggle>
  <h2 slot="title">Lillestrøm kommune</h2>
  <p>Yo!<br>Det er jammen lite her.</p>
</lk-toggle>

<lk-toggle>
  <h3 slot="title">Web og Portal</h3>
  <p>Yo!<br>Det er jammen lite her.</p>
</lk-toggle>

<lk-toggle>
  <h3 slot="title">StencilJS</h3>
  <p>Yo!<br>Det er jammen lite her.</p>
</lk-toggle>

<lk-toggle opened>
  <h4 slot="title">Open from begininng</h4>
  <p>Yo!<br>Det er jammen lite her.</p>
</lk-toggle>
<br>

<lk-toggle background="#F9E4C7">
  <h4 slot="title">Bakgrunn</h4>
  <p>Yo!<br>Det er jammen lite her.</p>
</lk-toggle>

<br><br>

<!-- Example -->

<lk-toggle>
  <span slot="title">Avfall og gjenvinning</span>

  <div class="link-out margin-bottom--large">
    <h5 class="small-title">Her kan du: </h5>
    <ul>
      <li><a href="">Bestille ny ferie! </a></li>
      <li><a href="">Bestille andre ferie!</a></li>
    </ul>
  </div>

  <h5 class="small-title span-whole margin-y--large">Neste hente dato avfall:</h5>
  <div class="grid grid--no-gap">
    <h6
      class="padding-left--large padding-bottom--tiny padding--no-side-mobile  span-half  span-half-on-tablet span-half-on-mobile tiny-title">
      Din addresse</h6>
    <h6 class="padding-bottom--tiny span-half  span-half-on-tablet span-half-on-mobile tiny-title">Din Hentedato</h6>

    <lk-icon class="span-half padding-top--tiny   span-half-on-tablet span-half-on-mobile" name="real-state"
      text="Lillestrøm 18">
    </lk-icon>
    <p class="span-half padding-top--tiny  span-half-on-tablet span-half-on-mobile">22.01.2020</p>

    <lk-icon class="span-half padding-top--tiny   span-half-on-tablet span-half-on-mobile" name="real-state"
      text="Bekkestua 18"></lk-icon>
    <p class="span-half padding-top--tiny  span-half-on-tablet span-half-on-mobile">22.01.2020</p>
  </div>

  <h5 class="small-title span-whole margin-y--large">Neste hente dato avfall:</h5>
  <div class="grid grid--no-gap">
    <h6
      class="padding-left--large padding-bottom--tiny padding--no-side-mobile  span-half  span-half-on-tablet span-half-on-mobile tiny-title">
      Din addresse</h6>
    <h6 class="padding-bottom--tiny span-half  span-half-on-tablet span-half-on-mobile tiny-title">Din Hentedato</h6>

    <lk-icon class="span-half padding-top--tiny   span-half-on-tablet span-half-on-mobile" name="real-state"
      text="Lillestrøm 18">
    </lk-icon>
    <p class="span-half padding-top--tiny  span-half-on-tablet span-half-on-mobile">22.01.2020</p>

    <lk-icon class="span-half padding-top--tiny   span-half-on-tablet span-half-on-mobile" name="real-state"
      text="Bekkestua 18"></lk-icon>
    <p class="span-half padding-top--tiny  span-half-on-tablet span-half-on-mobile">22.01.2020</p>
  </div>

</lk-toggle>




<!-- <lk-toggle>
  <span slot="title">Avfall og gjenvinning</span>

  <div class="link-out margin-bottom--large">
    <h5 class="small-title">Her kan du: </h5>
    <ul>
      <li><a href="">Bestille ny ferie! </a></li>
      <li><a href="">Bestille andre ferie!</a></li>
    </ul>
  </div>

  <div class="grid">
    <h5 class="small-title span-whole">Neste hente dato avfall:</h5>
    <table class="span-whole">
      <thead class="span-whole margin-bottom--large">
        <tr class="span-whole margin-y--base">
          <th class="span-third tiny-title">
          </th>
          <th class="span-third tiny-title">
            Din Addresse
          </th>
          <th class="span-third tiny-tile">
            Din Hentedato
          </th>
        </tr>
      </thead>
      <tbody class="span-whole">
        <tr class="align-center">
          <td class="span-third">
            <lk-icon name="real-state"></lk-icon>
          </td>
          <td class="span-third">Lillestrøm 18</td>
          <td class="span-third">22.01.2020</td>
        </tr>
        <tr class="align-center align-center">
          <td class="span-third">
            <lk-icon name="real-state"></lk-icon>
          </td>
          <td class="span-third">Lillestrøm 18</td>
          <td class="span-third">22.01.2020</td>
        </tr>
      </tbody>
    </table>

    <h5 class="small-title span-whole">Neste hente dato avfall:</h5>
    <table class="span-whole">
      <thead class="span-whole">
        <tr class="span-whole">
          <th class="span-third tiny-title">
          </th>
          <th class="span-third tiny-title">
            Din Addresse
          </th>
          <th class="span-third tiny-tile">
            Din Hentedato
          </th>
        </tr>
      </thead>
      <tbody class="span-whole">
        <tr class="align-center">
          <td class="span-third">
            <lk-icon name="real-state"></lk-icon>
          </td>
          <td class="span-third">Lillestrøm 18</td>
          <td class="span-third">22.01.2020</td>
        </tr>
        <tr class="align-center align-center">
          <td class="span-third">
            <lk-icon name="real-state"></lk-icon>
          </td>
          <td class="span-third">Lillestrøm 18</td>
          <td class="span-third">22.01.2020</td>
        </tr>
      </tbody>
    </table>

  </div>
</lk-toggle> -->

<!-- End -->

<br>
<p class="paragraph--lead">Åpne/lukke bokser med nummer</p>

<ol class="lk-toggle-list">
  <li>
    <lk-toggle has-counter=true>
      <span slot="title">Om Fleetwood </span>
      <p>Yo!<br>Det er jammen lite her.</p>
    </lk-toggle>
  </li>

  <li>
    <lk-toggle has-counter=true>
      <span slot="title">Lillestrøm kommune</span>
      <p>Yo!<br>Det er jammen lite her.</p>
    </lk-toggle>
  </li>

  <li>
    <lk-toggle has-counter=true>
      <span slot="title">Web og Portal</span>
      <p>Yo!<br>Det er jammen lite her.</p>
    </lk-toggle>
  </li>

  <li>
    <lk-toggle has-counter=true>
      <span slot="title">StencilJS</span>
      <p>Yo!<br>Det er jammen lite her.</p>
    </lk-toggle>
  </li>
</ol>

Hvor finner jeg denne koden?