How To Create Different Tab In A View Of A Module Yii2

Hi to all,

I’m trying to develop a module for Yii2 for advanced management of articles that you can find

in the initial phase on GitHub: Yii2 Articles (cinghie/yii2-articles).

Using Gii, I have set up the necessary files for development in order to have a base ready to work.

Using Yii2 Widgets(On GitHub kartik-v/yii2-widgets), I made the first interface for entering

a category of an item with a set of parameters which I think important.

You can watch an screenshot preview attached.

What I want to do now is to divide the page into several TAB grouped by type in order to be more clean and userfriendly. For example, insert a Tab Picture, a Video Tab, Tab SEO and so on.

I have seen on Yii2 Documentation that I can use the widget Yii JUI TABS like this:


echo Tabs::widget([

    'items' => [

        [

            'label' => 'Tab one',

            'content' => 'Mauris mauris ante, blandit et, ultrices a, suscipit eget...',

        ],

        [

            'label' => 'Tab two',

            'content' => 'Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus...',

            'options' => ['tag' => 'div'],

            'headerOptions' => ['class' => 'my-class'],

        ],

        [

            'label' => 'Tab with custom id',

            'content' => 'Morbi tincidunt, dui sit amet facilisis feugiat...',

            'options' => ['id' => 'my-tab'],

        ],

        [

            'label' => 'Ajax tab',

            'url' => ['ajax/content'],

        ],

    ),

    'options' => ['tag' => 'div'],

    'itemOptions' => ['tag' => 'div'],

    'headerOptions' => ['class' => 'my-class'],

    'clientOptions' => ['collapsible' => false],

]);

It’s correctly displayed TAB but the inputs are textual, instead I would need to insert the code inside the tab with widgets etc …

How can I create different tab in a view of a module Yii2, and inserts widgets or a view or something like?

Since you are using my widgets, you should be also using Bootstrap 3 assets. Why not use the Bootstrap 3 Togglable Tabs component then instead of Jui Tabs? This enables you to group (show/hide) your fields into different tab sections in the same view file (without needing separate actions for each tab).

Hi kartik-v,

you’re right, I had not thought of this solution.

thank you very much for the answer

Thank Kartik-v for the tip.