Styleguide

Dropdown

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.

Design och språk

När du ska använda komponenten

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.

Innehåll och placering

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.

Komponenter och kod

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å:

  • storleken small: 6.25 em
  • storleken medium: 18.75 em
  • storleken large: 31.25 em
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

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

-

Listener på dropdown

Event

Beskrivning

Typ

jvDropdownOpenChange

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 type="button" slot="triggerBtn_large" class="c-btn c-btn--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 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>

Medium
HTML 
<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">
    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 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>

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 type="button" slot="triggerBtn_small" class="c-btn c-btn--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/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>

Högerjusterad
HTML 
<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 c-btn--compact 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 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>

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 type="button" slot="triggerBtn_text_image" class="c-btn c-btn--primary c-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