index.html

---
title: Tabset
minver: 0.1.11
also:
  components/tabset/test.html: Testing - Tabset
  elements/hx-tab: <hx-tab>
  elements/hx-tabcontent: <hx-tabcontent>
  elements/hx-tablist: <hx-tablist>
  elements/hx-tabpanel: <hx-tabpanel>
  elements/hx-tabset: <hx-tabset>
---
{% extends 'component.njk' %}
{% set contentClasses = 'docs-tabset' %}

{% block page_header %}
  {# TODO: add component description #}
{% endblock %}

{% block content %}
  <section>
    <header>
      <h2 id="basic-tabset">Basic Tabset</h2>
      {# TODO: add section description #}
    </header>

    <div class="example resizable">
      <div id="demo-basic">
        <hx-tabset id="android-desserts">
          <hx-tablist>
            <hx-tab>Cupcake Ipsum</hx-tab>
            <hx-tab id="marshmallow">Biscuit Marshmallow</hx-tab>
            <hx-tab>Caramels Marzipan</hx-tab>
          </hx-tablist>
          <hx-tabcontent>
            <hx-tabpanel>
              <h3>First Panel</h3>
              <div class="hxRow">
                <div class="hxCol hxSpan-6">
                  <p>
                    Cupcake ipsum dolor sit amet bonbon topping caramels. Sesame snaps
                    gummi bears liquorice cookie chupa chups fruitcake croissant
                    chocolate topping. Brownie biscuit wafer marshmallow liquorice
                    soufflé powder jelly.
                  </p>
                </div>
                <div class="hxCol hxSpan-6">
                  <p>
                    Sweet roll sesame snaps danish I love jelly wafer dragée soufflé
                    cake. Cookie chocolate cake gingerbread powder icing. Ice cream
                    cotton candy gummi bears oat cake sweet pastry.
                  </p>
                </div>
              </div>
            </hx-tabpanel>
            <hx-tabpanel>
              <h3>Second Panel</h3>
              <p>
                Cupcake ipsum dolor sit. Amet danish jelly gummi bears. Danish
                caramels danish candy canes macaroon donut icing. Cupcake tiramisu
                soufflé fruitcake. Caramels muffin tootsie roll lemon drops bear claw
                cotton candy tootsie roll tootsie roll chupa chups. Pudding fruitcake
                ice cream marshmallow. Candy sugar plum chupa chups cotton candy
                gingerbread pastry gingerbread marshmallow wafer. Jelly-o bonbon
                dessert donut.
              </p>
              <p><a href="#">Link inside the panel</a></p>
              <p>
                Sweet toffee pie icing croissant halvah chupa chups. Cotton candy pie
                sesame snaps. Muffin sesame snaps cake toffee liquorice apple pie
                apple pie chupa chups. Lemon drops caramels sugar plum. Sweet oat cake
                chocolate pudding cake toffee chocolate topping. Caramels caramels
                candy muffin topping toffee. Topping candy canes sesame snaps carrot
                cake dragée wafer jelly beans. Macaroon gummies tootsie roll cookie
                chocolate cake chocolate cake dragée cupcake. Wafer bonbon sweet roll
                sweet roll.
              </p>
              <p>
                Sugar plum bonbon tiramisu tart candy canes sesame snaps tiramisu.
                Soufflé chocolate bar macaroon sweet bear claw dragée muffin dragée
                jelly. Apple pie gummies cake tiramisu dessert ice cream sweet roll.
                Pie fruitcake dragée. Gummi bears pudding muffin tart. Cake liquorice
                cheesecake donut. Cake chocolate marshmallow marshmallow dragée cupcake
                chocolate cake chocolate. Candy canes chocolate sweet roll apple pie
                icing danish chocolate bar. Jujubes toffee gummies powder cupcake
                topping chocolate. Cake sugar plum fruitcake brownie.
              </p>
            </hx-tabpanel>
            <hx-tabpanel id="id-should-not-be-overwritten">
              <h3>Third Panel</h3>
                <img src="images/200x150.png" />
                <img src="images/200x150.png" />
                <img src="images/200x150.png" />
                <img src="images/200x150.png" />
                <img src="images/200x150.png" />
                <img src="images/200x150.png" />
                <img src="images/200x150.png" />
                <img src="images/200x150.png" />
                <img src="images/200x150.png" />
                <img src="images/200x150.png" />
                <img src="images/200x150.png" />
                <img src="images/200x150.png" />
            </hx-tabpanel>
          </hx-tabcontent>
        </hx-tabset>
      </div>

      <footer>
        {% code 'html' %}
          <hx-tabset>
            <hx-tablist>
              <hx-tab>First</hx-tab>
              <hx-tab>Second</hx-tab>
              <hx-tab>Third</hx-tab>
            </hx-tablist>
            <hx-tabcontent>
              <hx-tabpanel>...</hx-tabpanel>
              <hx-tabpanel>...</hx-tabpanel>
              <hx-tabpanel>...</hx-tabpanel>
            </hx-tabcontent>
          </hx-tabset>
        {% endcode %}
      </footer>
    </div>
  </section>

  <section>
    <header>
      <h2 id="dynamic-tabset">Dynamic Tabset</h2>
      {# TODO: add section description #}
    </header>

    <div class="example" id="vue-dynamicTabsetDemo" v-cloak>
      <header>
        <form class="beta-hxForm" @submit.prevent>
          <div>
            <label for="numCurrentTab" class="beta-hxFieldName">
              Current Tab
            </label>
            <br />
            <input
              class="hxTextCtrl"
              id="numCurrentTab"
              min="0"
              step="1"
              type="number"
              v-model.number="currentTab"
              :max="tabs.length - 1"
            />
          </div>

          <section>
            <p class="beta-hxFieldName">
              Increase Tab Count
            </p>
            <p class="hxBtnGroup">
              <button
                class="hxBtn"
                type="button"
                @click="addTab('start')"
              >
                <hx-icon type="plus"></hx-icon>
                <span>Prepend New</span>
              </button>

              <button
               class="hxBtn"
               type="button"
               @click="addTab('end')"
              >
                <hx-icon type="plus"></hx-icon>
                <span>Append New</span>
              </button>
            </p>
          </section>

          <section>
            <p class="beta-hxFieldName">
              Decrease Tab Count
            </p>
            <p class="hxBtnGroup">
              <button
                class="hxBtn"
                type="button"
                @click="removeTab('start')"
              >
                <hx-icon type="minus"></hx-icon>
                <span>Remove First</span>
              </button>

              <button
                class="hxBtn"
                type="button"
                @click="removeTab('end')"
              >
                <hx-icon type="minus"></hx-icon>
                <span>Remove Last</span>
              </button>
            </p>
          </section>

          <fieldset>
            <legend>Options</legend>
            <hx-checkbox-control>
              <input
                id="chkAutoUpdate"
                type="checkbox"
                v-model="autoUpdate"
              />
              <label for="chkAutoUpdate">
                <hx-checkbox></hx-checkbox>
                Update on change
              </label>
            </hx-checkbox-control>
          </fieldset>

          <hr class="hxDivider" />

          <footer>
            <p class="beta-hxButtonSet">
              <button
                class="hxBtn hxPrimary"
                type="button"
                :disabled="autoUpdate"
                @click="update"
              >
                Update Tabset
              </button>

              <button
                class="hxBtn hxTertiary"
                type="button"
                @click="reset"
              >
                <span>Reset Tabset</span>
                <hx-icon type="undo"></hx-icon>
              </button>
            </p>
          </footer>
        </form>
      </header>

      {% raw %}
      <div>
        <hx-tabset
          ref="tabset"
          :current-tab="currentTab"
          :tabsize="tabSize"
          @tabchange="onTabchange"
        >
          <hx-tablist>
            <hx-tab v-for="tab in tabs" :key="tab.id">
              Tab #{{tab.id}}
            </hx-tab>
          </hx-tablist>

          <hx-tabcontent>
            <hx-tabpanel v-for="tab in tabs" :key="tab.id">
              Tab Panel #{{tab.id}}
            </hx-tabpanel>
          </hx-tabcontent>
        </hx-tabset>
      </div>
      {% endraw %}

      <footer>
        <pre><code v-text="snippet"></code></pre>
      </footer>
    </div>

    <footer>
      <p class="hxSubBody hxSubdued">
        <hx-icon type="info-circle"></hx-icon>
        Refer to <a href="elements/hx-tabset#managing-state">"Managing State"</a>
        in <code>&lt;hx-tabset&gt;</code> documentation, for more details.
      </p>
    </footer>
  </section>
{% endblock %}