Widgets
Overview
Widgets are reusable controls and elements — building blocks for your UI. Widgets are often used together as elements of larger Design Patterns.
A note on code dependencies: Most PatternFly widgets are customized versions of Bootstrap Components. PatternFly depends on Bootstrap’s CSS, but not Bootstrap’s JavaScript, in order to keep the Bootstrap JavaScript modular. PatternFly also uses C3.js for chart components, and DataTables.net for table-based components.
Accordion (Collapse)
See http://getbootstrap.com/javascript/#collapse for complete accordion documentation.
<div class="panel-group" id="accordion-markup" style="width:240px"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion-markup" href="#collapseOne"> Lorem ipsum </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Praesent sagittis est et arcu fringilla placerat. Cras erat ante, dapibus non mauris ac, volutpat sollicitudin ligula. Morbi gravida nisl vel risus tempor, sit amet luctus erat tempus. Curabitur blandit sem non pretium bibendum. Donec eleifend non turpis vitae vestibulum. Vestibulum ut sem ac nunc posuere blandit sed porta lorem. Cras rutrum velit vel leo iaculis imperdiet. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion-markup" href="#collapseTwo" class="collapsed"> Dolor sit amet </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Donec consequat dignissim neque, sed suscipit quam egestas in. Fusce bibendum laoreet lectus commodo interdum. Vestibulum odio ipsum, tristique et ante vel, iaculis placerat nulla. Suspendisse iaculis urna feugiat lorem semper, ut iaculis risus tempus. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion-markup" href="#collapseThree" class="collapsed"> Consectetur </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Curabitur nisl quam, interdum a venenatis a, consequat a ligula. Nunc nec lorem in erat rhoncus lacinia at ac orci. Sed nec augue congue, vehicula justo quis, venenatis turpis. Nunc quis consectetur purus. Nam vitae viverra lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu augue felis. Maecenas in dignissim purus, quis pulvinar lectus. Vivamus euismod ultrices diam, in mattis nibh. </div> </div> </div> </div>
Alerts
See http://getbootstrap.com/components/#alerts for complete alerts documentation.
<div class="alert alert-danger"> <span class="pficon pficon-error-circle-o"></span> <strong>Hey there is a problem!</strong> Yeah this is really messed up and you should <a href="#" class="alert-link">know about it</a>. </div> <div class="alert alert-warning"> <span class="pficon pficon-warning-triangle-o"></span> <strong>There might be a problem here!</strong> We are not really sure, but <a href="#" class="alert-link">it might be bad</a>. </div> <div class="alert alert-success"> <span class="pficon pficon-ok"></span> <strong>Great job!</strong> This is really working out <a href="#" class="alert-link">great for us</a>. </div> <div class="alert alert-info"> <span class="pficon pficon-info"></span> <strong>This is some general information.</strong> You should <a href="#" class="alert-link">know about this</a>. </div> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> <span class="pficon pficon-close"></span> </button> <span class="pficon pficon-error-circle-o"></span> <strong>Hey there is a problem!</strong> Yeah this is really messed up and you should <a href="#" class="alert-link">know about it</a>. </div>
Badges
See http://getbootstrap.com/components/#badges for complete badges documentation.
<a href="#">Inbox <span class="badge">42</span></a>
Bootstrap Combobox
See https://github.com/patternfly/patternfly-bootstrap-combobox for complete Bootstrap Combobox documentation.
<label>State</label> <select class="combobox form-control"> <option value="" selected="selected">Select a State</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District Of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> </div> <script src="/components/bootstrap-combobox/js/bootstrap-combobox.js"></script> <script> // Initialize Boostrap-Combobox $('.combobox').combobox(); </script>
Bootstrap Datepicker
See http://bootstrap-datepicker.readthedocs.org/en/latest/ for complete Bootstrap Datepicker documentation.
<input type="text" class="form-control bootstrap-datepicker"> <script src="/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script> <script> // Initialize Boostrap-datepicker $('.bootstrap-datepicker').datepicker({ autoclose: true, todayBtn: "linked", todayHighlight: true }); </script>
Bootstrap Select
See http://silviomoreto.github.io/bootstrap-select/ for complete Bootstrap Select documentation.
Single-Select
Multiple Select
<select class="selectpicker"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option disabled>Onions</option> </select> <select class="selectpicker" multiple> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option disabled>Onions</option> </select> <script src="/components/bootstrap-select/dist/js/bootstrap-select.min.js"></script> <script> // Initialize Boostrap-select $('.selectpicker').selectpicker(); </script>
Bootstrap Switch
See http://www.bootstrap-switch.org/ for complete Bootstrap Switch documentation.
<input class="bootstrap-switch" id="bootstrap-switch-state" type="checkbox" checked> <script> jQuery(".bootstrap-switch").bootstrapSwitch(); </script> <script src="/components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
Bootstrap Touchspin
See http://www.virtuosoft.eu/code/bootstrap-touchspin/ for complete Bootstrap Touchspin documentation.
<input class="bootstrap-touchspin" id="bootstrap-touchspin-empty" type="text" value="" name="bootstrap-touchspin-empty"> <script> $(".bootstrap-touchspin").TouchSpin(); </script> <script src="/components/bootstrap-touchspin/dist/js/jquery.bootstrap-touchspin.min.js"></script>
Bootstrap Tree View
See https://github.com/patternfly/patternfly-bootstrap-treeview for complete Bootstrap Tree View documentation.
<div id="treeview1"></div> <script src="/components/patternfly-bootstrap-treeview/dist/bootstrap-treeview.min.js"></script> <script> $(function() { var defaultData = [ { text: 'Parent 1', href: '#parent1', tags: ['4'], nodes: [ { text: 'Child 1', href: '#child1', icon: 'fa fa-file-o', tags: ['2'], nodes: [ { text: 'Grandchild 1', href: '#grandchild1', icon: 'fa fa-file-o', tags: ['0'] }, { text: 'Grandchild 2', href: '#grandchild2', icon: 'fa fa-file-o', tags: ['0'] } ] }, { text: 'Child 2', href: '#child2', icon: 'fa fa-file-o', tags: ['0'] } ] }, { text: 'Parent 2', href: '#parent2', tags: ['0'] }, { text: 'Parent 3', href: '#parent3', tags: ['0'] }, { text: 'Parent 4', href: '#parent4', tags: ['0'] }, { text: 'Parent 5', href: '#parent5' , tags: ['0'] } ]; $('#treeview1').treeview({ collapseIcon: "fa fa-angle-down", data: defaultData, expandIcon: "fa fa-angle-right", nodeIcon: "fa fa-folder", showBorder: false }); }); </script>
Breadcrumbs
See http://getbootstrap.com/components/#breadcrumbs for complete breadcrumbs documentation.
- Back to Top Level
- Second Level
- Third Level
- Fourth Level: Detail about fourth level
<ol class="breadcrumb"> <li> <a href="#">Back to Top Level</a> </li> <li> <a href="#">Second Level</a> </li> <li> <a href="#">Third Level</a> </li> <li class="active"> <strong>Fourth Level:</strong> Detail about fourth level </li> </ol>
Buttons
See http://getbootstrap.com/css/#buttons for complete buttons documentation.
<p> <button class="btn btn-default" type="button">Secondary</button> <button class="btn btn-primary" type="button">Primary</button> <button class="btn btn-danger" type="button">Destructive</button> </p> <p> <button class="btn btn-default btn-lg " type="button">Secondary Large</button> <button class="btn btn-primary btn-lg " type="button">Primary Large</button> <button class="btn btn-danger btn-lg" type="button">Destructive Large</button> </p> <p> <button class="btn btn-default btn-xs" type="button">Secondary Extra Small</button> <button class="btn btn-primary btn-xs" type="button">Primary Extra Small</button> <button class="btn btn-danger btn-xs" type="button">Destructive Extra Small</button> </p>
Button Groups
See http://getbootstrap.com/components/#btn-groups for complete button groups documentation.
<div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
Count Remaining Characters
Note: By default blockInputAtMaxLimit
is false, meaning that after
reaching the maximum number of characters specified, the user can still enter additional characters; the remaining
character count will turn negative. When blockInputAtMaxLimit
is true, the user will
be blocked from entering more characters after reaching the maximum character limit. The remaining character count
will stop at 0. When blockInputAtMaxLimit
is true, Right-Click 'paste' will only paste
characters until the maximum character limit is reached.
<form> <div class="form-group"> <label for="messageArea"></label> <textarea class="form-control" id="messageArea" name="text" placeholder="Type in your message" rows="5"></textarea> </div> <span class="pull-right chars-remaining-pf"> <span id="charRemainingCntFld"></span> <button id="postBtn" type="submit" class="btn btn-default">Post New Message</button> </span> </form> <script> (function($) { // countFld is the id of the field where you want the 'remaining chars. count' number // to be displayed. $('#messageArea').countRemainingChars( {countFld: 'charRemainingCntFld', charsMaxLimit: 100, charsWarnRemaining: 5, blockInputAtMaxLimit: false} ); // taId is the id of the textArea field which triggered the event $('#messageArea').on("overCharsMaxLimitEvent", function( event, taId ) { $('#postBtn').prop("disabled",true); }); $('#messageArea').on("underCharsMaxLimitEvent", function( event, taId) { $('#postBtn').prop("disabled",false); }); })(jQuery); </script>
Data Tables
See http://datatables.net for complete data tables documentation.
Note: jquery.dataTables.js must occur in the html source before patternfly*.js.
Rendering Engine | Browser | Platform(s) | Engine Version | CSS Grade | Actions |
---|
Empty State Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Learn more about this on the documentation.
<!-- Toolbar --> <div class="row toolbar-pf table-view-pf-toolbar" id="toolbar1"> <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="filter1">Rendering Engine</a></li> <li><a href="#" id="filter2">Browser</a></li> <li><a href="#" id="filter3">Platform(s)</a></li> <li><a href="#" id="filter4">Engine Version</a></li> <li><a href="#" id="filter5">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="deleteRows1">Delete Rows</button> <button class="btn btn-default" type="button" id="restoreRows1" disabled>Restore Rows</button> <div class="dropdown btn-group dropdown-kebab-pf"> <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <span class="fa fa-ellipsis-v"></span> </button> <ul class="dropdown-menu " aria-labelledby="dropdownKebab"> <li><a href="#">Action</a></li> <li><a href="#">Another Action</a></li> <li><a href="#">Something Else Here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated Link</a></li> </ul> </div> </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> <!-- Table HTML --> <table class="table table-striped table-bordered table-hover" id="table1"> <thead> <tr> <th><label class="sr-only" for="selectAll">Select all rows</label><input type="checkbox" id="selectAll" name="selectAll"></th> <th>Rendering Engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine Version</th> <th>CSS Grade</th> <th colspan="2">Actions</th> </tr> </thead> </table> <form class="content-view-pf-pagination table-view-pf-pagination clearfix" id="pagination1"> <div class="form-group"> <select class="selectpicker pagination-pf-pagesize"> <option value="6">6</option> <option value="10" >10</option> <option value="15" selected="selected">15</option> <option value="25">25</option> <option value="50">50</option> </select> <span>per page</span> </div> <div class="form-group"> <span><span class="pagination-pf-items-current">1-15</span> of <span class="pagination-pf-items-total">75</span></span> <ul class="pagination pagination-pf-back"> <li class="disabled"><a href="#" title="First Page"><span class="i fa fa-angle-double-left"></span></a></li> <li class="disabled"><a href="#" title="Previous Page"><span class="i fa fa-angle-left"></span></a></li> </ul> <label for="pagination1-page" class="sr-only">Current Page</label> <input class="pagination-pf-page" type="text" value="1" id="pagination1-page"/> <span>of <span class="pagination-pf-pages">5</span></span> <ul class="pagination pagination-pf-forward"> <li><a href="#" title="Next Page"><span class="i fa fa-angle-right"></span></a></li> <li><a href="#" title="Last Page"><span class="i fa fa-angle-double-right"></span></a></li> </ul> </div> </form> <!-- Blank Slate HTML --> <div class="blank-slate-pf table-view-pf-empty hidden" id="emptyState1"> <div class="blank-slate-pf-icon"> <span class="pficon pficon pficon-add-circle-o"></span> </div> <h1> Empty State Title </h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p> Learn more about this <a href="#">on the documentation</a>. </p> <div class="blank-slate-pf-main-action"> <button class="btn btn-primary btn-lg"> Main Action </button> </div> <div class="blank-slate-pf-secondary-action"> <button class="btn btn-default"> Secondary Action </button> <button class="btn btn-default"> Secondary Action </button> <button class="btn btn-default"> Secondary Action </button> </div> </div> <script> $(document).ready(function() { // JSON data for Table View var dataSet = [{ engine: "Trident", browser: "Internet Explorer 4.0", platforms: "Win 95+", version: "4", grade: "X" },{ engine: "Trident", browser: "Internet Explorer 5.0", platforms: "Win 95+", version: "5", grade: "C" }, { engine: "Trident", browser: "Internet Explorer 5.5", platforms: "Win 95+", version: "5.5", grade: "A" }, { engine: "Trident", browser: "Internet Explorer 6", platforms: "Win 98+", version: "6", grade: "A" }, { engine: "Trident", browser: "Internet Explorer 7", platforms: "Win XP SP2+", version: "7", grade: "A" }, { engine: "Trident", browser: "AOL browser (AOL desktop)", platforms: "Win XP", version: "6", grade: "A" }, { engine: "Gecko", browser: "Firefox 1.0", platforms: "Win 98+ / OSX.2+", version: "1.7", grade: "A" }, { engine: "Gecko", browser: "Firefox 1.5", platforms: "Win 98+ / OSX.2+", version: "1.8", grade: "A" }, { engine: "Gecko", browser: "Firefox 2.0", platforms: "Win 98+ / OSX.2+", version: "1.8", grade: "A" }, { engine: "Gecko", browser: "Firefox 3.0", platforms: "Win 2k+ / OSX.3+", version: "1.9", grade: "A" }, { engine: "Gecko", browser: "Camino 1.0", platforms: "OSX.2+", version: "1.8", grade: "A" }, { engine: "Gecko", browser: "Camino 1.5", platforms: "OSX.3+", version: "1.8", grade: "A" }, { engine: "Gecko", browser: "Netscape 7.2", platforms: "Win 95+ / Mac OS 8.6-9.2", version: "1.7", grade: "A" }, { engine: "Gecko", browser: "Netscape Browser 8", platforms: "Win 98SE+", version: "1.7", grade: "A" }, { engine: "Gecko", browser: "Netscape Navigator 9", platforms: "Win 98+ / OSX.2+", version: "1.8", grade: "A" }, { engine: "Gecko", browser: "Mozilla 1.0", platforms: "Win 95+ / OSX.1+", version: "1", grade: "A" }, { engine: "Gecko", browser: "Mozilla 1.1", platforms: "Win 95+ / OSX.1+", version: "1.1", grade: "A" }, { engine: "Gecko", browser: "Mozilla 1.2", platforms: "Win 95+ / OSX.1+", version: "1.2", grade: "A" }, { engine: "Gecko", browser: "Mozilla 1.3", platforms: "Win 95+ / OSX.1+", version: "1.3", grade: "A" }, { engine: "Gecko", browser: "Mozilla 1.4", platforms: "Win 95+ / OSX.1+", version: "1.4", grade: "A" }, { engine: "Gecko", browser: "Mozilla 1.5", platforms: "Win 95+ / OSX.1+", version: "1.5", grade: "A" }, { engine: "Gecko", browser: "Mozilla 1.6", platforms: "Win 95+ / OSX.1+", version: "1.6", grade: "A" }, { engine: "Gecko", browser: "Mozilla 1.7", platforms: "Win 98+ / OSX.1+", version: "1.7", grade: "A" }, { engine: "Gecko", browser: "Mozilla 1.8", platforms: "Win 98+ / OSX.1+", version: "1.8", grade: "A" }, { engine: "Gecko", browser: "Seamonkey 1.1", platforms: "Win 98+ / OSX.2+", version: "1.8", grade: "A" }, { engine: "Gecko", browser: "Epiphany 2.20", platforms: "Gnome", version: "1.8", grade: "A" }, { engine: "Webkit", browser: "Safari 1.2", platforms: "OSX.3", version: "125.5", grade: "A" }, { engine: "Webkit", browser: "Safari 1.3", platforms: "OSX.3", version: "312.8", grade: "A" }, { engine: "Webkit", browser: "Safari 2.0", platforms: "OSX.4+", version: "419.3", grade: "A" }, { engine: "Webkit", browser: "Safari 3.0", platforms: "OSX.4+", version: "522.1", grade: "A" }, { engine: "Webkit", browser: "OmniWeb 5.5", platforms: "OSX.4+", version: "420", grade: "A" }, { engine: "Webkit", browser: "iPod Touch / iPhone", platforms: "iPod", version: "420.1", grade: "A" }, { engine: "Webkit", browser: "S60", platforms: "S60", version: "413", grade: "A" }, { engine: "Presto", browser: "Opera 7.0", platforms: "Win 95+ / OSX.1+", version: "-", grade: "A" }, { engine: "Presto", browser: "Opera 7.5", platforms: "Win 95+ / OSX.2+", version: "-", grade: "A" }, { engine: "Presto", browser: "Opera 8.0", platforms: "Win 95+ / OSX.2+", version: "-", grade: "A" }, { engine: "Presto", browser: "Opera 8.5", platforms: "Win 95+ / OSX.2+", version: "-", grade: "A" }, { engine: "Presto", browser: "Opera 9.0", platforms: "Win 95+ / OSX.3+", version: "-", grade: "A" }, { engine: "Presto", browser: "Opera 9.2", platforms: "Win 88+ / OSX.3+", version: "-", grade: "A" }, { engine: "Presto", browser: "Opera 9.5", platforms: "Win 88+ / OSX.3+", version: "-", grade: "A" }, { engine: "Presto", browser: "Opera for Wii", platforms: "Wii", version: "-", grade: "A" }, { engine: "Presto", browser: "Nokia N800", platforms: "N800", version: "-", grade: "A" }, { engine: "Presto", browser: "Nintendo DS browser", platforms: "Nintendo DS", version: "8.5", grade: "C/A<sup>1</sup>" }, { engine: "KHTML", browser: "Konqureror 3.1", platforms: "KDE 3.1", version: "3.1", grade: "C" }, { engine: "KHTML", browser: "Konqureror 3.3", platforms: "KDE 3.3", version: "3.3", grade: "A" }, { engine: "KHTML", browser: "Konqureror 3.5", platforms: "KDE 3.5", version: "3.5", grade: "A" }, { engine: "Tasman", browser: "Internet Explorer 4.5", platforms: "Mac OS 8-9", version: "-", grade: "X" }, { engine: "Tasman", browser: "Internet Explorer 5.1", platforms: "Mac OS 7.6-9", version: "1", grade: "C" }, { engine: "Tasman", browser: "Internet Explorer 5.2", platforms: "Mac OS 8-X", version: "1", grade: "C" }, { engine: "Misc", browser: "NetFront 3.1", platforms: "Embedded devices", version: "-", grade: "C" }, { engine: "Misc", browser: "NetFront 3.4", platforms: "Embedded devices", version: "-", grade: "A" }, { engine: "Misc", browser: "Dillo 0.8", platforms: "Embedded devices", version: "-", grade: "X" }, { engine: "Misc", browser: "Links", platforms: "Text only", version: "-", grade: "X" }, { engine: "Misc", browser: "Lynx", platforms: "Text only", version: "-", grade: "X" }, { engine: "Misc", browser: "IE Mobile", platforms: "Windows Mobile 6", version: "-", grade: "C" }, { engine: "Misc", browser: "PSP browser", platforms: "PSP", version: "-", grade: "C" }, { engine: "Other browsers", browser: "All others", platforms: "-", version: "-", grade: "U" }]; // DataTable Config $("#table1").DataTable({ columns: [ { data: null, className: "table-view-pf-select", render: function (data, type, full, meta) { // Select row checkbox renderer var id = "select" + meta.row; return '<label class="sr-only" for="' + id + '">Select row ' + meta.row + '</label><input type="checkbox" id="' + id + '" name="' + id + '">'; }, sortable: false }, { data: "engine" }, { data: "browser" }, { data: "platforms" }, { data: "version" }, { data: "grade"}, { data: null, className: "table-view-pf-actions", render: function (data, type, full, meta) { // Inline action button renderer return '<div class="table-view-pf-btn"><button class="btn btn-default" type="button">Actions</button></div>'; } }, { data: null, className: "table-view-pf-actions", render: function (data, type, full, meta) { // Inline action kebab renderer return '<div class="dropdown dropdown-kebab-pf">' + '<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' + '<span class="fa fa-ellipsis-v"></span></button>' + '<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">' + '<li><a href="#">Action</a></li>' + '<li><a href="#">Another action</a></li>' + '<li><a href="#">Something else here</a></li>' + '<li role="separator" class="divider"></li>' + '<li><a href="#">Separated link</a></li></ul></div>'; } } ], data: dataSet, dom: "t", language: { zeroRecords: "No records found" }, order: [[ 1, 'asc' ]], pfConfig: { emptyStateSelector: "#emptyState1", filterCaseInsensitive: true, filterCols: [ null, { default: true, optionSelector: "#filter1", placeholder: "Filter By Rendering Engine..." }, { optionSelector: "#filter2", placeholder: "Filter By Browser..." }, { optionSelector: "#filter3", placeholder: "Filter By Platform(s)..." }, { optionSelector: "#filter4", placeholder: "Filter By Engine Version..." }, { optionSelector: "#filter5", placeholder: "Filter By CSS Grade..." } ], paginationSelector: "#pagination1", toolbarSelector: "#toolbar1", selectAllSelector: 'th:first-child input[type="checkbox"]', colvisMenuSelector: '.table-view-pf-colvis-menu' }, select: { selector: 'td:first-child input[type="checkbox"]', style: 'multi' }, }); /** * Utility to show empty Table View * * @param {object} config - Config properties associated with a Table View * @param {object} config.data - Data set for DataTable * @param {string} config.deleteRowsSelector - Selector for delete rows control * @param {string} config.restoreRowsSelector - Selector for restore rows control * @param {string} config.tableSelector - Selector for the HTML table */ var emptyTableViewUtil = function (config) { var self = this; this.dt = $(config.tableSelector).DataTable(); // DataTable this.deleteRows = $(config.deleteRowsSelector); // Delete rows control this.restoreRows = $(config.restoreRowsSelector); // Restore rows control // Handle click on delete rows control this.deleteRows.on('click', function() { self.dt.clear().draw(); $(self.restoreRows).prop("disabled", false); }); // Handle click on restore rows control this.restoreRows.on('click', function() { self.dt.rows.add(config.data).draw(); $(this).prop("disabled", true); }); // Initialize restore rows if (this.dt.data().length === 0) { $(this.restoreRows).prop("disabled", false); } }; // Initialize empty Table View util new emptyTableViewUtil({ data: dataSet, deleteRowsSelector: "#deleteRows1", restoreRowsSelector: "#restoreRows1", tableSelector: "#table1" }); /** * Utility to find items in Table View */ var findTableViewUtil = function (config) { // Upon clicking the find button, show the find dropdown content $(".btn-find").click(function () { $(this).parent().find(".find-pf-dropdown-container").toggle(); }); // Upon clicking the find close button, hide the find dropdown content $(".btn-find-close").click(function () { $(".find-pf-dropdown-container").hide(); }); }; // Initialize find util new findTableViewUtil(); }); </script> <script src="/components/datatables/media/js/jquery.dataTables.js"></script> <script> // Initialize Datatables $(document).ready(function() { $('.datatable').dataTable(); }); </script>
Dropdowns
See http://getbootstrap.com/components/#dropdowns for complete dropdowns documentation.
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
Fixed Height Accordion (Collapse)
Same markup as Accordion but in a fixed height container. The content of the collapse areas scroll rather than expanding the outer accordion container.
Note: Setting the collapse areas to scroll rather than expand requires patternfly.min.js, initialization via initCollapseHeights()
<div class="panel-group" id="fixed-accordion" style="height: 350px;"> <div class="panel panel-default"> <div class="panel-heading" data-component="collapse-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseOne"> Lorem ipsum </a> </h4> </div> <div id="fixedCollapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Praesent sagittis est et arcu fringilla placerat. Cras erat ante, dapibus non mauris ac, volutpat sollicitudin ligula. Morbi gravida nisl vel risus tempor, sit amet luctus erat tempus. Curabitur blandit sem non pretium bibendum. Donec eleifend non turpis vitae vestibulum. Vestibulum ut sem ac nunc posuere blandit sed porta lorem. Cras rutrum velit vel leo iaculis imperdiet. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" data-component="collapse-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseTwo" class="collapsed"> Dolor sit amet </a> </h4> </div> <div id="fixedCollapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Donec consequat dignissim neque, sed suscipit quam egestas in. Fusce bibendum laoreet lectus commodo interdum. Vestibulum odio ipsum, tristique et ante vel, iaculis placerat nulla. Suspendisse iaculis urna feugiat lorem semper, ut iaculis risus tempus. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" data-component="collapse-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseThree" class="collapsed"> Consectetur </a> </h4> </div> <div id="fixedCollapseThree" class="panel-collapse collapse"> <div class="panel-body"> Curabitur nisl quam, interdum a venenatis a, consequat a ligula. Nunc nec lorem in erat rhoncus lacinia at ac orci. Sed nec augue congue, vehicula justo quis, venenatis turpis. Nunc quis consectetur purus. Nam vitae viverra lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu augue felis. Maecenas in dignissim purus, quis pulvinar lectus. Vivamus euismod ultrices diam, in mattis nibh. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" data-component="collapse-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseFour" class="collapsed"> Adipisicing elit </a> </h4> </div> <div id="fixedCollapseFour" class="panel-collapse collapse"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" data-component="collapse-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseFive" class="collapsed"> Suspendisse lectus tortor </a> </h4> </div> <div id="fixedCollapseFive" class="panel-collapse collapse"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" data-component="collapse-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseSix" class="collapsed"> Velit mauris </a> </h4> </div> <div id="fixedCollapseSix" class="panel-collapse collapse"> <div class="panel-body"> Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" data-component="collapse-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseSeven" class="collapsed"> Aliquam convallis </a> </h4> </div> <div id="fixedCollapseSeven" class="panel-collapse collapse"> <div class="panel-body"> Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" data-component="collapse-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#fixed-accordion" href="#fixedCollapseEight" class="collapsed"> Vulputate dictum </a> </h4> </div> <div id="fixedCollapseEight" class="panel-collapse collapse"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna. </div> </div> </div> </div> <script> $(document).ready(function() { $('#fixed-accordion').initCollapseHeights(); }); </script>
Forms
See http://getbootstrap.com/css/#forms for complete forms documentation.
Horizontal Form
<form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label" for="textInput-markup">Default</label> <div class="col-sm-10"> <input type="text" id="textInput-markup" class="form-control"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="textInputDisabled-markup">Disabled</label> <div class="col-sm-10"> <input type="text" id="textInputDisabled-markup" class="form-control" disabled> </div> </div> <div class="form-group has-error"> <label class="col-sm-2 control-label" for="inputError-markup">With error</label> <div class="col-sm-10"> <input type="text" id="inputError-markup" class="form-control"> <span class="help-block">Please correct the error</span> </div> </div> </form>
Google Code Prettify
See https://code.google.com/p/google-code-prettify/wiki/GettingStarted for complete Google Code Prettify documentation.
<p class="my-class">Sample text here...</p>
<pre class="prettyprint"> <p class="my-class">Sample text here...</p> </pre> <script src="/components/google-code-prettify/bin/prettify.min.js"></script> <script> (function($) { $(document).ready(function(){ prettyPrint(); }); })(jQuery); </script>
Info Tip
Note: Info Tip uses Dropdowns.
<nav class="navbar navbar-default navbar-pf" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"> <img src="assets/img/brand-alt.svg" alt="PatternFly Enterprise Application" /> </a> </div> <div class="collapse navbar-collapse navbar-collapse-1"> <ul class="nav navbar-nav navbar-utility"> <li class="dropdown"> <a href="#" data-toggle="dropdown"> <span class="pficon pficon-info"></span> Messages: <strong>2</strong> </a> <div class="dropdown-menu infotip bottom-right"> <div class="arrow"></div> <ul class="list-group"> <li class="list-group-item"> <span class="i pficon pficon-info"></span> Added Datasources TestDS </li> <li class="list-group-item"> <span class="i pficon pficon-info"></span> Modified Datasources ExampleDS </li> </ul> <div class="footer"><a href="#">Clear Messages</a></div> </div> </li> </ul> <ul class="nav navbar-nav navbar-primary"> <li> <a href="#">First Link</a> </li> </ul> </div> </nav>
Kebabs
Kebabs are a restyled version of a dropdown and support the same feature set. See http://getbootstrap.com/components/#dropdowns for complete dropdowns documentation.
<div class="dropdown dropdown-kebab-pf"> <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <span class="fa fa-ellipsis-v"></span> </button> <ul class="dropdown-menu " aria-labelledby="dropdownKebab"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
Labels
See http://getbootstrap.com/components/#labels for complete labels documentation.
<span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span>
List Group
See http://getbootstrap.com/components/#list-group for complete list group documentation.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>
Modal
See http://getbootstrap.com/javascript/#modals for complete modal documentation.
Modal Title
<button class="btn btn-default" data-toggle="modal" data-target="#myModal">Launch demo modal</button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> <span class="pficon pficon-close"></span> </button> <h4 class="modal-title" id="myModalLabel">Modal Title</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-3 control-label" for="textInput-modal-markup">Field One</label> <div class="col-sm-9"> <input type="text" id="textInput-modal-markup" class="form-control"></div> </div> <div class="form-group"> <label class="col-sm-3 control-label" for="textInput2-modal-markup">Field Two</label> <div class="col-sm-9"> <input type="text" id="textInput2-modal-markup" class="form-control"></div> </div> <div class="form-group"> <label class="col-sm-3 control-label" for="textInput3-modal-markup">Field Three</label> <div class="col-sm-9"> <input type="text" id="textInput3-modal-markup" class="form-control"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div>
Pagination
See http://getbootstrap.com/components/#pagination for complete pagination documentation.
Default Pagination
<ul class="pagination"> <li> <a href="#"> <span class="i fa fa-angle-left"></span> </a> </li> <li> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li> <a href="#">4</a> </li> <li> <a href="#">5</a> </li> <li> <a href="#"> <span class="i fa fa-angle-right"></span> </a> </li> </ul>
Pager
<ul class="pager"> <li class="previous"> <a href="#"> <span class="i fa fa-angle-left"></span> Previous </a> </li> <li class="next"> <a href="#"> Next <span class="i fa fa-angle-right"></span> </a> </li> </ul>
Panels
See http://getbootstrap.com/components/#panels for complete panels documentation.
Panel title
<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div>
Popover
See http://getbootstrap.com/javascript/#popovers for complete popover documentation.
Note: Displaying the close (X) icon in popovers requires patternfly.min.js, initialization via popovers()
(note the "s"), and adding data attribute data-close="true"
to the trigger element.
<div> <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="1 http smartproxy 1 http http http" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true">Click to toggle popover 1</a> </div> <div style="margin-top: 20px;"> <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true">Click to toggle popover 2</a> </div> <div style="margin: 20px 0;"> <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="3 popover example" data-content="Popover with no Close icon. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy.">Click to toggle popover 3 </a> </div> <div style="margin: 20px 0;"> <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy.">Click to toggle popover 4 </a> </div> <script> // Initialize Popovers $(document).ready(function() { $('[data-toggle=popover]').popovers() }); </script>
Progress Bars
See http://getbootstrap.com/components/#progress for complete progress bar documentation.
Basic
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% complete</span> </div> </div>
With Label
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> <span>50%</span> </div> </div>
Label on Left
<div class="progress progress-label-left"> <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;"> <span>5%</span> </div> </div>
Label on Top Left and Top Right
<div class="progress-description"> <div class="spinner spinner-xs spinner-inline"></div> <strong>Downloading:</strong> Product Repositories </div> <div class="progress progress-label-top-right"> <div class="progress-bar" role="progressbar" aria-valuenow="42.7" aria-valuemin="0" aria-valuemax="100" style="width: 42.7%;"> <span>42.7% (35 of 82MB)</span> </div> </div>
<div class="progress-description"> <span class="count">46,512</span> <strong>Downloading:</strong> Product Repositories </div> <div class="progress progress-label-top-right"> <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"> <span>100%</span> </div> </div>
<div class="progress-description"> <span class="pficon pficon-ok"></span> <strong>Network Activity:</strong> 10.10.121.02 </div> <div class="progress progress-label-top-right"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"> <span>100%</span> </div> </div>
Additional Sizes
Small
<div class="progress progress-sm"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% complete</span> </div> </div>
Extra Small
Note: Extra small does not support labels.
<div class="progress progress-xs"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% complete</span> </div> </div>
Search
<form role="form" class="search-pf has-button"> <div class="form-group has-clear"> <div class="search-pf-input-group"> <label for="search1" class="sr-only">Search</label> <input id="search1" type="search" class="form-control" placeholder="Search"> <button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button> </div> </div> <div class="form-group"> <button class="btn btn-default" type="button"><span class="fa fa-search"></span></button> </div> </form> <script> (function($) { $(document).ready(function() { // Hide the clear button if the search input is empty $(".search-pf .has-clear .clear").each(function() { if (!$(this).prev('.form-control').val()) { $(this).hide(); } }); // Show the clear button upon entering text in the search input $(".search-pf .has-clear .form-control").keyup(function () { var t = $(this); t.next('button').toggle(Boolean(t.val())); }); // Upon clicking the clear button, empty the entered text and hide the clear button $(".search-pf .has-clear .clear").click(function () { $(this).prev('.form-control').val('').focus(); $(this).hide(); }); }); })(jQuery); </script>
Spinner
Note: IE9 requires a conditional class on <html> in order to display an animated gif fallback as it doesn't support CSS animation. See lines 2-5 of https://rawgit.com/patternfly/patternfly/master-dist/dist/tests/spinner.html.
<div class="spinner"></div>
Additional Sizes
Large
<div class="spinner spinner-lg"></div>
Small
<div class="spinner spinner-sm"></div>
Extra Small
<div class="spinner spinner-xs"></div>
Inline
Along with some text
<p><span class="spinner spinner-xs spinner-inline"></span> Along with some text</p>
Inverse (on a dark background)
<div class="spinner spinner-inverse"></div>
Tables
See http://getbootstrap.com/css/#tables for complete tables documentation.
Note: all tables in PatternFly are condensed.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table table-striped table-bordered"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
Tabs
See http://getbootstrap.com/components/#nav-tabs for complete tabs documentation.
Single Level
<ul class="nav nav-tabs"> <li class="active"><a href="#">Tab One</a></li> <li><a href="#">Tab Two</a></li> <li><a href="#">Tab Three</a></li> <li><a href="#">Tab Four</a></li> <li><a href="#">Tab Five</a></li> </ul>
Single Level with Dropdown
<ul class="nav nav-tabs"> <li class="active"><a href="#">Tab One</a></li> <li><a href="#">Tab Two</a></li> <li><a href="#">Tab Three</a></li> <li><a href="#">Tab Four</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Tab Five <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul>
Single Level with Persistent Secondary Level
Note: the markup semantics used here are sub-optimal in order to easily achieve a responsive layout.
<ul class="nav nav-tabs"> <li class="active"><a href="#">Tab One</a></li> <li><a href="#">Tab Two</a></li> <li><a href="#">Tab Three</a></li> <li><a href="#">Tab Four</a></li> <li><a href="#">Tab Five</a></li> </ul> <ul class="nav nav-tabs nav-tabs-pf"> <li class="active"><a href="#">Secondary Tab One</a></li> <li><a href="#">Secondary Tab Two</a></li> <li><a href="#">Secondary Tab Three</a></li> <li><a href="#">Secondary Tab Four</a></li> <li><a href="#">Secondary Tab Five</a></li> </ul>
Timepicker
See http://eonasdan.github.io/bootstrap-datetimepicker/ for complete Timepicker documentation.
<script src="/components/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"></script> <script src="/components/moment/min/moment.min.js"></script> <div class="input-group time-picker-pf" id="time-picker-2"> <input type="text" class="form-control"/> <span class="input-group-addon btn btn-default"> <span class="fa fa-clock-o"></span> </span> </div> <script> $('#time-picker-2').datetimepicker({ format: 'LT', keyBinds: { enter: function () { $('#time-picker-2').find('input').trigger('change'); this.hide(); } } }); $('#time-picker-2').data('DateTimePicker').clear(); </script>
Tooltip
See http://getbootstrap.com/javascript/#tooltips for complete tooltip documentation.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
TreeGrid Table
Column heading | Column heading | Column heading | Column heading |
---|---|---|---|
Parent 1 | Column content | Column content | Column content |
Child 1 | Column content | Column content | Column content |
Grandchild 1 | Column content | Column content | Column content |
Grandchild 2 | Column content | Column content | Column content |
Grandchild 3 | Column content | Column content | Column content |
Child 2 | Column content | Column content | Column content |
Parent 2 | Column content | Column content | Column content |
Parent 3 | Column content | Column content | Column content |
Child 3 | Column content | Column content | Column content |
Parent 4 | Column content | Column content | Column content |
Child 4 | Column content | Column content | Column content |
Grandchild 4 | Column content | Column content | Column content |
<div class="table-responsive"> <table class="table table-bordered table-hover table-treegrid"> <thead> <tr> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr> <td class="treegrid-node"> <span class="icon node-icon fa fa-folder"></span> Parent 1 </td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr data-parent="0"> <td class="treegrid-node"> <span class="icon node-icon fa fa-file-o"></span> Child 1 </td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr data-parent="1"> <td class="treegrid-node"> <span class="icon node-icon fa fa-file-o"></span> Grandchild 1 </td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr data-parent="1"> <td class="treegrid-node"> <span class="icon node-icon fa fa-file-o"></span> Grandchild 2 </td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr data-parent="1"> <td class="treegrid-node"> <span class="icon node-icon fa fa-file-o"></span> Grandchild 3 </td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr data-parent="0"> <td class="treegrid-node"> <span class="icon node-icon fa fa-file-o"></span> Child 2 </td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td class="treegrid-node"> <span class="icon node-icon fa fa-folder"></span> Parent 2 </td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr id="parent-3"> <td class="treegrid-node"> <span class="icon node-icon fa fa-folder"></span> Parent 3 </td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr data-parent="#parent-3"> <td class="treegrid-node"> <span class="icon node-icon fa fa-file-o"></span> Child 3 </td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr id="parent-4" class="collapsed"> <td class="treegrid-node"> <span class="icon node-icon fa fa-folder"></span> Parent 4 </td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr data-parent="#parent-4" id="child-4"> <td class="treegrid-node"> <span class="icon node-icon fa fa-file-o"></span> Child 4 </td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr data-parent="#child-4"> <td class="treegrid-node"> <span class="icon node-icon fa fa-file-o"></span> Grandchild 4 </td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table> </div> <script> $('.table-treegrid').treegrid(); </script>