Styleguide

Dropdown

En dropdown kan du till exempel använda för en meny.

Design och språk

En dropdown

  • används när du vill dölja val som användaren inte behöver ha tillgång till hela tiden, till exempel en meny eller avancerad funktionalitet
  • kan innehålla till exempel en meny, knappar, bilder, länkar och texter
  • kan öppnas av flera olika typer av komponenter
  • placeras ovanpå innehållet på sidan.

Komponenter och kod

Komponenten driftsattes första gången i version 13.0.0.

Parametrar på dropdown

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

-

Listener på dropdown

Event

Beskrivning

Typ

openChange

Change event som triggas varje gång dropdown visas eller stängs, värdet syns i propertyn "detail".

CustomEvent<boolean>

Events på dropdown

Event

Beskrivning

Typ

jvDropdownOpen

Öppnar dropdown

CustomEvent

jvDropdownClose

Stänger dropdown

CustomEvent

jvDropdownToggle

Togglar dropdown

CustomEvent

Large
HTML 
<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 &nbsp;<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>

Medium
HTML 
<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 &nbsp;<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>

Small

Bild på en sjö omgiven av berg
Bild på en solnedgång
Bild på en bergskedja
Bild på ett berg
HTML 
<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 &nbsp;<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>

Högerjusterad
HTML 
<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 &nbsp;<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>

Annan typ av knapp

Jordbruksverkets styleguide

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.

HTML 
<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 &nbsp;<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>

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide