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å en 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

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
  </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
  </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 2021-06-18

Sidansvarig för sidan är Styleguide