En dropdown kan du till exempel använda för en meny och för val som användaren inte behöver ha synliga hela tiden.
Använd en dropdown när du vill dölja val som användaren inte behöver ha tillgång till hela tiden. Det kan till exempel vara en meny eller avancerad funktionalitet.
En dropdown kan innehålla flera typer av innehåll. Det kan till exempel vara en meny, knappar, bilder, länkar eller texter. När en dropdown fälls ut placeras innehållet ovanpå och täcker alltså det övriga innehållet på sidan. Själva komponenten dropdown är den del som fälls ut. Du kan använda andra komponenter som till exempel en knapp för att öppna en dropdown.
Komponenten driftsattes första gången i version 13.0.0.
Du kan själv bestämma maxbredden på ytan som fälls ut. Den minsta bredden är inställd på:
Egenskap | Attribut | Beskrivning | Typ | Förvalt värde |
---|---|---|---|---|
btnRef | btn-ref | Referens till knappen som triggar dropdownen. | string | - |
contentRef | content-ref | Referens till innehållet i dropdown. | string | - |
extraClass | extra-class | Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2" | string | - |
open | open | Ska dropdown var utfälld? | boolean | false |
options | options | Options friviliga attribut för att ändra storlek, knapp CSS style och om dropdown ska vara högerjusterad. Obs. måste föjla json format. Exempel: { "size": "large", "alignRight": false, "offset": 10, "maxWidth":"40em" } | json eller string i ett strict json format | - |
Event | Beskrivning | Typ |
---|---|---|
openChange | Change event som triggas varje gång dropdown visas eller stängs, värdet syns i propertyn "detail". | CustomEvent<boolean> |
Event | Beskrivning | Typ |
---|---|---|
jvDropdownOpen | Öppnar dropdown | CustomEvent |
jvDropdownClose | Stänger dropdown | CustomEvent |
jvDropdownToggle | Togglar dropdown | CustomEvent |
<jv-dropdown btn-ref="triggerBtn_large" content-ref="content" options='{
"size": "large"
}'>
<button type="button" slot="triggerBtn_large" class="c-btn--medium sjv-caret-test" aria-haspopup="menu">
Inmatningsfält <span class="sjv-i-caret-ner"></span>
</button>
<div class="c-objectlist--medium" 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="https://styleguide.jordbruksverket.se/komponenter/bifoga-fil.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Bifoga fil</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/checkboxar.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Checkboxar</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/datumfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Datumfält</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multi-select.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Multi-select</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multitextfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Multitextfält</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/radioknappar.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Radioknappar</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/single-select.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Single-select</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textyta.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Textyta</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Inmatningsfält</a></li>
</ul>
</div>
</jv-dropdown>
<jv-dropdown btn-ref="triggerBtn_medium" content-ref="content" options='{
"size": "medium"
}'>
<button type="button" slot="triggerBtn_medium" class="c-btn--compact sjv-caret-test" aria-haspopup="menu">
Inmatningsfält <span class="sjv-i-caret-ner"></span>
</button>
<div class="c-objectlist--medium" 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="https://styleguide.jordbruksverket.se/komponenter/bifoga-fil.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Bifoga fil</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/checkboxar.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Checkboxar</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/datumfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Datumfält</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multi-select.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Multi-select</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multitextfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Multitextfält</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/radioknappar.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Radioknappar</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/single-select.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Single-select</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textyta.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Textyta</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Inmatningsfält</a></li>
</ul>
</div>
</jv-dropdown>
<jv-dropdown btn-ref="triggerBtn_small" options='{
"size": "small"
}' content-ref="content_small">
<button type="button" slot="triggerBtn_small" class="c-btn--small sjv-caret-test" aria-haspopup="menu">
Bilder <span class="sjv-i-caret-ner"></span>
</button>
<div slot="content_small">
<!-- Detta är innehållet i dropdown komponenten och kan innehålla vad som helst. -->
<!-- I detta exmplet består innehållet av bilder. -->
<div style="padding: 0.5rem">
<img alt="Bild på en sjö omgiven av berg" src="https://cdn.jordbruksverket.se/designsystem/20.0.45/package/dist/release/assets/dropdown_small_img1.jpg">
</div>
<div style="padding: 0.5rem">
<img alt="Bild på en solnedgång" src="https://cdn.jordbruksverket.se/designsystem/20.0.45/package/dist/release/assets/dropdown_small_img2.jpg">
</div>
<div style="padding: 0.5rem">
<img alt="Bild på en bergskedja" src="https://cdn.jordbruksverket.se/designsystem/20.0.45/package/dist/release/assets/dropdown_small_img3.jpg">
</div>
<div style="padding: 0.5rem; padding-bottom: 0">
<img alt="Bild på ett berg" src="https://cdn.jordbruksverket.se/designsystem/20.0.45/package/dist/release/assets/dropdown_small_img4.jpg">
</div>
</div>
</jv-dropdown>
<jv-dropdown btn-ref="triggerBtn_right" options='{
"size": "medium",
"alignRight": true
}' content-ref="content_right-align">
<button type="button" slot="triggerBtn_right" class="c-btn--compact sjv-caret-test" aria-haspopup="menu">
Inmatningsfält <span class="sjv-i-caret-ner"></span>
</button>
<div class="c-objectlist--medium" slot="content_right-align">
<!-- 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="https://styleguide.jordbruksverket.se/komponenter/bifoga-fil.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Bifoga fil</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/checkboxar.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Checkboxar</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/datumfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Datumfält</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multi-select.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Multi-select</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multitextfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Multitextfält</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/radioknappar.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Radioknappar</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/single-select.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Single-select</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textyta.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Textyta</a></li>
<li class="c-objectlist__list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Inmatningsfält</a></li>
</ul>
</div>
</jv-dropdown>
Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
<jv-dropdown btn-ref="triggerBtn_text_image" options='{
"size": "medium"
}' content-ref="content_medium">
<button type="button" slot="triggerBtn_text_image" class="c-primary-btn--medium sjv-caret-test" aria-haspopup="menu">
Jordbruksverkets styleguide <span class="sjv-i-caret-ner"></span>
</button>
<div slot="content_medium">
<!-- Detta är innehållet i dropdown komponenten och kan innehålla vad som helst. -->
<!-- I detta exmplet består innehållet av en rubrik och lite text. -->
<h3 class="margin-top-zero">Jordbruksverkets styleguide</h3>
<p>
Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala
tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen
mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
</p>
</div>
</jv-dropdown>