Filter
Typ av hundmat
Knapp
Knapp
Stäng
Får focus vid öppning av panelen
Stäng
Får focus vid öppning av panelen
Stäng
Får focus vid öppning av panelen
Stäng
Får focus vid öppning av panelen
Stäng
Får focus vid öppning av panelen
Stäng
Sidpanel
Sidpanelen finns i olika varianter, en som "flyter över sidan" (Hover) eller en som är på samma nivå och
flyttar andra delen av sidan.
(Offcanvas). Offcanvas varianten defineras med att sätta 'main-content-id="IdTillDetSomSkaFlyttas"'.
Sidpanelen kan antingen ha en fast eller dynamisk bredd som anges med 'dynamisk-bredd="true"'.
Du kan sätta attributet 'autofocus' på en knapp i sidpanelen; vilket kommer
göra att den knappen kommer hamna i focus när sidpanelen öppnas.
Övriga inställningar
för sidpanelen kan du se här
Sidpanel Offcanvas
Sidpanel vänster offcanvas
<![CDATA[
<jv-sidpanel id="sidpanel1" main-content-id="c-sidpanel--mainContent2">
<div class="e-h3 mt-0 pt-3">Filter</div>
<fieldset class="c-checkbox-group--large">
<legend>Typ av hundmat</legend>
<div class="c-checkbox--large">
<input checked="" autofocus class="c-checkbox__input" id="checkbox1_1" value="Torrfoder"
type="checkbox" />
<label for="checkbox1_1">
<span>
<svg focusable="false" width="0.625em" height="0.5em" viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<span>Torrfoder</span>
</label>
</div>
<div class="c-checkbox--large">
<input class="c-checkbox__input" value="Blötfoder" id="checkbox1_2" type="checkbox" />
<label for="checkbox1_2">
<span>
<svg width="0.625em" focusable="false" height="0.5em" viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<span>Blötfoder</span>
</label>
</div>
<div class="c-checkbox--large">
<input class="c-checkbox__input" value="Färskfoder" id="checkbox1_3" type="checkbox" />
<label for="checkbox1_3">
<span>
<svg width="0.625em" focusable="false" height="0.5em" viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<span>Färskfoder</span>
</label>
</div>
</fieldset>
<div class="c-space--m"></div>
<div>
<button class="c-primary-btn--medium mr-1">Knapp</button>
<button class="c-btn--medium mr-1">Knapp</button>
</div>
<button class="c-btn-text--medium"
onclick="document.querySelector('#sidpanel1').dispatchEvent(new Event('jvSidpanelClose'))">
Stäng
</button>
</jv-sidpanel>
]]>
Sidpanel höger offcanvas
<![CDATA[
<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>
]]>
Sidpanel vänster offcanvas - Dynamisk Storlek
<![CDATA[
<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
Sidpanel vänster hover
<![CDATA[
<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>
]]>
Sidpanel höger hover
<![CDATA[
<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>
]]>
Sidpanel höger hover - Dynamisk Storlek
<![CDATA[
<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
Här hittar du en äldre version av
Sidpanel, utan
Stencil web components
