Rendering components using the html helper
<?php echo TbHtml::pagination(array( array('label' => '«', 'url' => '#'), array('label' => '1', 'url' => '#'), array('label' => '2', 'url' => '#'), array('label' => '3', 'url' => '#'), array('label' => '4', 'url' => '#'), array('label' => '5', 'url' => '#'), array('label' => '»', 'url' => '#'), )); ?>
<?php echo TbHtml::pagination(array( array('label' => '«', 'url' => '#', 'disabled' => true), array('label' => '1', 'url' => '#', 'active' => true), ... )); ?>
<?php echo TbHtml::pagination(array(...), array('size' => TbHtml::PAGINATION_SIZE_LARGE)); ?> <?php echo TbHtml::pagination(array(...)); ?> <?php echo TbHtml::pagination(array(...), array('size' => TbHtml::PAGINATION_SIZE_SMALL)); ?> <?php echo TbHtml::pagination(array(...), array('size' => TbHtml::PAGINATION_SIZE_MINI)); ?>
<?php echo TbHtml::pagination(array(...), array('align' => TbHtml::PAGINATION_ALIGN_CENTER)); ?>
<?php echo TbHtml::pagination(array(...), array('align' => TbHtml::PAGINATION_ALIGN_RIGHT)); ?>
<?php echo TbHtml::pager(array( array('label' => 'Previous', 'url' => '#'), array('label' => 'Next', 'url' => '#'), )); ?>
<?php echo TbHtml::pager(array( array('label' => '← Older', 'url' => '#', 'previous' => true), array('label' => 'Newer →', 'url' => '#', 'next' => true), )); ?>
<?php echo TbHtml::pager(array( array('label' => '← Older', 'url' => '#', 'previous' => true, 'disabled' => true), ... )); ?>
Labels | Code |
---|---|
Default |
<?php echo TbHtml::labelTb('Default'); ?>
|
Success |
<?php echo TbHtml::labelTb('Success', array('color' => TbHtml::LABEL_COLOR_SUCCESS)); ?>
|
Warning |
<?php echo TbHtml::labelTb('Warning', array('color' => TbHtml::LABEL_COLOR_WARNING)); ?>
|
Important |
<?php echo TbHtml::labelTb('Important', array('color' => TbHtml::LABEL_COLOR_IMPORTANT)); ?>
|
Info |
<?php echo TbHtml::labelTb('Info', array('color' => TbHtml::LABEL_COLOR_INFO)); ?>
|
Inverse |
<?php echo TbHtml::labelTb('Inverse', array('color' => TbHtml::LABEL_COLOR_INVERSE)); ?>
|
Name | Example | Code |
---|---|---|
Default | 1 |
<?php echo TbHtml::badge('1'); ?>
|
Success | 2 |
<?php echo TbHtml::badge('2', array('color' => TbHtml::BADGE_COLOR_SUCCESS)); ?>
|
Warning | 4 |
<?php echo TbHtml::badge('4', array('color' => TbHtml::BADGE_COLOR_WARNING)); ?>
|
Important | 6 |
<?php echo TbHtml::badge('6', array('color' => TbHtml::BADGE_COLOR_IMPORTANT)); ?>
|
Info | 8 |
<?php echo TbHtml::badge('8', array('color' => TbHtml::BADGE_COLOR_INFO)); ?>
|
Inverse | 10 |
<?php echo TbHtml::badge('10', array('color' => TbHtml::BADGE_COLOR_INVERSE)); ?>
|
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
<?php echo TbHtml::heroUnit('Hello, world!', '...'); ?>
<?php TbHtml::pageHeader('Example page header', 'Subtext for header'); ?>
<?php echo TbHtml::thumbnails(array( array('image' => 'holder.js/260x180', 'url' => '#'), array('image' => 'holder.js/260x180', 'url' => '#'), array('image' => 'holder.js/260x180', 'url' => '#'), array('image' => 'holder.js/260x180', 'url' => '#'), )); ?>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
<?php echo TbHtml::thumbnails(array( array('image' => 'holder.js/300x200', 'label' => 'Thumbnail label', 'caption' => '...'), array('image' => 'holder.js/300x200', 'label' => 'Thumbnail label', 'caption' => '...'), array('image' => 'holder.js/300x200', 'label' => 'Thumbnail label', 'caption' => '...'), ), array('span' => 4)); ?>
<?php echo TbHtml::thumbnails(array( array('image' => 'holder.js/360x270', 'url' => '#', 'span' => 4), array('image' => 'holder.js/260x120', 'url' => '#', 'span' => 3), array('image' => 'holder.js/160x120', 'url' => '#', 'span' => 2), array('image' => 'holder.js/260x120', 'url' => '#', 'span' => 3), array('image' => 'holder.js/160x120', 'url' => '#', 'span' => 2), )); ?>
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 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.
Tight pants next level keffiyeh <?php echo TbHtml::tooltip('you probably', '#', 'Default tooltip'); ?> 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 <?php echo TbHtml::tooltip('have a', '#', 'Another tooltip'); ?> 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 <?php echo TbHtml::tooltip('whatever keytar', '#', 'Another one here too'); ?>, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
<?php echo TbHtml::tooltip(...); ?> <?php echo TbHtml::tooltip(..., array('placement' => TbHtml::TOOLTIP_PLACEMENT_RIGHT)); ?> <?php echo TbHtml::tooltip(..., array('placement' => TbHtml::TOOLTIP_PLACEMENT_BOTTOM)); ?> <?php echo TbHtml::tooltip(..., array('placement' => TbHtml::TOOLTIP_PLACEMENT_LEFT)); ?>
<?php echo TbHtml::popover('Click to toggle popover', 'A Title', '...', array( 'class' => 'btn btn-large btn-danger', )); ?>
<?php echo TbHtml::alert(TbHtml::ALERT_COLOR_WARNING, '...'); ?>
<?php echo TbHtml::blockAlert(TbHtml::ALERT_COLOR_WARNING, '...'); ?>
<?php echo TbHtml::alert(TbHtml::ALERT_COLOR_ERROR, '...'); ?>
<?php echo TbHtml::alert(TbHtml::ALERT_COLOR_SUCCESS, '...'); ?>
<?php echo TbHtml::alert(TbHtml::ALERT_COLOR_INFO, '...'); ?>
<?php echo TbHtml::progressBar(60); ?>
<?php echo TbHtml::stripedProgressBar(20); ?>
<?php echo TbHtml::animatedProgressBar(40); ?>
<?php echo TbHtml::stackedProgressBar(array( array('color' => TbHtml::PROGRESS_COLOR_SUCCESS, 'width' => 35), array('color' => TbHtml::PROGRESS_COLOR_WARNING, 'width' => 20), array('color' => TbHtml::PROGRESS_COLOR_DANGER, 'width' => 10), )); ?>
<?php echo TbHtml::mediaList(array( array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...'), array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...', 'items' => array( array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...'), )), )); ?>
<?php echo TbHtml::mediaList(array( array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...', 'items' => array( array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...', 'items' => array( array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...'), )), array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...'), )), array('heading' => 'Media heading', 'content' => '...'), )); ?>
<?php echo TbHtml::carousel(array( array('image' => 'holder.js/830x477', 'label' => 'First Thumbnail label', 'caption' => '...'), array('image' => 'holder.js/830x477', 'label' => 'Second Thumbnail label', 'caption' => '...'), array('image' => 'holder.js/830x477', 'label' => 'Third Thumbnail label', 'caption' => '...'), )); ?>
<?php echo TbHtml::well('Look, I\'m in a well!'); ?>
<?php echo TbHtml::well('Look, I\'m in a well!', array('size' => TbHtml::WELL_SIZE_LARGE)); ?>
<?php echo TbHtml::well('Look, I\'m in a well!', array('size' => TbHtml::WELL_SIZE_SMALL)); ?>
<?php echo TbHtml::closeButton(); ?>
<?php echo TbHtml::closeLink(); ?>