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.

Exempel på sidpaneler

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 2025-01-29

Sidansvarig för sidan är Styleguide