Styleguide

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.

Tillgänglighet

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

  • 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

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

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

extraClass

extra-class

Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2"

string

-

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

-

dataAutofocus

data-autofocus

Element med detta attribut hamnar i fokus när sidopanelen

öppnas.

-

-


Event på sidpanel

Event

Beskrivning

Typ

JvSidpanelOpenChange

Togglar sidpanelen

CustomEvent<boolean>


CSS variabler

Variabel

Beskrivning

Förvaltvärde

--c-sidpanel-transition-speed

Sätter css transition hastighet. Välj 100ms (snabbt), 200ms (standard), 300ms (långsamt)

0.2s

--c-sidpanel-transition-timing-function

Sätter css transition timing funktion.

ease-out

--c-sidpanel-transition-delay

Sätter css transition delay.


Sidpanel som skjuter innehållet

Vänster med fast storlek

<jv-sidpanel id="sidpanel1" main-content-id="c-sidpanel--mainContent2">
   <button class="c-btn--medium" type="button"
           onclick="document.querySelector('#sidpanel1').dispatchEvent(new Event('jvSidpanelClose'))">
      Stäng
   </button>
</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--medium" type="button" autofocus>Får focus vid öppning av panelen</button>
      <button class="c-btn--medium" type="button"
   	   onclick="document.querySelector('#sidpanel3').dispatchEvent(new Event('jvSidpanelClose'))">
   	   Stäng
      </button>
   </div>
</jv-sidpanel>

Höger med fast storlek

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

Sidpanel som lägger sig över innehållet

Vänster med fast storlek

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

Höger med fast storlek

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

Senast publicerad

Sidansvarig för sidan är Styleguide