Pages

For general information on theme project pages, visit Theme Pages. The information below is specific to the pages in WireBootstrap for Color Admin.

Component Containers

The pages that demonstrate the use of WireBootstrap components inside the theme have containers to which each component is bound. These are HTML panels that give the component a border and options specific to the theme.

The example below is an excerpt from the filters-select.html page which highlights the Bootstrap Select component. The panel classes are Color Admin theme container classes. The select element is where the component will be bound on the page.

<div class="panel panel-inverse">
	<div class="panel-heading">
			<h4 class="panel-title">Bootstrap Select</h4>
			<div class="panel-heading-btn">
				<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
				<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
				<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
				<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
			</div>
		</div>
		<div class="panel-body">			
			<select id="select"></select>
		</div>
</div>

Visit there are empty pages and panels that can be used as a starting point here.

Menus

The menus on each page are dynamically generated using WireBootstrap's Page Menu for Color Admin component. The configuration for the menu items is stored in a configuration file located at \lib\color-admin\color-admin-menu.json. For details on using the component, visit WireBootstrap for Color Admin Menu.

new wire.colorAdmin.menu().render("#color-admin-menu", {
  configUrl: "../lib/color-admin/color-admin-menu.json ",
  currentPage: "Select"            
});