PhotonBtnGroup

Button Group

Default

<btn-group>
  <button class="btn btn-default active">Components</button>
  <button class="btn btn-default">Frames & Panes</button>
  <button class="btn btn-default">Table</button>
  <button class="btn btn-default">Messages</button>
</btn-group>

As you can see, the button with the class active is the currently active one.

Segmented Control

<btn-group>
  <button class="btn btn-segment active">Segment A</button>
  <button class="btn btn-segment">Segment B</button>
  <button class="btn btn-segment">Segment C</button>
</btn-group>

As you can see, the button with the class active is the currently active one.

Type

The type attribute specifies wether the buttons can be activated an deactivated relative to each other. This means, type = absolute means that the currently active button will be deactivated when activating one of the other ones. If type = relative (default value), every button can be activated & deactivated seperatly.

Relative

<btn-group type="relative">
  <button class="btn btn-segment active">Segment A</button>
  <button class="btn btn-segment">Segment B</button>
  <button class="btn btn-segment">Segment C</button>
</btn-group>

Absolute

<btn-group type="absolute">
  <button class="btn btn-segment active">Segment A</button>
  <button class="btn btn-segment">Segment B</button>
  <button class="btn btn-segment">Segment C</button>
</btn-group>

API

To recognize when a button is activated, listen to the activate event that fires on the currently activated button. But