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
<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
<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
<jv-dropdown btn-ref="triggerBtn_large" content-ref="content" options='{"size": "medium"}'>
<button slot="triggerBtn_large" class="c-btn 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>Small i en dropdown
<jv-dropdown btn-ref="triggerBtn_medium" content-ref="content" options='{"size": "medium"}'>
<button type="button" slot="triggerBtn_medium" class="c-btn 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">
<!-- Detta är innehållet i dropdown komponenten och kan innehålla vad som helst. -->
<!-- I detta exmplet består innehållet av en objektlista med länkar. -->
<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>Senast publicerad
Sidansvarig för sidan är Styleguide