Sidpanel

Du kan använda en sidpanel, det vill säga en off canvas eller sidebar, för innehåll som användaren inte behöver se hela tiden.

Design och språk

  • Sidpanelen ska inte bryta ett pågående flöde för användaren.
  • Användaren ska initiera sidpanelen genom en aktiv handling, till exempel genom att klicka på en knapp, en meny, en länk eller en ikon.
  • Användaren ska kunna stänga sidpanelen utan att den har utfört något i den.
  • På en stor skärm, till exempel en laptop, kan sidpanelen antingen lägga sig på huvudsidan eller skjuta den åt sidan om det är viktigt att både sidpanelen och huvudsidan syns samtidigt.
  • På en liten skärm, till exempel en mobiltelefon ska sidpanelen alltid lägga sig ovanpå huvudsidan men en liten del av huvudsidan ska alltid synas samtidigt som panelen visas.r

Tillgänglighet

För att göra en sidpanel tillgänglig ska

  • sidpanelen ska komma först på sidans tabbordning
  • knappar som triggar att sidpanalen visas ha attributet aria-haspopup="menu", i de fall sidpanelen används som en meny.

Komponent och kod

Parametrar på sidpanel

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

dynamiskBredd

dynamisk-bredd

(Optional) Om true, aktiverar dynamisk bredd. Min width = 150px, Max width = document.body.clientWidth * .5;

boolean

-

mainContentId

main-content-id

(Optional) ID till main content / HTML block som ska flyttas på insidan. Behövs endast för offcanvas variant.

string

-

open

open

(Optional) Ska Sidpanelen visas eller stängas? Om inget anges är default stängd. Sidpanel kan även öppnas genom att trigga event på komponenten. Event av typ "jvSidpanelOpen" - kommer att öppna sidpanelen. Event av typ "jvSidpanelClose" - kommer att stänga sidpanelen. Event av typ "jvSidpanelToggle" - kommer att toggla sidpanelen.

boolean

false

placementRight

placement-right

(Optional) För att plasera sidopanelen till höger; placement-right="true". Om inget anges är default placering till vänster.

boolean

false

width

width

(Optional) Kan ställa in bredden på sidopanelen. Om inget angivet är default: 15.625em via css.

string

-

Sidpanel offcanvas

Vänster

<jv-sidpanel id="sidpanel1" main-content-id="c-sidpanel--mainContent2">
   <button class="c-btn-text--medium"
           onclick="document.querySelector('#sidpanel1').dispatchEvent(new Event('jvSidpanelClose'))">
      Stäng
   </button>
</jv-sidpanel>

Höger

<jv-sidpanel id="sidpanel2" width="300px" main-content-id="c-sidpanel--mainContent2" placement-right="true">
   <div class="c-sidpanel__content">
      <button class="c-btn-text--medium" autofocus>Får focus vid öppning av panelen</button>
      <button class="c-btn-text--medium"
              onclick="document.querySelector('#sidpanel2').dispatchEvent(new Event('jvSidpanelClose'))">
         Stäng
      </button>
   </div>
</jv-sidpanel>

Vänster med justerbar storlek

<jv-sidpanel id="sidpanel3" main-content-id="c-sidpanel--mainContent2" dynamisk-bredd="true">
   <div class="c-sidpanel__content">
      <button class="c-btn-text--medium" autofocus>Får focus vid öppning av panelen</button>
      <button class="c-btn-text--medium"
   	   onclick="document.querySelector('#sidpanel3').dispatchEvent(new Event('jvSidpanelClose'))">
   	   Stäng
      </button>
   </div>
</jv-sidpanel>

Sidpanel hover

Vänster

<jv-sidpanel id="sidpanel4">
   <div class="c-sidpanel__content">
      <button class="c-btn-text--medium" autofocus>Får focus vid öppning av panelen</button>
      <button class="c-btn-text--medium"
        onclick="document.querySelector('#sidpanel4').dispatchEvent(new Event('jvSidpanelClose'))">
         Stäng
      </button>
   </div>
</jv-sidpanel>

Höger

<jv-sidpanel id="sidpanel5" placement-right="true" width="200px">
   <div class="c-sidpanel__content">
      <button class="c-btn-text--medium" autofocus>Får focus vid öppning av panelen</button>
      <button class="c-btn-text--medium"
         onclick="document.querySelector('#sidpanel5').dispatchEvent(new Event('jvSidpanelClose'))">
         Stäng
      </button>
   </div>
</jv-sidpanel>

Höger med justerbar storlek

<jv-sidpanel dynamisk-bredd="true" id="sidpanel6" placement-right="true">
   <div class="c-sidpanel__content">
      <button class="c-btn-text--medium" autofocus>Får focus vid öppning av panelen</button>
      <button class="c-btn-text--medium"
         onclick="document.querySelector('#sidpanel6').dispatchEvent(new Event('jvSidpanelClose'))">
         Stäng
      </button>
   </div>
</jv-sidpanel>

Äldre version av Sidpanel Offcanvas

Senast publicerad 2021-05-21

Sidansvarig för sidan är Styleguide