Product Selector

Fusion 5.12
    Fusion 5.12

    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>