New! TypeRocket v5 is now available. See docs.
Access all of Typerocket. Get Pro.
Tabs
( v4 )
- # Tab Icons
- # Tab Callback
- # Tab For Repeaters
- # Meta box tabs
- # Main content tabs
- # Main content box tabs
- # Sidebars
If you use the theme options plugin you will notice that there is a tabbed layout. You can create tabbed layouts with TypeRocket using the tr_tabs()
function.
This function creates an instance of TypeRocket\Tabs
so you can easily create tabbed layouts.
$tabs = tr_tabs();
$tabContentOne = "<p>Main content 1.</p>";
$tabContentTwo = "<p>Main content 2.</p>";
$tabs->addTab('Tab 1', $tabContentOne);
$tabs->addTab('Tab 2', $tabContentTwo);
$tabs->render();
Tab Icons
Since version 3.0.16 you can now add an icon to tabs by passing a third option.
-
$icon
takes astring
of the name of an icon from the Icons system.
$tabs->addTab('Tab 1', $tabContentOne, 'cog');
Tab Callback
Since version 3.0.24 you can now use a call back for the content of a tab instead of a string. To do this pass a callback as the second option instead of a string.
$about = function() use ($form) {
echo $form->text('Company Name');
echo $form->text('Company Email');
echo $form->text('Company Phone');
echo $form->search('Terms Page')->setPostType('page');
echo $form->checkbox('Company Open')->setText('Company open for business')->setLabel(false);
};
tr_tabs()->addTab( 'About', $about )->render();
Tab For Repeaters
Since version 3.0.24 you can now add tabs to repeaters. To do tabs to repeater fields use the setTabFields($name, $fields)
method.
-
$name
takes astring
of the name of the tabs to place the fields. -
$fields
takes anarray
of fields.
$links = [
tr_tabs()->setForm($form)->bindCallbacks()
->addTab('Date')
->setTabFields('Date', [$this->form->date('Date')])
->addTab('Info')
->setTabFields('Info', [$this->form->text('Info')])
];
echo $form->repeater('Example')->setFields($links);
Meta box tabs
When tabs are added to a meta box they will have this style.
Main content tabs
When tabs are added in the main content area of the admin they will have this style.
Main content box tabs
When you set the render mode to box
tabs will have this style.
$tabs->render( 'box' );
Sidebars
You can add a sidebar to main content tabs using the setSidebar()
method.
$tabs = tr_tabs();
$sidebar = "<p>Sidebar content.</p>";
$tabs->setSidebar( $sidebar );
$tabContentOne = "<p>Main content 1.</p>";
$tabContentTwo = "<p>Main content 2.</p>";
$tabs->addTab('Tab 1', $tabContentOne);
$tabs->addTab('Tab 2', $tabContentTwo);
$tabs->render('box');
Found a typo? Something is wrong in this documentation? Fork and edit it!