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> |
<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>
<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>
<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>
<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>
<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>
<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>
Senast publicerad
Sidansvarig för sidan är Styleguide