twitter-bootstrapyii2yii-widgets

Render string in 'label' of Yii2 Bootstrap widget as HTML


I'm using Yii2's Bootsrap Tabs widget (yii\bootstrap\Tabs -- http://www.yiiframework.com/doc-2.0/yii-bootstrap-tabs.html)

I want to insert HTML tags as the value of the label key in the array that builds this widget.

I tried including the key => value pair of 'encode' => true as one of the optional array elements but that did nothing.

Here's my code:

<?=
Tabs::widget([
    'navType' => 'nav-pills',
    'options' => ['class' => 'course-manager'],
    'items' => [
        [
            'label' => '<i class="fa fa-book"></i>&nbsp;Show Books',
            'encode' => true,
            'content' => '<h2>Anim pariatur cliche...</h2>',
            'active' => true
        ],
        [
            'label' => '<i class="fa fa-graduation-cap"></i><span>&nbsp;Show Students</span>',
            'encode' => true,
            'content' => 'Anim cliche...',
        ],
        [
            'label' => '<i class="fa fa-tags"></i><span>&nbsp;Show Licenses</span>',
            'encode' => true,
            'url' => 'http://www.example.com',
        ],
    ],
]);
?>

Those labels are being displayed as text instead of HTML.


Solution

  • If you want that the html code is rendered you should use 'encodeLabels' => false,

    Tabs::widget([
      'navType' => 'nav-pills',
      'options' => ['class' => 'course-manager'],
      'encodeLabels' => false,
      'items' => [
        [
            'label' => '<i class="fa fa-book"></i>&nbsp;Show Books',
            'content' => '<h2>Anim pariatur cliche...</h2>',
            'active' => true
        ],