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.

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

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--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 role="button" slot="triggerBtn_medium" class="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 role="button" slot="triggerBtn_small" class="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 role="button" slot="triggerBtn_right" class="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 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