Använd en objektlista när du vill placera funktioner som användaren kan välja mellan i en lista.
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.
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.
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"]
.
<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>
<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>
<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 <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>
<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 <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>