toolbar.html
Home
/
themes /
src /
main /
node_modules /
patternfly /
tests /
pages /
_includes /
widgets /
layouts /
toolbar.html
<div class="container-fluid">
<div class="row toolbar-pf">
<div class="col-sm-12">
<form class="toolbar-pf-actions">
<div class="form-group toolbar-pf-filter">
<label class="sr-only" for="filter">Name</label>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="selected"><a href="#">Name</a></li>
<li><a href="#">Type</a></li>
<li><a href="#">Color</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
</div><!-- /input-group -->
</div>
<div class="form-group">
<div class="dropdown btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="selected"><a href="#">Name</a></li>
<li><a href="#">Type</a></li>
<li><a href="#">Last Modified</a></li>
</ul>
</div>
<button class="btn btn-link" type="button">
<span class="fa fa-sort-alpha-asc"></span>
</button>
</div>
<div class="form-group">
<button class="btn btn-default" type="button">Action</button>
<button class="btn btn-default" type="button">Action</button>
{% include widgets/kebab.html dropmenuType="dropdown btn-group" dropmenuId="dropdownKebab" dropmenuVariation="dropdown-kebab-pf" %}
</div>
<div class="toolbar-pf-action-right">
<div class="form-group toolbar-pf-find">
<button class="btn btn-link btn-find" type="button">
<span class="fa fa-search"></span>
</button>
<div class="find-pf-dropdown-container">
<input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
<div class="find-pf-buttons">
<span class="find-pf-nums">1 of 3</span>
<button class="btn btn-link" type="button">
<span class="fa fa-angle-up"></span>
</button>
<button class="btn btn-link" type="button">
<span class="fa fa-angle-down"></span>
</button>
<button class="btn btn-link btn-find-close" type="button">
<span class="pficon pficon-close"></span>
</button>
</div>
</div>
</div>
<div class="form-group toolbar-pf-view-selector">
<button class="btn btn-link {% if page.tableview %}active{% endif %}"><i class="fa fa-th"></i></button>
<button class="btn btn-link {% if page.cardview %}active{% endif %}"><i class="fa fa-th-large"></i></button>
<button class="btn btn-link {% if page.listview %}active{% endif %}"><i class="fa fa-th-list"></i></button>
</div>
</div>
</form>
<div class="row toolbar-pf-results">
<div class="col-sm-12">
<h5>40 Results</h5>
<p>Active filters:</p>
<ul class="list-inline">
<li>
<span class="label label-info">
Name: nameofthething
<a href="#"><span class="pficon pficon-close"></span></a>
</span>
</li>
<li>
<span class="label label-info">
Name: nameofthething
<a href="#"><span class="pficon pficon-close"></span></a>
</span>
</li>
<li>
<span class="label label-info">
Name: nameofthething
<a href="#"><span class="pficon pficon-close"></span></a>
</span>
</li>
</ul>
<p><a href="#">Clear All Filters</a></p>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->