patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
63 lines (62 loc) • 2.97 kB
HTML
<div class="row toolbar-pf table-view-pf-toolbar" id="{{include.toolbarId}}">
<div class="col-sm-12">
<form class="toolbar-pf-actions">
<div class="form-group toolbar-pf-filter">
<label class="sr-only" for="filter">Rendering Engine</label>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" id="filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rendering Engine <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#" id="{{include.filterId1}}">Rendering Engine</a></li>
<li><a href="#" id="{{include.filterId2}}">Browser</a></li>
<li><a href="#" id="{{include.filterId3}}">Platform(s)</a></li>
<li><a href="#" id="{{include.filterId4}}">Engine Version</a></li>
<li><a href="#" id="{{include.filterId5}}">CSS Grade</a></li>
</ul>
</div>
<input type="text" class="form-control" placeholder="Filter By Rendering Engine..." autocomplete="off" id="filterInput">
</div>
</div>
<div class="form-group">
<button class="btn btn-default" type="button" id="{{include.actionId1}}">Delete Rows</button>
<button class="btn btn-default" type="button" id="{{include.actionId2}}" disabled>Restore Rows</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>
</form>
<div class="row toolbar-pf-results">
<div class="col-sm-9">
<div class="hidden">
<h5>0 Results</h5>
<p>Active filters:</p>
<ul class="list-inline"></ul>
<p><a href="#">Clear All Filters</a></p>
</div>
</div>
<div class="col-sm-3 table-view-pf-select-results">
<strong>0</strong> of <strong>0</strong> selected
</div>
</div>
</div>
</div>