Helper Functions Html.php

Latest Stable Version Latest Unstable Version Total Downloads Monthly Downloads Daily Downloads
Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the kartik-v/yii2-krajee-base extension which in turn depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

This helper class extends the Yii Html Helper by adding Bootstrap 3.0 features and functionality.

Generates a bootstrap glyphicon based on the icon\'s name suffix. The following parameters are supported by this method:

  • $icon: string, the bootstrap icon name without prefix (e.g. plus, pencil, trash).

  • $options: array, the HTML attributes / options for the icon container.

  • $prefix: string, the CSS class prefix - defaults to glyphicon glyphicon-.

  • $tag: string, the HTML tag for rendering the icon container (usually span or i) - defaults to span.

       
echo Html::icon('pencil');
echo Html::icon('plus', ['class' => 'text-success']);
echo Html::icon('trash', ['style' => 'color: red; font-size: 2em']);

Advanced usage with other font icon frameworks like Font-Awesome, Jquery-Ui, Fontello

/* FontAwesome */
echo Html::icon('github', [], 'fa fa-');

/* JQueryUI */
function juiIcon($icon) {
    return Html::icon($icon, [], 'ui-icon ui-icon-');
}

/* Fontello */
function fonIcon($icon) {
    return Html::icon($icon, [], 'fontello fontello-');
}

Generates a bootstrap label. The following parameters are supported by this method:

  • $content: string, the label content.

  • $type: string, the bootstrap label type - defaults to default. Should be one of bootstrap contextual colors i.e. default, primary, success, info, danger, warning.

  • $options: array, the HTML attributes / options for the label container.

  • $prefix: string, the CSS class prefix - defaults to label label-.

  • $tag: string, the HTML tag for rendering the label. Defaults to span.

Default     Primary     Success     Danger     Info     Warning

Heading New

echo Html::bsLabel('Default');
echo Html::bsLabel('Primary', Html::TYPE_PRIMARY);
echo Html::bsLabel('Success', Html::TYPE_SUCCESS);
echo Html::bsLabel('Danger', Html::TYPE_DANGER);
echo Html::bsLabel('Info', Html::TYPE_INFO);
echo Html::bsLabel('Warning', Html::TYPE_WARNING);
echo '<h3>Heading ' . Html::bsLabel('New') . '</h3>';

Easily highlight new or unread items by adding a <span class="badge">{content}</span> to links, Bootstrap navs, and more. The following parameters are supported by this method:

  • $content: string, the badge content.

  • $options: array, the HTML attributes / options for the label container.

  • $tag: string,the HTML tag for rendering the badge. Defaults to span.

15    
echo Html::badge('15');
echo Html::badge(Html::icon('leaf'));

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).

. The following parameters are supported by this method:

  • $title: string, the title heading to be shown.

  • $subTitle: string, the sub heading to be shown within the title heading.

  • $options: array, the HTML attributes / options for the page header container.

/**
 * @param string $title the title to be shown
 * @param string $subTitle the subtitle to be shown as subtext within the title
 * @param array $options html options for the page header
 */
echo Html::pageHeader('Heading', 'Sub Heading');

Generates a well container to give an element an inset effect. The following parameters are supported by this method:

  • $content: string, the content to be shown within the well container.

  • $size: string, the well container size. Should be one of the size modifier constants:

    • Html::SIZE_TINY or xs

    • Html::SIZE_SMALL or sm

    • Html::SIZE_MEDIUM or md

    • Html::SIZE_LARGE or lg

  • $options: array, the HTML attributes / options for the well container.

Look, I'm in a well!
echo Html::well("Look, I'm in a well!", Html::SIZE_TINY);

Generates a generic close icon button for dismissing content like modals and alerts. The following parameters are supported by this method:

  • $label: string, the close icon label - defaults to &times;.

  • $options: array, the HTML attributes / options for the close button.

  • $tag: string, the HTML tag for rendering the close button container. Defaults to button.

echo Html::closeButton();
echo Html::closeButton(Html::icon('remove-sign'));

Generates a bootstrap caret. The following parameters are supported by this method:

  • $direction: string, whether to display as up or down direction. Defaults to down.

  • $disabled: string, if the caret is to be displayed as disabled. Defaults to false.

  • $options: array, the HTML attributes / options for the caret container.

  • $tag: string, the HTML tag for rendering the caret container. Defaults to button.

Down Caret     Up Caret     Disabled Caret
echo 'Down Caret ' . Html::caret();
echo 'Up Caret ' . Html::caret('up');
echo 'Disabled Caret ' . Html::caret('down', true);

Generates a jumbotron - a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. The following parameters are supported by this method:

  • $content: string|array, the jumbotron content. If passed as a string, it will display the content directly as a raw content. If passed as an array, it accepts these keys:

    • heading: string, the jumbotron content title.

    • body: string, the jumbotron content body.

    • buttons: array, the configuration of buttons to be shown in the jumbotron. The following keys can be set:

      • label: string, the button label

      • icon: string, the icon to place before the label

      • url: string|array, the button url

      • type: string, one of the color modifier constants - defaults to self::TYPE_DEFAULT

      • size: string, one of the size modifier constants:

        • Html::SIZE_TINY or xs

        • Html::SIZE_SMALL or sm

        • Html::SIZE_MEDIUM or md

        • Html::SIZE_LARGE or lg

      • options: array, the button html options

  • $fullWidth: boolean, whether this is a full width jumbotron without any corners. Defaults to false.

  • $options: array, HTML attributes / options for the jumbotron

Hello, world

This is a simple jumbotron-style component for calling extra attention to featured content or information.

Hello, world!

This is a simple jumbotron-style component for calling extra attention to featured content or information.

Learn More Contact Us

/* Raw content passed */
echo Html::jumbotron(
    '<h1>Hello, world</h1>' .
    '<p>This is a simple jumbotron-style component for calling extra attention to featured content.</p>'
);
/* Configurable content passed */
echo Html::jumbotron([
    'heading' => 'Hello, world!', 
    'body' => 'This is a simple jumbotron-style component for calling extra attention to featured content.',
    'buttons' => [
        [
            'label' => 'Learn More',
            'icon' => 'book',
            'url' => '#',
            'type' => Html::TYPE_PRIMARY,
            'size' => Html::SIZE_LARGE
        ],
        [
             'label' => 'Contact Us',
             'icon' => 'phone',
             'url' => '#',
             'type' => Html::TYPE_DANGER,
             'size' => Html::SIZE_LARGE
        ]
    ]
]);

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover. The following parameters are supported by this method:

  • $content: string, the abbreviation content.

  • $title: string, the abbreviation title displayed on hover.

  • $initialism: boolean, if set to the true, will display a slightly smaller font-size. Defaults to false.

  • $options: array, the HTML attributes / options for the abbreviation container.

HTML is the best thing since sliced bread
HTML
echo Html::abbr('HTML', 'HyperText Markup Language')  . ' is the best thing since sliced bread';
echo Html::abbr('HTML', 'HyperText Markup Language', true);

Wrap <blockquote> around any HTML as the quote. For straight quotes, use a <p>. The following parameters are supported by this method:

  • $content: string, the blockquote content.

  • $citeContent: string, the content of the citation (optional) - this should typically include the wildtag {source} to embed the cite source.

  • $citeTitle: string, the cite source title (optional).

  • $citeSource: string, the cite source content (optional).

  • $options: array, the HTML attributes / options for the blockquote container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in IPL
echo Html::blockquote(
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.',
     'Someone famous in {source}',
     'International Premier League',
     'IPL'
);

Present contact information for the nearest ancestor or the entire body of work. The following parameters are supported by this method:

  • $name: string, the addressee name.

  • $lines: string, the lines of address information.

  • $phone: array, the the list of phone numbers - passed as $type => $value, where:

    • $type: string, is the phone type. For example: Res, Off, Cell, or Fax.

    • $value: string, is the phone number for the selected phone type.

  • $email: array, the list of email addresses - passed as $type => $value, where:

    • $type: string, is the email type. For example: Res or Off.

    • $value: string, is the email number for the selected email type.

  • $options: array, the HTML attributes / options for the address container (optional).

  • $phoneLabel: string, the prefix label for each phone - defaults to (P).

  • $emailLabel: string, the prefix label for each email - defaults to (E).

  • Twitter, Inc.
    795 Folsom Ave, Suite 600
    San Francisco, CA 94107
    (P) Res: (123) 456-7890
    (P) Off: (456) 789-0123
    (E) Res: first.last@example.com
    (E) Off: last.first@example.com
    echo Html::well(Html::address(
         'Twitter, Inc.',
         ['795 Folsom Ave, Suite 600', 'San Francisco, CA 94107'],
         ['Res' => '(123) 456-7890', 'Off'=> '(456) 789-0123'],
         ['Res' => 'first.last@example.com', 'Off' => 'last.first@example.com']
    ), Html::SIZE_TINY);

    Flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. The following parameters are supported by this method:

    • $items: array, the list group items. Each element in the array must contain these keys:

      • $content: string|array, the list group content. If passed as a string, it will display the content directly as a raw content. If passed as an array, it accepts these keys:

        • heading: string, the list group item heading.

        • body: string, the list group item body.

        • headingOptions: array, the HTML attributes / options for the list group item heading container.

        • bodyOptions: array, the HTML attributes / options for the list group body container.

      • url: string|array, he url for linking the list item content (optional).

      • badge: string, a badge component to be displayed for this list item (optional).

      • active: boolean, to highlight the item as active (applicable only if $url is passed). Defaults to false.

    • $options: array, the HTML attributes / options for the list group container (optional).

    • $tag: string, the HTML tag for rendering the list group container. Defaults to div.

    • $itemTag: string, the HTML tag for rendering each list group item. Defaults to div.

    echo Html::listGroup([
        [
            'content' => 'Cras justo odio',
            'url' => '#',
            'badge' => '14',
            'active' => true
        ],
        [
            'content' => 'Dapibus ac facilisis in',
            'url' => '#',
            'badge' => '2'
        ],
        [
            'content' => 'Morbi leo risus',
            'url' => '#',
            'badge' => '1'
        ],
    ]);
    echo Html::listGroup([
        [
            'content' => ['heading' => 'Heading 1', 'body' => 'Cras justo odio'],
            'url' => '#',
            'badge' => '14',
            'active' => true
        ],
        [
            'content' => ['heading' => 'Heading 2', 'body' => 'Dapibus ac facilisis in'],
            'url' => '#',
            'badge' => '2'
        ],
        [
            'content' => ['heading' => 'Heading 2', 'body' => 'Morbi leo risus'],
            'url' => '#',
            'badge' => '1'
        ],
    ]);

    Generates a panel for boxing content. The following parameters are supported by this method:

    • $content: array, the configuration of the panel content sections. The following properties are supported:

      • preHeading: string, the raw content that will be placed before heading (optional).

      • heading: string, the panel box heading (optional).

      • preBody: string, the raw content that will be placed before body (optional).

      • body: string, the panel body content - this will be wrapped in a container containing CSS class panel-body (optional).

      • postBody: string, the raw content that will be placed after body (optional).

      • footer: string, the panel box footer (optional).

      • postFooter: string, the raw content that will be placed after footer (optional).

      • headingTitle: boolean, whether to pre-style heading content with a panel-title CSS class. Defaults to true.

      • footerTitle: boolean, whether to pre-style footer content with a panel-title CSS class. Defaults to true.

    • $type: string, the panel type. One of the bootstrap color modifier constants listed below. Defaults to default.

      • Html::TYPE_DEFAULT or default

      • Html::TYPE_PRIMARY or primary

      • Html::TYPE_SUCCESS or success

      • Html::TYPE_INFO or info

      • Html::TYPE_WARNING or warning

      • Html::TYPE_DANGER or danger

    • $options: array, the HTML attributes / options for the panel container (optional).

    Panel Heading

    Panel Content

    Panel Heading

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    echo Html::panel(
        ['heading' => 'Panel Heading', 'body' => '<div class="panel-body">Panel Content</div>'],
        Html::TYPE_SUCCESS
    );
    echo Html::panel([
        'heading' => 'Panel Heading',
        'body' => '<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ' .
            'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>',
        'postBody' => Html::listGroup([
            [
                'content' => 'Cras justo odio',
                'url' => '#',
                'badge' => '14'
            ],
            [
                'content' => 'Dapibus ac facilisis in',
                'url' => '#',
                'badge' => '2'
            ],
            [
                'content' => 'Morbi leo risus',
                'url' => '#',
                'badge' => '1'
            ],
        ], [], 'ul', 'li'),
        'footer'=> 'Panel Footer',
        'headingTitle' => true,
        'footerTitle' => true,
    ]);

    Generates a media object. Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left-aligned or right-aligned image alongside textual content. The following parameters are supported by this method:

    • $heading: string, the media heading text.

    • $body: string, the media heading text.

    • $src: string|array, URL for the media article source.

    • $img: string|array, URL for the media image source.

    • $srcOptions: array, the HTML attributes / options for the media article link (optional).

    • $imgOptions: array, the HTML attributes / options for the media image (optional).

    • $headingOptions: array, the HTML attributes / options for the media heading (optional).

    • $bodyOptions: array, the HTML attributes / options for the media body (optional).

    • $options: array, the HTML attributes / options for the media object container (optional).

    • $tag: string, the HTML tag for rendering the media container. Defaults to div.

    Media heading 1

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
    echo Html::media(
        'Media heading 1', 
        'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.',
        '#',
        'http://placehold.it/64x64'
    );

    Generates list of media (useful for comment threads or articles lists). The following parameters are supported by this method:

    • $items: array, the media items configuration. The following properties can be set:

      • items: array, the media list sub items configuration. Similar in configuration to items.

      • heading: string, the media heading text.

      • body: string, the media heading text.

      • src: string|array, URL for the media article source.

      • img: string|array, URL for the media image source.

      • srcOptions: array, the HTML attributes / options for the media article link (optional).

      • imgOptions: array, the HTML attributes / options for the media image (optional).

      • $headingOptions: array, the HTML attributes / options for the media heading (optional).

      • $bodyOptions: array, the HTML attributes / options for the media body (optional).

      • options: array, the HTML attributes / options for the media item container (optional).

    • $options: array, the HTML attributes / options for the media list container (optional).

    • Media heading 1

      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

      Media heading 1.1

      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

      Media heading 1.2

      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    • Media heading 2

      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    $body = 'Cras sit amet nibh libero, in gravida nulla. '.
        'Nulla vel metus scelerisque ante sollicitudin commodo. '.
        'Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.',
    echo Html::mediaList([
        [
         'heading' => 'Media heading 1',
         'body' => $body,
         'src' => '#',
         'img' => 'http://placehold.it/64x64',
         'items' => [
             [
                 'heading' => 'Media heading 1.1',
                 'body' => $body,
                 'src' => '#',
                 'img' => 'http://placehold.it/64x64'
             ],
             [
                 'heading' => 'Media heading 1.2',
                 'body' => $body,
                 'src' => '#',
                 'img' => 'http://placehold.it/64x64'
             ],
         ]
        ],
     [
         'heading' => 'Media heading 2',
         'body' => $body,
         'src' => '#',
         'img' => 'http://placehold.it/64x64'
        ],
    ]);

    Generates a bootstrap checkbox button group. A checkbox button group allows multiple selection, like Html::listBox(). As a result, the corresponding submitted value is an array. Note that this requires yii\bootstrap\BootstrapPluginAsset to be registered in your view. The following parameters are supported by this method:

    • $name: string, the name attribute of each checkbox.

    • $selection: string|array, the selected value(s).

    • $items: array, the data item used to generate the checkboxes. The array keys are the checkbox values, while the array values are the corresponding labels.

    • $options: array, the HTML attributes / options for the checkbox list container. The following options are specially handled:

      • tag: string, the tag name of the container element.

      • unselect: string, the value that should be submitted when none of the checkboxes is selected. By setting this option, a hidden input will be generated.

      • encode: boolean, whether to HTML-encode the checkbox labels. Defaults to true. This option is ignored if `item` option is set.

      • separator: string, the HTML code that separates items.

      • itemOptions: array, the options for generating the checkbox tag using checkbox().

      • item: callable|Closure, a callback that can be used to customize the generation of the HTML code corresponding to a single item in $items. The signature of this callback must be:

        function ($index, $label, $name, $checked, $value)
        

        where $index is the zero-based index of the checkbox in the whole list; $label is the label for the checkbox; and $name, $value and $checked represent the name, value and the checked status of the checkbox input, respectively. See yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

    \yii\bootstrap\BootstrapPluginAsset::register($this);
    echo Html::checkboxButtonGroup('categories', [1, 3], [1=>'Category 1', 2=>'Category 2', 3=>'Category 3', 4=>'Category 4']);

    Generates a bootstrap radio button group. A radio button group is like a checkbox button group, except that it only allows single selection. Note that this requires yii\bootstrap\BootstrapPluginAsset to be registered in your view. The following parameters are supported by this method:

    • $name: string, the name attribute of each radio.

    • $selection: string, the selected value.

    • $items: array, the data item used to generate the radios. The array keys are the radio values, while the array values are the corresponding labels.

    • $options: array, the HTML attributes / options for the radio list container. The following options are specially handled:

      • tag: string, the tag name of the container element.

      • unselect: string, the value that should be submitted when none of the radios is selected. By setting this option, a hidden input will be generated.

      • encode: boolean, whether to HTML-encode the radio labels. Defaults to true. This option is ignored if `item` option is set.

      • separator: string, the HTML code that separates items.

      • itemOptions: array, the options for generating the radio tag using radio().

      • item: callable|Closure, a callback that can be used to customize the generation of the HTML code corresponding to a single item in $items. The signature of this callback must be:

        function ($index, $label, $name, $checked, $value)
        

        where $index is the zero-based index of the radio in the whole list; $label is the label for the radio; and $name, $value and $checked represent the name, value and the checked status of the radio input, respectively. See yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

    \yii\bootstrap\BootstrapPluginAsset::register($this);
    echo Html::radioButtonGroup('severity', 2, [1=>'Low', 2=>'Medium', 3=>'High']);

    Generates an active bootstrap checkbox button group for use with a model and attribute. A checkbox button group allows multiple selection, like Html::listBox(). As a result, the corresponding submitted value is an array. The selection of the checkbox button group is taken from the value of the model attribute. Note that this requires yii\bootstrap\BootstrapPluginAsset to be registered in your view. The following parameters are supported by this method:

    • $model: yii\base\Model, the model object.

    • $attribute: string, the attribute name or expression. See Html::getAttributeName() for the format about attribute expression.

    • $items: array, the data item used to generate the checkboxes. The array keys are the checkbox values, while the array values are the corresponding labels.

    • $options: array, the HTML attributes / options for the checkbox list container. The following options are specially handled:

      • tag: string, the tag name of the container element.

      • unselect: string, the value that should be submitted when none of the checkboxes is selected. By setting this option, a hidden input will be generated.

      • encode: boolean, whether to HTML-encode the checkbox labels. Defaults to true. This option is ignored if `item` option is set.

      • separator: string, the HTML code that separates items.

      • itemOptions: array, the options for generating the checkbox tag using checkbox().

      • item: callable|Closure, a callback that can be used to customize the generation of the HTML code corresponding to a single item in $items. The signature of this callback must be:

        function ($index, $label, $name, $checked, $value)
        

        where $index is the zero-based index of the checkbox in the whole list; $label is the label for the checkbox; and $name, $value and $checked represent the name, value and the checked status of the checkbox input, respectively. See yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

    \yii\bootstrap\BootstrapPluginAsset::register($this);
    $model->status = [1, 2];    
    echo Html::activeCheckboxButtonGroup($model, 'status', [1=>'Category 1', 2=>'Category 2', 3=>'Category 3', 4=>'Category 4']);

    Generates an active bootstrap radio button group for use with a model and attribute.A radio button group is like a checkbox button group, except that it only allows single selection. The selection of the radio button group is taken from the value of the model attribute. Note that this requires yii\bootstrap\BootstrapPluginAsset to be registered in your view. The following parameters are supported by this method:

    • $model: yii\base\Model, the model object.

    • $attribute: string, the attribute name or expression. See Html::getAttributeName() for the format about attribute expression.

    • $items: array, the data item used to generate the radios. The array keys are the radio values, while the array values are the corresponding labels.

    • $options: array, the HTML attributes / options for the radio list container. The following options are specially handled:

      • tag: string, the tag name of the container element.

      • unselect: string, the value that should be submitted when none of the radios is selected. By setting this option, a hidden input will be generated.

      • encode: boolean, whether to HTML-encode the radio labels. Defaults to true. This option is ignored if `item` option is set.

      • separator: string, the HTML code that separates items.

      • itemOptions: array, the options for generating the radio tag using radio().

      • item: callable|Closure, a callback that can be used to customize the generation of the HTML code corresponding to a single item in $items. The signature of this callback must be:

        function ($index, $label, $name, $checked, $value)
        

        where $index is the zero-based index of the radio in the whole list; $label is the label for the radio; and $name, $value and $checked represent the name, value and the checked status of the radio input, respectively. See yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

    \yii\bootstrap\BootstrapPluginAsset::register($this);
    $model->status_1 = 3;
    echo Html::activeCheckboxButtonGroup($model, 'status_1', [1=>'Low', 2=>'Medium', 3=>'High']);