itsm-whlg/wechat/app/bower_components/ui_toggle.html

<!-- start: PAGE TITLE -->
<section id="page-title">
	<div class="row">
		<div class="col-sm-8">
			<h1 class="mainTitle" translate="sidebar.nav.element.TOGGLE">{{ mainTitle }}</h1>
			<span class="mainDescription">A simple but useful and efficient directive to toggle a class to an element</span>
		</div>
		<div ncy-breadcrumb></div>
	</div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: TOGGLE EXAMPLE 1 -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Lightbulb <span class="text-bold">Example</span></h5>
			<p>
				The element that contains the icon "lightbulb", has the directive <code>toggleable</code>, which indicates that it is ready to alternate some class.
				The class is specified in the <code>activeClass</code> attribute (in this example <code>text-primary</code>).
			</p>
			<p class="text-center big-icon" active-class="text-primary" id="lightbulb" toggleable>
				<i class="fa fa-lightbulb-o"></i>
			</p>
			<div class="btn-group btn-group-justified margin-bottom-30">
				<a href class="btn btn-o btn-primary" target="lightbulb" ct-toggle="toggle">
					Toggle
				</a>
				<a href class="btn btn-o btn-primary" target="lightbulb" ct-toggle="on">
					Turn On
				</a>
				<a href class="btn btn-o btn-primary" target="lightbulb" ct-toggle="off">
					Turn Off
				</a>
			</div>
			<p>Through the directive <code>ctToggle</code>, the buttons can activate, turn off, or toggle class to the target element (which is indicated by its ID)</p>
		</div>
	</div>
</div>
<!-- end: TOGGLE EXAMPLE 1 -->
<!-- start: TOGGLE EXAMPLE 2 -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Heart <span class="text-bold">Example</span></h5>
			<p class="text-center big-icon" active-class="heart-pulse" id="heart" toggleable>
				<i class="fa fa-heart-o"></i>
			</p>
			<div class="btn-group btn-group-justified margin-bottom-30">
				<a href class="btn btn-o btn-primary" target="heart" ct-toggle="toggle">
					Toggle
				</a>
				<a href class="btn btn-o btn-primary" target="heart" ct-toggle="on">
					Turn On
				</a>
				<a href class="btn btn-o btn-primary" target="heart" ct-toggle="off">
					Turn Off
				</a>
			</div>
		</div>
	</div>
</div>
<!-- end: TOGGLE EXAMPLE 2 -->