How To
Documentation
    Learn More

      Tabs and Toggle Panes

      Default

      The standard toggle pane tabs

      Example

      <toggle:controls labels="Pane 1, Pane 2, Pane 3" panes="panes"></toggle:controls>
      <toggle:panes id="panes">
        <toggle:pane>
          <h2>Pane 1</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 2</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 3</h2>
        </toggle:pane>
      </toggle:panes>

      Line

      Underlined tabs

      Example

      <toggle:controls labels="Pane 1, Pane 2, Pane 3" panes="line" styling="line"></toggle:controls>
      <toggle:panes id="line">
        <toggle:pane>
          <h2>Pane 1</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 2</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 3</h2>
        </toggle:pane>
      </toggle:panes>

      Pills

      Rounded tabs

      Example

      <toggle:controls labels="Pane 1, Pane 2, Pane 3" panes="pills" styling="pill"></toggle:controls>
      <toggle:panes id="pills">
        <toggle:pane visible="true">
          <h2>Pane 1</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 2</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 3</h2>
        </toggle:pane>
      </toggle:panes>

      Simple

      No styling

      Example

      <toggle:controls labels="Pane 1, Pane 2, Pane 3" panes="simple" styling="simple"></toggle:controls>
      <toggle:panes id="simple">
        <toggle:pane visible="true">
          <h2>Pane 1</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 2</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 3</h2>
        </toggle:pane>
      </toggle:panes>

      Bordered

      Example

      <toggle:panes id="bordered">
      <toggle:pane visible="true">
          <h2>Pane 1</h2>
      </toggle:pane>
      <toggle:pane>
          <h2>Pane 2</h2>
      </toggle:pane>
      <toggle:pane>
          <h2>Pane 3</h2>
      </toggle:pane>
      </toggle:panes>

      Line Bordered

      Example

      <toggle:controls labels="Pane 1, Pane 2, Pane 3" panes="line-b" styling="line bordered"></toggle:controls>
      <toggle:panes id="line-b">
        <toggle:pane visible="true">
          <h2>Pane 1</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 2</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 3</h2>
        </toggle:pane>
      </toggle:panes>

      Pills Bordered

      Example

      <toggle:controls labels="Pane 1, Pane 2, Pane 3" panes="pills-b" styling="pill bordered"></toggle:controls>
      <toggle:panes id="pills-b">
        <toggle:pane visible="true">
          <h2>Pane 1</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 2</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 3</h2>
        </toggle:pane>
      </toggle:panes>

      Simple Bordered

      Example

      <toggle:controls labels="Pane 1, Pane 2, Pane 3" panes="simple-b" styling="simple bordered"></toggle:controls>
      <toggle:panes id="simple-b" visible="true">
        <toggle:pane visible="true">
          <h2>Pane 1</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 2</h2>
        </toggle:pane>
        <toggle:pane>
          <h2>Pane 3</h2>
        </toggle:pane>
      </toggle:panes>