Bootstrap 4 Tabs rendering

[Drugpunker]

Всем здравствуйте.
Не работает yii\bootstrap4\Tabs виджет должным образом.
Сами вкладки кликабельны, проблем нет.
Но контент не отображается.

Код: Выделить всё

<div class="tab-content"></div>

На 3-м бутстрэпе всё отлично.

Подскажите пжл, что не указал в свойствах.

Код: Выделить всё

echo Tabs::widget([
    'items' => [
        [
            'label' => 'item_1',
            'linkOptions' => [
                'href' => '#item_1'
            ],
            'options' => [
                'id' => 'item_1'
            ],
            'url' => ['/item_1/'],
            'content' => $this->render('/item_1/'),
        ],
        [
            'label' => 'item_2',
            'linkOptions' => [
                'href' => '#item_2'
            ],
            'options' => [
                'id' => 'item_2'
            ],
            'url' => ['/item_2/'],
            'content' => $this->render('item_2'),
        ],
    ]
]);

[unknownby]

А если попробовать вынести информацию, которая в отдельных файлах в блоки?

Код: Выделить всё

<?php $this->beginBlock('first'); ?>

        <p>Первый блок</p>

    <?php $this->endBlock(); ?>
    
    <?php $this->beginBlock('second'); ?>

        <p>Второй блок</p>

    <?php $this->endBlock(); ?>
    
    <?= Tabs::widget([
    'items' => [
        [
            'label' => 'item_1',
            'content' => $this->blocks['first'],
        ],
        [
            'label' => 'item_2',
            'content' => $this->blocks['second'],
        ],
    ]
]); ?>
    

[Drugpunker]

А если попробовать вынести информацию, которая в отдельных файлах в блоки?

Код: Выделить всё

<?php $this->beginBlock('first'); ?>

        <p>Первый блок</p>

    <?php $this->endBlock(); ?>
    
    <?php $this->beginBlock('second'); ?>

        <p>Второй блок</p>

    <?php $this->endBlock(); ?>
    
    <?= Tabs::widget([
    'items' => [
        [
            'label' => 'item_1',
            'content' => $this->blocks['first'],
        ],
        [
            'label' => 'item_2',
            'content' => $this->blocks['second'],
        ],
    ]
]); ?>
    

А зачем?
Подозрение на неправильную работу рендера?
Он отрабатывает.
Блок таб-контента не формируется, в который результат рендеринга попадать должен.

[unknownby]

А зачем?

Для того, чтобы проверить минимальный набор табуляра и что в нем действительно отображается информация из представления.

[Drugpunker]

А зачем?

Для того, чтобы проверить минимальный набор табуляра и что в нем действительно отображается информация из представления.

Добавил как посоветовал.

Код: Выделить всё

$this->beginBlock('first');
\yii\helpers\Html::tag('div','Первый блок');
$this->endBlock();

$this->beginBlock('second');
\yii\helpers\Html::tag('div','Второй блок');
$this->endBlock();

echo Tabs::widget([
    'items' => [
        [
            'label' => 'item_1',
            'content' => $this->blocks['first'],
        ],
        [
            'label' => 'item_2',
            'content' => $this->blocks['second'],
        ],
    ]
]);

Ссылки кликабельны, но контент по-прежнему не отображается.

Хотя на выходе появились табы.

Код: Выделить всё

<div class="tab-content">
<div id="w0-tab0" class="tab-pane active"></div>
<div id="w0-tab1" class="tab-pane"></div>
</div>

[Prooksius]

нужный бутстрап-css подключен?

[unknownby]

Опередил Prooksius

Подключены? Asset-ы нужные, как для bs-3

Код: Выделить всё

'yii\bootstrap\BootstrapPluginAsset',

[Drugpunker]

нужный бутстрап-css подключен?

Угу.

yii\bootstrap4\BootstrapAsset
sourcePath www/vendor/npm-asset/bootstrap/dist
basePath www\frontend\web\assets\811ae3b7
baseUrl /assets/811ae3b7
css
css/bootstrap.css

[Drugpunker]

Опередил Prooksius

Подключены? Asset-ы нужные, как для bs-3

Код: Выделить всё

'yii\bootstrap\BootstrapPluginAsset',

Да.

yii\bootstrap4\BootstrapPluginAsset
sourcePath \www/vendor/npm-asset/bootstrap/dist
basePath \www\frontend\web\assets\811ae3b7
baseUrl /assets/811ae3b7
js
js/bootstrap.bundle.js
depends
yii\web\JqueryAsset
yii\bootstrap4\BootstrapAsset

[Drugpunker]

А если попробовать вынести информацию, которая в отдельных файлах в блоки?

Код: Выделить всё

<?php $this->beginBlock('first'); ?>

        <p>Первый блок</p>

    <?php $this->endBlock(); ?>
    
    <?php $this->beginBlock('second'); ?>

        <p>Второй блок</p>

    <?php $this->endBlock(); ?>
    
    <?= Tabs::widget([
    'items' => [
        [
            'label' => 'item_1',
            'content' => $this->blocks['first'],
        ],
        [
            'label' => 'item_2',
            'content' => $this->blocks['second'],
        ],
    ]
]); ?>
    

Заменил рендеринг блоков на текст.
Заработало.

Код: Выделить всё

echo Tabs::widget([
    'items' => [
        [
            'label' => 'item_1',
            'content' => "Первый блок"//$this->blocks['first'],
        ],
        [
            'label' => 'item_2',
            'content' => "Второй блок"//$this->blocks['second'],
        ],
    ]
]);

Почему не тянет из другого места? Уже голову сломал всю.

[unknownby]

По сути должно работать, если всё подключено.
Можно очистить ассэты и кэш почистить. Может помочь, но не факт

[Drugpunker]

По сути должно работать, если всё подключено.
Можно очистить ассэты и кэш почистить. Может помочь, но не факт

Заметил собственную ошибку в варианте с блоками.
Выводил содержимое в них без echo.

Вобщем, с блоками работает.

Код: Выделить всё

$this->beginBlock('1st');
echo \yii\helpers\Html::tag('div','Первый блок');
$this->endBlock();

$this->beginBlock('2nd');
echo \yii\helpers\Html::tag('div','Второй блок');
$this->endBlock();

echo Tabs::widget([
    'items' => [
        [
            'label' => 'item_1',
            'content' => $this->blocks['1st'],
            'options' => ['id' => 'first'],
        ],
        [
            'label' => 'item_2',
            'content' => $this->blocks['2nd'],
            'options' => ['id' => 'second'],
        ],
    ]
]);

Но почему не работает мой вариант...

[Prooksius]

Вообще, конечно, бутстрап на фронте - это прошлый век. Я его только на бэке использую. Там реально удобно с ним, а вот на фронте нет. Все на него жалуются, тормозит сильно, особенно на всяких девайсах.

[Drugpunker]

Вообще, конечно, бутстрап на фронте - это прошлый век. Я его только на бэке использую. Там реально удобно с ним, а вот на фронте нет. Все на него жалуются, тормозит сильно, особенно на всяких девайсах.

Да, вот загорелся сделать только на v.4.

[Drugpunker]

Короче поборол проблему.
Заключалась она в

Код: Выделить всё

'url' => ['/item_1/'],

Пришлось убрать и полностью всё пересмотреть.
Обернул в Pjax.
Теперь всё работает.
Правда, теперь приходится вызывать действия контроллера, ответственные за рендеринг конкретного контента в каждой вкладке.:

Код: Выделить всё

[
            'label' => 'item_1',
            'linkOptions' => ['href' => '/item_1/'],
            'options' => ['id' => 'item_1'],
            'content' => Yii::$app->runAction('controller/item_1'),
        ],

Не смог придумать как изящнее реализовать.

[Dominus]

widgets или traits?

[Drugpunker]

widgets или traits?

Не совсем понятны трэйты. Спасибо, поизучаю. Но предварительно вижу, что они не про сюда.
А виджеты и так используются.
Табы нужны для личного кабинета юзера. В каждой вкладке отдельный виджет.
А вот подтягивать туда данные красиво я как раз и не придумал.
Одним экшеном передавать все провайдеры данных для всех виджетов тоже как-то фу.

[Dominus]

Ну можете глянуть как организовано тут
https://github.com/Dominus77/yii2-advanced-start/tree/master/modules/users/views/frontend/profile
а конкретнее тут, реализован один вид без дубликата кода
https://github.com/Dominus77/yii2-advanced-start/blob/master/modules/users/views/frontend/profile/update.php
ЛК как в админке так и на фронте