Äldre version av Sidpanel Offcanvas
Sidpanel vänster offcanvas
<![CDATA[
<aside class="c-sidpanel--left" data-focusElementID="checkbox1"
data-mainContentID="c-sidpanel--mainContent2"
data-triggersID="sidpanelLeft__offcanvas,stangKnapp4,stangKnapp5"
rel="c-left-sidpanel-js">
<div class="c-sidpanel__content">
<span class="e-lead">What is Lorem Ipsum?</span>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the
industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make
a type specimen
book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining
essentially unchanged. </p>
<div class="c-space--m"></div>
<button class="c-btn--medium" id="stangKnapp4">Stäng</button>
</div>
</aside>
]]>
Sidpanel höger offcanvas
<![CDATA[
<aside class="c-sidpanel--right" data-focusElementID="stangKnapp3"
data-mainContentID="c-sidpanel--mainContent1"
data-triggersID="sidpanelRight__offcanvas,stangKnapp3" rel="c-right-sidpanel-js">
<div class="c-sidpanel__content">
<div class="c-input--medium c-input--error">
<label for="input-medium-text-8">Förnamn
<span class="label__tag-container">
<span class="c-tag"> Obligatorisk </span>
<span class="c-tag--red"> Fel </span>
</span>
<span class="label__description">
<span class="error"><span class="sjv-i-fel"></span>Fyll i förnamnet.
</span>
</span>
</label>
<div class="input__wrapper">
<input autocomplete="given-name" id="input-medium-text-8" name="text8"
type="text">
</div>
</div>
<div class="c-space--m"></div>
<button class="c-btn--medium" id="stangKnapp3">Stäng</button>
</div>
</aside>
]]>
Äldre version av Sidpanel Hover
Sidpanel vänster hover
<![CDATA[
<aside class="c-sidpanel--right" data-focusElementID="stangKnapp1"
data-triggersID="sidpanelRight__hover,stangKnapp1" rel="c-right-sidpanel-js">
<div class="c-sidpanel__content">
<div class="c-tabs" rel="c-tabs-js">
<ul aria-label="Code Examples" class="c-tabs__labels" id="myTabs_1" role="tablist">
<li role="presentation">
<button aria-controls="panel1" aria-selected="true" class="tab-label is-active"
id="panel1__label"
role="tab"><span class="tab-label__text">HTML</span>
</button>
</li>
<li role="presentation">
<button aria-controls="panel2" aria-selected="false" class="tab-label"
id="panel2__label"
role="tab" tabindex="-1"><span
class="tab-label__text">JavaScript</span></button>
</li>
</ul>
<div class="c-tabs__content" data-tabs="myTabs_1">
<div aria-labelledby="panel1__label" class="c-tabs__panel is-active" id="panel1"
role="tabpanel">
<p>Hi</p>
</div>
<div aria-labelledby="panel2__label" class="c-tabs__panel" id="panel2"
role="tabpanel">
<p>Hej</p>
</div>
</div>
</div>
<div class="c-space--m"></div>
<button class="c-btn--medium" id="stangKnapp1">Stäng</button>
</div>
</aside>
]]>
Sidpanel höger hover
<![CDATA[
<aside class="c-sidpanel--left" data-focusElementID="stangKnapp2"
data-triggersID="sidpanelLeft__hover,stangKnapp2"
rel="c-left-sidpanel-js">
<div class="c-sidpanel__content">
<fieldset class="c-radio-btn-group--medium">
<legend>Välj din favoritfärg</legend>
<div class="c-radio-btn--medium">
<input checked="checked" id="radio1" name="radio_group1" type="radio"
value="Ingen">
<label for="radio1">Ingen</label>
</div>
<div class="c-radio-btn--medium">
<input id="radio2" name="radio_group1" type="radio" value="Blå">
<label for="radio2">Blå</label>
</div>
<div class="c-radio-btn--medium">
<input id="radio3" name="radio_group1" type="radio" value="Gul">
<label for="radio3">Gul</label>
</div>
<div class="c-radio-btn--medium">
<input id="radio4" name="radio_group1" type="radio" value="Röd">
<label for="radio4">Röd</label>
</div>
</fieldset>
<div class="c-space--m"></div>
<button class="c-btn--medium" id="stangKnapp2">Stäng</button>
</div>
</aside>
]]>
Atttributes
data-triggersID: ID till alla knappar/iconer/htmlElement som ska öppna eller stänga modalen.
Det
kan bli flera trigger.
data-mainContentID: ID till main content / HTML block som ska flytta på insidan. Bara för
offcanvas variant.
data-width: Kan ställa in bredden på sidopanelen. Om inget angivet är default; 15.625em.
data-focusElementID: ID till första tabbable element i modal innehålet.
