{{#> 
	layouts/main 
	title="Button Group" 
	pagename="ui_button_group" 
	heading="<i class='subheader-icon fal fa-window'></i>  Button Group" 
	category_1="UI Components" 
	pagedescription="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript."
}}

{{#*inline "head-block"}}
<link rel="stylesheet" media="screen, print" href="css/theme-demo.css">
{{/inline}}

{{#*inline "content-block"}}

<div class="row">
	<div class="col-sm-12">
		<div class="alert alert-primary">
			<div class="d-table w-100">
				<div class="d-table-cell align-top width-6">
					<span class="icon-stack icon-stack-lg">
						<i class="base base-6 icon-stack-3x opacity-100 color-primary-500"></i> 
						<i class="base base-10 icon-stack-2x opacity-100 color-primary-300 fa-flip-vertical"></i> 
						<i class="{{iconPrefix}} fa-info icon-stack-1x opacity-100 color-white"></i>
					</span>
				</div>
				<div class="d-table-cell pl-1">
					<span class="h5">Ensure correct <code>role</code> and provide a label</span>
					
					<p class="mb-0">The <code>.btn</code> styles can be applied to other elements, such as <code>&lt;label></code>s, to provide checkbox or radio style button toggling. Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing those modified buttons to enable toggling in their respective styles. The checked state for these buttons is <strong>only updated via</strong> click <strong>event</strong> on the button. If you use another method to update the input—e.g., with <code>&lt;input type="reset"></code> or by manually applying the input’s checked property—you’ll need to toggle <code>.active</code> on the <code>&lt;label></code> manually.</p>					
				</div>
			</div>
		</div>
    </div>
	<div class="col-xl-6">
		<!--Sizes-->
		<div id="panel-1" class="panel">
			<div class="panel-hdr">	
				<h2>
					Sizes <span class="fw-300"><i>example</i></span> 
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
					<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
					<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">									
					<div class="demo demo-v-spacing-lg">
						<div class="btn-group btn-group-lg">
							<button type="button" class="btn btn-secondary">Left</button>
							<button type="button" class="btn btn-secondary">Middle</button>
							<button type="button" class="btn btn-secondary">Right</button>
						</div>
						<br>
						<div class="btn-group">
							<button type="button" class="btn btn-secondary">Left</button>
							<button type="button" class="btn btn-secondary">Middle</button>
							<button type="button" class="btn btn-secondary">Right</button>
						</div>
						<br>
						<div class="btn-group btn-group-sm">
							<button type="button" class="btn btn-secondary">Left</button>
							<button type="button" class="btn btn-secondary">Middle</button>
							<button type="button" class="btn btn-secondary">Right</button>
						</div>
						<br>
						<div class="btn-group btn-group-xs">
							<button type="button" class="btn btn-secondary">Left</button>
							<button type="button" class="btn btn-secondary">Middle</button>
							<button type="button" class="btn btn-secondary">Right</button>
						</div>
					</div>
				</div>
			</div>
		</div>		
		<!--Toolbar-->
		<div id="panel-2" class="panel">
			<div class="panel-hdr">	
				<h2>
					Toolbar <span class="fw-300"><i>example</i></span> 
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
					<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
					<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">									
					<div class="panel-tag">
						Fuse button groups into toolbars for a comprehensize component. Utility classes is needed to set margins to groups and buttons. 
					</div>
					<div></div>
					<div class="d-flex justify-content-start flex-wrap demo">
						<div class="btn-group mr-2" role="group" aria-label="Group A">
							<button type="button" class="btn btn-secondary">1</button>
							<button type="button" class="btn btn-secondary">2</button>
							<button type="button" class="btn btn-secondary">3</button>
							<button type="button" class="btn btn-secondary">4</button>
						</div>
						<div class="btn-group mr-2" role="group" aria-label="Group B">
							<button type="button" class="btn btn-secondary">5</button>
							<button type="button" class="btn btn-secondary">6</button>
							<button type="button" class="btn btn-secondary">7</button>
							<button type="button" class="btn btn-secondary">8</button>
						</div>
						<div class="btn-group" role="group" aria-label="Group C">
							<button type="button" class="btn btn-secondary">9</button>
							<button type="button" class="btn btn-secondary">10</button>
							<button type="button" class="btn btn-danger">11</button>
							<button type="button" class="btn btn-secondary">12</button>
						</div>
					</div>
				</div>
			</div>
		</div>		
		<!--Verticle-->
		<div id="panel-4" class="panel">
			<div class="panel-hdr">	
				<h2>
					Verticle <span class="fw-300"><i>example</i></span> 
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
					<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
					<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">									
					<div class="panel-tag">
						Make a set of buttons appear vertically stacked rather than horizontally using class <code>.btn-group-vertical</code>. <strong>Split button dropdowns are not supported here.</strong>
					</div>
					<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
						<button type="button" class="btn btn-secondary">Button</button>
						<button type="button" class="btn btn-secondary">Button</button>
						<div class="btn-group" role="group">
							<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Dropdown
							</button>
							<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
								<a class="dropdown-item" href="#">Dropdown link</a>
								<a class="dropdown-item" href="#">Dropdown link</a>
							</div>
						</div>
						<button type="button" class="btn btn-secondary">Button</button>
						<button type="button" class="btn btn-secondary">Button</button>
						<div class="btn-group" role="group">
							<button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Dropdown
							</button>
							<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
								<a class="dropdown-item" href="#">Dropdown link</a>
								<a class="dropdown-item" href="#">Dropdown link</a>
							</div>
						</div>
						<div class="btn-group" role="group">
							<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Dropdown
							</button>
							<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
								<a class="dropdown-item" href="#">Dropdown link</a>
								<a class="dropdown-item" href="#">Dropdown link</a>
							</div>
						</div>
						<div class="btn-group" role="group">
							<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Dropdown
							</button>
							<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
								<a class="dropdown-item" href="#">Dropdown link</a>
								<a class="dropdown-item" href="#">Dropdown link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>		
	</div>
	<div class="col-xl-6">	
		<!--Nesting-->
		<div id="panel-3" class="panel">
			<div class="panel-hdr">	
				<h2>
					Nesting <span class="fw-300"><i>example</i></span> 
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
					<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
					<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">									
					<div class="panel-tag">
						Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons
					</div>
					<div class="btn-group" id="js-demo-nesting" role="group" aria-label="Button group with nested dropdown">
						<button type="button" class="btn btn-secondary">1</button>
						<button type="button" class="btn btn-secondary">2</button>

						<div class="btn-group" role="group">
							<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
								<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>			
		<!--Checkbox and radio-->
		<div id="panel-5" class="panel">
			<div class="panel-hdr">	
				<h2>
					Input <span class="fw-300"><i>checkbox & radio</i></span> 
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
					<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
					<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">									
					<div class="panel-tag">
						<code>.button</code> styles can be applied to other elements, such as <code>&lt;label&gt;</code>s, to provide checkbox or radio style button toggling. Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing those modified buttons to enable their toggling behavior via JavaScript and add <code>.btn-group-toggle</code> to style the <code>&lt;input&gt;</code>s within your buttons. <strong>Note that you can create single input-powered buttons or groups of them.</strong>
					</div>
					<div class="alert alert-info">
						The checked state for these buttons is <strong>only updated via <code>click</code> event</strong> on the button. If you use another method to update the input—e.g., with <code>&lt;input type="reset"&gt;</code> or by manually applying the input’s <code>checked</code> property—you’ll need to toggle <code>.active</code> on the <code>&lt;label&gt;</code> manually.
					</div>
					<h5 class="frame-heading">
						Checkbox
					</h5>
					<div class="frame-wrap">
						<div class="btn-group btn-group-toggle" data-toggle="buttons">
							<label class="btn btn-primary active">
								<input type="checkbox" name="options" id="check1" checked="checked"> Checked
							</label>
							<label class="btn btn-primary">
								<input type="checkbox" name="options" id="check2"> Unchecked
							</label>
							<label class="btn btn-primary">
								<input type="checkbox" name="options" id="check3"> Unchecked
							</label>
						</div>
					</div>
					<h5 class="frame-heading">
						Radio
					</h5>
					<div class="frame-wrap mb-0">
						<div class="btn-group btn-group-toggle" data-toggle="buttons">
							<label class="btn btn-info active">
								<input type="radio" name="options" id="option1" checked="checked"> Active
							</label>
							<label class="btn btn-info">
								<input type="radio" name="options" id="option2"> Radio
							</label>
							<label class="btn btn-info">
								<input type="radio" name="options" id="option3"> Radio
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>		
	</div>
</div>

{{/inline}}

{{#*inline "scripts-block"}}{{/inline}}

{{/layouts/main}}