Bootstrap-виджеты из коробки в любимом-родном Yii2 очень облегчают жизнь и решают множество проблем. Сегодня расскажу о виджете Tabs, который, как понятно из названия, позволяет вывести контент табами.

Итак, все, как всегда, крайне просто.

Добавляем секцию use:

use yii\bootstrap\Tabs

Далее, выводим сам виджет:

echo Tabs::widget([
    'items' => [
        [
            'label' => 'Заголовок вкладки 1',
            'content' => 'Вкладка 1',
            'active' => true // указывает на активность вкладки
        ],
        [
            'label' => 'Заголовок вкладки 2',
            'content' => 'Вкладка 2'
        ],
        [
            'label' => 'Заголовок вкладки 3',
            'content' => 'Вкладка 3',
            'headerOptions' => [
                'id' => 'someId'
            ]
        ],
        [
            'label' => 'Таб с указанием URL',
            'url' => 'http://www.somesite.com',
        ],
        [
            'label' => 'Dropdown',
            'items' => [
                [
                    'label' => '1',
                    'content' => 'Выпадашка 1'
                ],
                [
                    'label' => '2',
                    'content' => 'Выпадашка 2'
                ],
                [
                    'label' => '3',
                    'content' => 'Выпадашка 3'
                ],
            ]
        ]
    ]
]);

В приведенном примере я вкратце описал возможности виджета. Как всегда, в исходниках есть развернутые описания всех вариантов использования — но, в большинстве случаев табы используются именно для разделения текста, поэтому приведенного примера будет более чем достаточно.

Единственное, хочу отметить возможность и удобство использования метода render при указании контента вкладки. Например, так:

Tabs::widget([
    'items' => [
        [
            'label'     =>  'Инфо',
            'content'   =>  $this->render('parts/_info', ['model' => $model]),
            'active'    =>  true
        ],
        [
            'label'     => 'Заказы',
            'content'   =>  $this->render('parts/_orders', ['orders' => $orders])
        ]
    ]
]);

Таким образом можно аккуратно разделить все вьюшки и сделать код намного более понятным.