Sidpanel

Här kan du kan du läsa mer information om sidpanel som webbkomponent.

Sidpanel som skjuter innehållet

                <jv-sidpanel id="sidpanel11" 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 data-autofocus="" checked="" class="c-checkbox__input" id="checkbox1_1" type="checkbox" value="Torrfoder">
                      <label for="checkbox1_1">
                        <span class="c-checkbox__checkbox">
                          <svg focusable="false" height="0.5em" viewBox="0 0 12 10" width="0.625em">
                            <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" id="checkbox1_2" type="checkbox" value="Blötfoder">
                      <label for="checkbox1_2">
                        <span class="c-checkbox__checkbox">
                          <svg focusable="false" height="0.5em" viewBox="0 0 12 10" width="0.625em">
                            <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" id="checkbox1_3" type="checkbox" value="Färskfoder">
                      <label for="checkbox1_3">
                        <span class="c-checkbox__checkbox">
                          <svg focusable="false" height="0.5em" viewBox="0 0 12 10" width="0.625em">
                            <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 type="button" class="c-primary-btn--medium mr-1">Knapp</button>
                    <button type="button" class="c-btn--medium mr-1">Knapp</button>
                  </div>
                  <button type="button" class="c-btn-text--medium" onclick="document.querySelector('#sidpanel11').dispatchEvent(new Event('jvSidpanelClose'))">
                    Stäng
                  </button>
                </jv-sidpanel>

            <jv-sidpanel dynamisk-bredd="true" id="sidpanel33" main-content-id="c-sidpanel--mainContent2">
              <div class="c-sidpanel__content">
                <button type="button" data-autofocus="" class="c-btn-text--medium">Får focus vid öppning av panelen</button>
                <button type="button" class="c-btn-text--medium" onclick="document.querySelector('#sidpanel33').dispatchEvent(new Event('jvSidpanelClose'))">
                  Stäng
                </button>
              </div>
            </jv-sidpanel>

              <jv-sidpanel id="sidpanel22" main-content-id="c-sidpanel--mainContent2" placement-right="true" width="300px">
                <div class="c-sidpanel__content">
                  <button type="button" data-autofocus="" class="c-btn-text--medium">Får focus vid öppning av panelen</button>
                  <button type="button" class="c-btn-text--medium" onclick="document.querySelector('#sidpanel22').dispatchEvent(new Event('jvSidpanelClose'))">
                    Stäng
                  </button>
                </div>
              </jv-sidpanel>

Sidpanel som lägger sig över innehållet

              <jv-sidpanel id="sidpanel44">
                <div class="c-sidpanel__content">
                  <button type="button" data-autofocus="" class="c-btn-text--medium">Får focus vid öppning av panelen</button>
                  <button type="button" class="c-btn-text--medium" onclick="document.querySelector('#sidpanel44').dispatchEvent(new Event('jvSidpanelClose'))">
                    Stäng
                  </button>
                </div>
              </jv-sidpanel>

              <jv-sidpanel id="sidpanel55" placement-right="true" width="200px">
                <div class="c-sidpanel__content">
                  <button type="button" data-autofocus="" class="c-btn-text--medium">Får focus vid öppning av panelen</button>
                  <button type="button" class="c-btn-text--medium" onclick="document.querySelector('#sidpanel55').dispatchEvent(new Event('jvSidpanelClose'))">
                    Stäng
                  </button>
                </div>
              </jv-sidpanel>

                <jv-sidpanel dynamisk-bredd="true" id="sidpanel66" placement-right="true">
                  <div class="c-sidpanel__content">
                    <button type="button" data-autofocus="" class="c-btn-text--medium">Får focus vid öppning av panelen</button>
                    <button type="button" class="c-btn-text--medium" onclick="document.querySelector('#sidpanel66').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