<!DOCTYPE html>
<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us">
<!--<![endif]-->
<head>
<title>Bootstrap Switch - PatternFly</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../../dist/img/favicon.ico">
<!-- iPad retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
<!-- iPad retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
<!-- iPad non-retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
<!-- iPad non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
<!-- iPhone 6 Plus icon -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
<!-- iPhone retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
<!-- iPhone non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
<link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
<link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
<link href="tests.css" rel="stylesheet" media="screen, print">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//rawgit.com/nostalgiaz/bootstrap-switch/v3.3.2/dist/js/bootstrap-switch.min.js"></script>
<script src="bootstrap-switch.js"></script>
<script src="./../../dist/js/patternfly.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Bootstrap Switch</h1>
</div>
<div class="alert alert-warning">
<span class="pficon pficon-warning-triangle-o"></span>
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a>, <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://www.bootstrap-switch.org/">http://www.bootstrap-switch.org/</a>.
</div>
<hr>
<div class="row">
<div class="col-sm-6 col-lg-4">
<h2 class="h4">State</h2>
<p>
<input id="switch-state" type="checkbox" checked>
</p>
<div class="btn-group">
<button type="button" data-switch-toggle="state" class="btn btn-default">Toggle</button>
<button type="button" data-switch-set="state" data-switch-value="true" class="btn btn-default">Set true</button>
<button type="button" data-switch-set="state" data-switch-value="false" class="btn btn-default">Set false</button>
<button type="button" data-switch-get="state" class="btn btn-default">Get</button>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Size</h2>
<p>
<input id="switch-size" type="checkbox" checked data-size="mini">
</p>
<div class="btn-group">
<button type="button" data-switch-set="size" data-switch-value="mini" class="btn btn-default">Mini</button>
<button type="button" data-switch-set="size" data-switch-value="small" class="btn btn-default">Small</button>
<button type="button" data-switch-set="size" data-switch-value="normal" class="btn btn-default">Normal</button>
<button type="button" data-switch-set="size" data-switch-value="large" class="btn btn-default">Large</button>
<button type="button" data-switch-get="size" class="btn btn-default">Get</button>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Animate</h2>
<p>
<input id="switch-animate" type="checkbox" checked>
</p>
<p>
<button type="button" data-switch-toggle="animate" class="btn btn-default">Toggle</button>
<button type="button" data-switch-get="animate" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Disabled</h2>
<p>
<input id="switch-disabled" type="checkbox" checked disabled>
</p>
<p>
<button type="button" data-switch-toggle="disabled" class="btn btn-default">Toggle</button>
<button type="button" data-switch-get="disabled" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Readonly</h2>
<p>
<input id="switch-readonly" type="checkbox" checked readonly>
</p>
<p>
<button type="button" data-switch-toggle="readonly" class="btn btn-default">Toggle</button>
<button type="button" data-switch-get="readonly" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Indeterminate</h2>
<p>
<input id="switch-indeterminate" type="checkbox" checked data-indeterminate="true">
</p>
<p>
<button type="button" data-switch-toggle="indeterminate" class="btn btn-default">Toggle</button>
<button type="button" data-switch-get="indeterminate" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Inverse</h2>
<p>
<input id="switch-inverse" type="checkbox" checked data-inverse="true">
</p>
<p>
<button type="button" data-switch-toggle="inverse" class="btn btn-default">Toggle</button>
<button type="button" data-switch-get="inverse" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">On Color</h2>
<p>
<input id="switch-onColor" type="checkbox" checked data-on-color="info">
</p>
<p class="btn-group">
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set <span class="caret"></span></button>
<div role="menu" class="dropdown-menu">
<li><a data-switch-set="onColor" data-switch-value="primary">Primary</a></li>
<li><a data-switch-set="onColor" data-switch-value="info">Info</a></li>
<li><a data-switch-set="onColor" data-switch-value="success">Success</a></li>
<li><a data-switch-set="onColor" data-switch-value="warning">Warning</a></li>
<li><a data-switch-set="onColor" data-switch-value="default">Default</a></li>
</div>
</div>
<button type="button" data-switch-get="onColor" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Off Color</h2>
<p>
<input id="switch-offColor" type="checkbox" data-off-color="warning">
</p>
<p class="btn-group">
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set <span class="caret"></span></button>
<div role="menu" class="dropdown-menu">
<li><a data-switch-set="offColor" data-switch-value="primary">Primary</a></li>
<li><a data-switch-set="offColor" data-switch-value="info">Info</a></li>
<li><a data-switch-set="offColor" data-switch-value="success">Success</a></li>
<li><a data-switch-set="offColor" data-switch-value="warning">Warning</a></li>
<li><a data-switch-set="offColor" data-switch-value="default">Default</a></li>
</div>
</div>
<button type="button" data-switch-get="offColor" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">On Text</h2>
<p>
<input id="switch-onText" type="checkbox" checked data-on-text="Yes">
</p>
<div class="row">
<div class="col-sm-6">
<input type="text" data-switch-set-value="onText" value="Yes" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Off Text</h2>
<p>
<input id="switch-offText" type="checkbox" data-off-text="No">
</p>
<div class="row">
<div class="col-sm-6">
<input type="text" data-switch-set-value="offText" value="No" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Label Text</h2>
<p>
<input id="switch-labelText" type="checkbox" data-label-text="Label">
</p>
<div class="row">
<div class="col-sm-6">
<input type="text" data-switch-set-value="labelText" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Handle Width</h2>
<p>
<input id="switch-handleWidth" type="checkbox" data-handle-width="100">
</p>
<div class="row">
<div class="col-sm-6">
<input type="number" data-switch-set-value="handleWidth" value="100" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Label Width</h2>
<p>
<input id="switch-labelWidth" type="checkbox" data-label-width="100">
</p>
<div class="row">
<div class="col-sm-6">
<input type="number" data-switch-set-value="labelWidth" value="100" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Create | Destroy</h2>
<p>
<input id="switch-create-destroy" type="checkbox" checked data-switch-no-init>
</p>
<div class="row">
<div class="col-sm-6">
<button type="button" data-switch-create-destroy data-destroy-text="Destroy" class="btn btn-default">Create</button>
</div>
</div>
</div>
</div>
<div class="text-center">
<h2 class="h4">Radio All Off</h2>
<div class="row">
<div class="col-sm-6">
<h3 class="h5">Disabled</h3>
<input type="radio" name="radio1" checked class="switch-radio1">
<input type="radio" name="radio1" class="switch-radio1">
<input type="radio" name="radio1" class="switch-radio1">
</div>
<div class="col-sm-6">
<h3 class="h5">Enabled</h3>
<input type="radio" name="radio2" checked data-radio-all-off="true" class="switch-radio2">
<input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
<input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
</div>
</div><br>
<hr>
<h2 class="h4">Inside Modals</h2>
<button data-toggle="modal" data-target="#modal-switch" class="btn btn-default">Open Modal</button>
<div id="modal-switch" tabindex="-1" role="dialog" aria-labelledby="modal-switch-label" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<div id="modal-switch-label" class="modal-title">Title</div>
</div>
<div class="modal-body">
<input id="switch-modal" type="checkbox" checked>
</div>
</div>
</div>
</div>
</div>
<script>
// Initialize Boostrap Switch
</script>
</div><!-- /container -->
</body>
</html>