Components
Tabs panels allows add quick, dynamic tab functionality to transition through panes of local content. Together with Bootstrap default tabs position at top, ORB allows you to use another tabs styles with different tabs positions — left, bottom and right.
Examples
TabsNormal State
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed elit non arcu gravida cursus. Ut non porttitor augue. Sed ornare diam ac tortor molestie, ut vestibulum nibh placerat. In hac habitasse platea dictumst. Vivamus pharetra pretium purus, ut suscipit magna malesuada at.
Praesent porta, urna et gravida facilisis, dolor ante cursus ante, lobortis feugiat orci odio sit amet erat. Ut elit neque, placerat at mi at, accumsan ullamcorper nibh. Donec dignissim, eros a rhoncus porttitor, erat est facilisis metus, suscipit consectetur tellus lacus at quam. Aenean nec nibh justo. Proin malesuada erat in tincidunt aliquet. Cras vel congue nibh, sodales vehicula libero. Phasellus justo diam, varius vel libero eget, aliquam pharetra nisi.
Nulla posuere mauris sem, vel hendrerit arcu fringilla ut. Quisque lacinia placerat dolor. Etiam semper convallis pulvinar. Suspendisse sollicitudin erat ac faucibus adipiscing. Pellentesque sagittis mollis tincidunt. Duis blandit leo ligula, vitae commodo diam posuere eget. Donec tempor euismod elementum. Nunc interdum bibendum lobortis. Etiam eget justo eu risus interdum mollis.
TabsTabs at Bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed elit non arcu gravida cursus. Ut non porttitor augue. Sed ornare diam ac tortor molestie, ut vestibulum nibh placerat. In hac habitasse platea dictumst. Vivamus pharetra pretium purus, ut suscipit magna malesuada at.
Praesent porta, urna et gravida facilisis, dolor ante cursus ante, lobortis feugiat orci odio sit amet erat. Ut elit neque, placerat at mi at, accumsan ullamcorper nibh. Donec dignissim, eros a rhoncus porttitor, erat est facilisis metus, suscipit consectetur tellus lacus at quam. Aenean nec nibh justo. Proin malesuada erat in tincidunt aliquet. Cras vel congue nibh, sodales vehicula libero. Phasellus justo diam, varius vel libero eget, aliquam pharetra nisi.
Nulla posuere mauris sem, vel hendrerit arcu fringilla ut. Quisque lacinia placerat dolor. Etiam semper convallis pulvinar. Suspendisse sollicitudin erat ac faucibus adipiscing. Pellentesque sagittis mollis tincidunt. Duis blandit leo ligula, vitae commodo diam posuere eget. Donec tempor euismod elementum. Nunc interdum bibendum lobortis. Etiam eget justo eu risus interdum mollis.
TabsTabs Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed elit non arcu gravida cursus. Ut non porttitor augue. Sed ornare diam ac tortor molestie, ut vestibulum nibh placerat. In hac habitasse platea dictumst. Vivamus pharetra pretium purus, ut suscipit magna malesuada at.
Praesent porta, urna et gravida facilisis, dolor ante cursus ante, lobortis feugiat orci odio sit amet erat. Ut elit neque, placerat at mi at, accumsan ullamcorper nibh. Donec dignissim, eros a rhoncus porttitor, erat est facilisis metus, suscipit consectetur tellus lacus at quam. Aenean nec nibh justo. Proin malesuada erat in tincidunt aliquet. Cras vel congue nibh, sodales vehicula libero. Phasellus justo diam, varius vel libero eget, aliquam pharetra nisi.
Nulla posuere mauris sem, vel hendrerit arcu fringilla ut. Quisque lacinia placerat dolor. Etiam semper convallis pulvinar. Suspendisse sollicitudin erat ac faucibus adipiscing. Pellentesque sagittis mollis tincidunt. Duis blandit leo ligula, vitae commodo diam posuere eget. Donec tempor euismod elementum. Nunc interdum bibendum lobortis. Etiam eget justo eu risus interdum mollis.
TabsTabs Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed elit non arcu gravida cursus. Ut non porttitor augue. Sed ornare diam ac tortor molestie, ut vestibulum nibh placerat. In hac habitasse platea dictumst. Vivamus pharetra pretium purus, ut suscipit magna malesuada at.
Praesent porta, urna et gravida facilisis, dolor ante cursus ante, lobortis feugiat orci odio sit amet erat. Ut elit neque, placerat at mi at, accumsan ullamcorper nibh. Donec dignissim, eros a rhoncus porttitor, erat est facilisis metus, suscipit consectetur tellus lacus at quam. Aenean nec nibh justo. Proin malesuada erat in tincidunt aliquet. Cras vel congue nibh, sodales vehicula libero. Phasellus justo diam, varius vel libero eget, aliquam pharetra nisi.
Nulla posuere mauris sem, vel hendrerit arcu fringilla ut. Quisque lacinia placerat dolor. Etiam semper convallis pulvinar. Suspendisse sollicitudin erat ac faucibus adipiscing. Pellentesque sagittis mollis tincidunt. Duis blandit leo ligula, vitae commodo diam posuere eget. Donec tempor euismod elementum. Nunc interdum bibendum lobortis. Etiam eget justo eu risus interdum mollis.
There is no additional JavaScript needed for using Tabs with different position. To make tabs on right wrap em to
.tabbable .tabs-right class, to make tabs on below use .tabbable .tabs-below, to position tabs on left use .tabbable .tabs-leftColored Examples
Tabs Grey
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed elit non arcu gravida cursus. Ut non porttitor augue. Sed ornare diam ac tortor molestie, ut vestibulum nibh placerat. In hac habitasse platea dictumst. Vivamus pharetra pretium purus, ut suscipit magna malesuada at.
Praesent porta, urna et gravida facilisis, dolor ante cursus ante, lobortis feugiat orci odio sit amet erat. Ut elit neque, placerat at mi at, accumsan ullamcorper nibh. Donec dignissim, eros a rhoncus porttitor, erat est facilisis metus, suscipit consectetur tellus lacus at quam. Aenean nec nibh justo. Proin malesuada erat in tincidunt aliquet. Cras vel congue nibh, sodales vehicula libero. Phasellus justo diam, varius vel libero eget, aliquam pharetra nisi.
Nulla posuere mauris sem, vel hendrerit arcu fringilla ut. Quisque lacinia placerat dolor. Etiam semper convallis pulvinar. Suspendisse sollicitudin erat ac faucibus adipiscing. Pellentesque sagittis mollis tincidunt. Duis blandit leo ligula, vitae commodo diam posuere eget. Donec tempor euismod elementum. Nunc interdum bibendum lobortis. Etiam eget justo eu risus interdum mollis.
Tabs Green
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed elit non arcu gravida cursus. Ut non porttitor augue. Sed ornare diam ac tortor molestie, ut vestibulum nibh placerat. In hac habitasse platea dictumst. Vivamus pharetra pretium purus, ut suscipit magna malesuada at.
Praesent porta, urna et gravida facilisis, dolor ante cursus ante, lobortis feugiat orci odio sit amet erat. Ut elit neque, placerat at mi at, accumsan ullamcorper nibh. Donec dignissim, eros a rhoncus porttitor, erat est facilisis metus, suscipit consectetur tellus lacus at quam. Aenean nec nibh justo. Proin malesuada erat in tincidunt aliquet. Cras vel congue nibh, sodales vehicula libero. Phasellus justo diam, varius vel libero eget, aliquam pharetra nisi.
Nulla posuere mauris sem, vel hendrerit arcu fringilla ut. Quisque lacinia placerat dolor. Etiam semper convallis pulvinar. Suspendisse sollicitudin erat ac faucibus adipiscing. Pellentesque sagittis mollis tincidunt. Duis blandit leo ligula, vitae commodo diam posuere eget. Donec tempor euismod elementum. Nunc interdum bibendum lobortis. Etiam eget justo eu risus interdum mollis.
You need only add some new CSS classes to make your tabs colored. Colored tabs looking great and you can use colors to attract user attention to something more important or meaning. Examples above will guide you to create your own styles if you want to. To get grey tabs wrap it in
.tabs-grey class, to make tabs green use .tabs-green class.Tooltips and Popovers
Require JavaScript
Invocation of tooltip stated in JavaScript. Add .tooltiped class to element to invoke tooltip.
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Require JavaScript
For some reasons, we need to invoke popover in JavaScript. Add .popovered class to element to invoke popover. To make popover appears on :hover event use .popover-hovered class.
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Please don't forget that within the ORB you can apply transitions effects to your popovers. For more information check this page.
Collapsible Panels
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Progress Bars
Progress bars provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Cross-browser compatibility
Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.Examples
Progress BarStacked
Progress BarWith Label
Extended Bars
JavaScript Required
To get bars with non-percantage label and vertical bars we use special library, calledbootstrap-progressbar v0.7.1, that extends traditional Bootstrap functionality. Lib can be found in js/vendors folder of the ORB root. Look below to see that we get using this magic library :)