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

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 om 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

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

<div class="c-objectlist--medium">
   <ul style="padding: 0">
      <li class="list-item">
         <a href="">Inställningar</a>
      </li>
      <li class="list-item">
         <button>Säkerhet</button>
      </li>
      <li class="list-item">
         <span tabindex="0">Byt användare</span>
      </li>
      <li class="list-item">
         <span><button>Exportera</button></span>
      </li>
      <li class="list-item">
         <a href="">Importera</a>
      </li>
      <li class="list-item">
         <a href="">Logga ut</a>
      </li>
   </ul>
</div>

Small

<div class="c-objectlist--small">
   <ul style="padding: 0">
      <li class="list-item">
         <a href="">Inställningar</a>
      </li>
      <li class="list-item">
         <button>Säkerhet</button>
      </li>
      <li class="list-item">
         <span tabindex="0">Byt användare</span>
      </li>
      <li class="list-item">
         <span><button>Exportera</button></span>
      </li>
      <li class="list-item">
         <a href="">Importera</a>
      </li>
      <li class="list-item">
         <a href="">Logga ut</a>
      </li>
   </ul>
</div>

Medium i en dropdown

<jv-dropdown btn-ref="triggerBtn_large" content-ref="content" options="{size: 'medium'}">
  <button slot="triggerBtn_large" class="c-btn-text--large 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 style="padding: 0">
      <li class="list-item">
        <a href="">Inställningar</a>
      </li>
      <li class="list-item">
        <a href="">Säkerhet</a>
      </li>
      <li class="list-item">
        <a href="">Byt användare</a>
      </li>
      <li class="list-item">
        <a href="">Exportera</a>
      </li>
      <li class="list-item">
        <a href="">Importera</a>
      </li>
      <li class="list-item">
        <a href="">Logga ut</a>
      </li>
    </ul>
  </div>
</jv-dropdown>

Small i en dropdown

<jv-dropdown btn-ref="triggerBtn_large" content-ref="content" options="{size: 'medium'}">
  <button slot="triggerBtn_large" class="c-btn-text--medium 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 style="padding: 0">
      <li class="list-item">
        <a href="">Inställningar</a>
      </li>
      <li class="list-item">
        <a href="">Säkerhet</a>
      </li>
      <li class="list-item">
        <a href="">Byt användare</a>
      </li>
      <li class="list-item">
        <a href="">Exportera</a>
      </li>
      <li class="list-item">
        <a href="">Importera</a>
      </li>
      <li class="list-item">
        <a href="">Logga ut</a>
      </li>
    </ul>
  </div>
</jv-dropdown>

Senast publicerad

Sidansvarig för sidan är Styleguide