Objektlista

Använd en objektlista när du vill placera funktioner som användaren kan välja mellan i en lista.

Design och språk

När du ska använda en objektlista

Använd en objektlista när du vill placera funktioner som användaren kan välja mellan i en lista. Det vanligaste sättet att använda en objektlista är att placera den i en dropdown-komponent för att samla ihop funktioner som inte används så ofta eller för att utrymmet på skärmen är begränsat. De funktioner som du kan placera i en objektlista kan vara funktioner som till exemepl inställningar, logga ut och exportera.

Text på alternativen

Texten på alternativen ska vara kort men tillräckligt lång för att användaren ska förstå vad som händer när den väljer en funktion.

Alternativa komponenter

Komponent och kod

Komponenten driftsattes första gången i version 15.2.7.

För listor kan det vara bra att ange en beskrivning på vad syftet med listan är (detta är inte obligatorisk men kan vara nödvändigt i vissa sammanhang). Detta gör man enklast med ange någon av attributen aria-label, aria-labeldby eller title på ett list element t.ex. ul, ol, dl eller [role="list"].

Medium

HTML
<div class="c-objectlist--medium">
   <ul class="c-objectlist__list">
      <li class="c-objectlist__list-item">
         <a href="">Inställningar</a>
      </li>
      <li class="c-objectlist__list-item">
         <a href="">Säkerhet</a>
      </li>
      <li class="c-objectlist__list-item">
         <a href="">Byt användare</a>
      </li>
      <li class="c-objectlist__list-item">
         <a href="">Exportera</a>
      </li>
      <li class="c-objectlist__list-item">
         <a href="">Importera</a>
      </li>
      <li class="c-objectlist__list-item">
         <a href="">Logga ut</a>
      </li>
   </ul>
</div>

Small

HTML
<div class="c-objectlist--small">
   <ul class="c-objectlist__list">
      <li class="c-objectlist__list-item">
         <a href="">Inställningar</a>
      </li>
      <li class="c-objectlist__list-item">
         <a href="">Säkerhet</a>
      </li>
      <li class="c-objectlist__list-item">
         <a href="">Byt användare</a>
      </li>
      <li class="c-objectlist__list-item">
         <a href="">Exportera</a>
      </li>
      <li class="c-objectlist__list-item">
         <a href="">Importera</a>
      </li>
      <li class="c-objectlist__list-item">
         <a href="">Logga ut</a>
      </li>
   </ul>
</div>

Medium i en dropdown

HTML
<jv-dropdown btn-ref="triggerBtn_large" content-ref="content" options='{"size": "medium"}'>
  <button slot="triggerBtn_large" class="c-btn--medium sjv-caret-test" aria-haspopup="menu">
    Inloggad som Kalle Testsson &nbsp;<span class="sjv-i-caret-ner"></span>
  </button>
  <div class="c-objectlist--medium" slot="content">
    <ul class="c-objectlist__list">
      <li class="c-objectlist__list-item">
        <a href="">Inställningar</a>
      </li>
      <li class="c-objectlist__list-item">
        <a href="">Säkerhet</a>
      </li>
      <li class="c-objectlist__list-item">
        <a href="">Byt användare</a>
      </li>
      <li class="c-objectlist__list-item">
        <a href="">Exportera</a>
      </li>
      <li class="c-objectlist__list-item">
        <a href="">Importera</a>
      </li>
      <li class="c-objectlist__list-item">
        <a href="">Logga ut</a>
      </li>
    </ul>
  </div>
</jv-dropdown>

Small i en dropdown

HTML
<jv-dropdown btn-ref="triggerBtn_large" content-ref="content" options='{"size": "medium"}'>
  <button slot="triggerBtn_large" class="c-btn--compact sjv-caret-test" aria-haspopup="menu">
    Inloggad som Kalle Testsson &nbsp;<span class="sjv-i-caret-ner"></span>
  </button>
  <div class="c-objectlist--small" slot="content">
    <ul class="c-objectlist__list-item">
      <li class="c-objectlist__list-item">
        <a href="">Inställningar</a>
      </li>
      <li class="c-objectlist__list-item">
        <a href="">Säkerhet</a>
      </li>
      <li class="c-objectlist__list-item">
        <a href="">Byt användare</a>
      </li>
      <li class="c-objectlist__list-item">
        <a href="">Exportera</a>
      </li>
      <li class="c-objectlist__list-item">
        <a href="">Importera</a>
      </li>
      <li class="c-objectlist__list-item">
        <a href="">Logga ut</a>
      </li>
    </ul>
  </div>
</jv-dropdown>

Senast publicerad

Sidansvarig för sidan är Styleguide