Segmented Control

Segmented Control Component for PhotonKit

HTML

<link rel="stylesheet" href="https://rawgit.com/connors/photon/master/dist/css/photon.css">
<link rel="stylesheet" href="https://rawgit.com/MauriceConrad/PhotonKit-Components/master/Photon-Components/segment/dist/segment.css">
<script src="https://rawgit.com/MauriceConrad/PhotonKit-Components/master/Photon-Components/segment/dist/segment.js"></script>
<h2 style="text-align: center;">Will only work well in blink browsers!</h2>
<div style="width: 100%; height: 100px; text-align: center; margin: 0px 0px 25px 0px;">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Chromium_11_Logo.svg/512px-Chromium_11_Logo.svg.png" height="100%"/>
</div>

<!--data-group-relationship = "relative"-->
<div class="btn-group" data-group-relationship="relative">
  <button class="btn btn-segment active">Segment 1</button>
  <button class="btn btn-segment">Segment 2</button>
  <button class="btn btn-segment">Segment 3</button>
</div>

<br /><br />

<!--data-group-relationship = "absolute"-->
<div class="btn-group" data-group-relationship="absolute">
  <button class="btn btn-segment active">Segment 1</button>
  <button class="btn btn-segment">Segment 2</button>
  <button class="btn btn-segment">Segment 3</button>
</div>

CSS

body {
  padding: 10px;
}