En dropdown kan du till exempel använda för en meny.
En dropdown
Komponenten driftsattes första gången i version 13.0.0.
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 | Ett friviligt attribut för att ändra storlek, högerjustering. Obs. måste följa json format, exempel: { "size": "large", "alignRight": false, "offset": 10 } | json/string | - |
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 role="button" slot="triggerBtn_large" class="c-btn-text--large 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>
<li class="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/bifoga-fil.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Bifoga fil</a></li>
<li class="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/checkboxar.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Checkboxar</a></li>
<li class="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/datumfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Datumfält</a></li>
<li class="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="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multitextfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Multitextfält</a></li>
<li class="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/radioknappar.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Radioknappar</a></li>
<li class="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="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textyta.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Textyta</a></li>
<li class="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 role="button" slot="triggerBtn_medium" class="c-btn-text--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>
<li class="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/bifoga-fil.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Bifoga fil</a></li>
<li class="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/checkboxar.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Checkboxar</a></li>
<li class="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/datumfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Datumfält</a></li>
<li class="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="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multitextfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Multitextfält</a></li>
<li class="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/radioknappar.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Radioknappar</a></li>
<li class="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="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textyta.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Textyta</a></li>
<li class="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 role="button" slot="triggerBtn_small" class="c-btn-text--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/16.1.0/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/16.1.0/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/16.1.0/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/16.1.0/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 role="button" slot="triggerBtn_right" class="c-btn-text--medium 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>
<li class="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/bifoga-fil.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Bifoga fil</a></li>
<li class="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/checkboxar.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Checkboxar</a></li>
<li class="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/datumfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Datumfält</a></li>
<li class="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="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multitextfalt.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Multitextfält</a></li>
<li class="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/radioknappar.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Radioknappar</a></li>
<li class="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="list-item"><a href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textyta.html" onclick="document.dispatchEvent(new Event('jvDropdownClose'))">Textyta</a></li>
<li class="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 role="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>
Senast publicerad
Sidansvarig för sidan är Styleguide