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.
För att göra en sidpanel tillgänglig:
Komponenten driftsattes första gången i version 12.1.0.
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 | Beskrivning | Typ |
---|---|---|
jvSidpanelOpen | Öppnar sidpanelen | CustomEvent<boolean> |
jvSidpanelClose | Stänger sidpanelen | CustomEvent<boolean> |
jvSidpanelToggle | Togglar sidpanelen | CustomEvent<boolean> |
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. |
<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>
<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>
<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>
<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>
<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>
<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>