Class yii\bootstrap4\Tabs
| Inheritance | yii\ |
|---|---|
| Uses Traits | yii\ |
| Source Code | https://github.com/yiisoft/yii2-bootstrap4/blob/master/src/Tabs.php |
Tabs renders a Tab bootstrap javascript component.
For example:
echo Tabs::widget([
'items' => [
[
'label' => 'One',
'content' => 'Anim pariatur cliche...',
'active' => true
],
[
'label' => 'Two',
'content' => 'Anim pariatur cliche...',
'headerOptions' => [...],
'options' => ['id' => 'myveryownID'],
],
[
'label' => 'Example',
'url' => 'http://www.example.com',
],
[
'label' => 'Dropdown',
'items' => [
[
'label' => 'DropdownA',
'content' => 'DropdownA, Anim pariatur cliche...',
],
[
'label' => 'DropdownB',
'content' => 'DropdownB, Anim pariatur cliche...',
],
[
'label' => 'External Link',
'url' => 'http://www.example.com',
],
],
],
],
]);
See also:
Public Properties
| Property | Type | Description | Defined By |
|---|---|---|---|
| $clientEvents | array | The event handlers for the underlying Bootstrap JS plugin. | yii\ |
| $clientOptions | array | The options for the underlying Bootstrap JS plugin. | yii\ |
| $dropdownClass | string | Name of a class to use for rendering dropdowns withing this widget. | yii\ |
| $encodeLabels | boolean | Whether the labels for header items should be HTML-encoded. | yii\ |
| $headerOptions | array | List of HTML attributes for the header container tags. | yii\ |
| $itemOptions | array | List of HTML attributes for the item container tags. | yii\ |
| $items | array | List of tabs in the tabs widget. | yii\ |
| $linkOptions | array | List of HTML attributes for the tab header link tags. | yii\ |
| $navType | string | Specifies the Bootstrap tab styling. | yii\ |
| $options | array | The HTML attributes for the widget container tag. | yii\ |
| $renderTabContent | boolean | Whether to render the tab-content container and its content. |
yii\ |
| $tabContentOptions | array | List of HTML attributes for the tab-content container. |
yii\ |
Protected Properties
| Property | Type | Description | Defined By |
|---|---|---|---|
| $panes | array | Tab panes (contents) | yii\ |
Public Methods
| Method | Description | Defined By |
|---|---|---|
| getView() | yii\ |
|
| init() | Initializes the widget. | yii\ |
| renderPanes() | Renders tab panes. | yii\ |
| run() | yii\ |
Protected Methods
| Method | Description | Defined By |
|---|---|---|
| activateFirstVisibleTab() | Sets the first visible tab as active. | yii\ |
| hasActiveTab() | yii\ |
|
| prepareItems() | Renders tab items as specified on $items. | yii\ |
| registerClientEvents() | Registers JS event handlers that are listed in $clientEvents. | yii\ |
| registerPlugin() | Registers a specific Bootstrap plugin and the related events | yii\ |
Property Details
Name of a class to use for rendering dropdowns withing this widget. Defaults to yii\
Whether the labels for header items should be HTML-encoded.
List of HTML attributes for the header container tags. This will be overwritten by the "headerOptions" set in individual $items.
See also \
List of HTML attributes for the item container tags. This will be overwritten by the "options" set in individual $items. The following special options are recognized:
- tag: string, defaults to "div", the tag name of the item container tags.
See also \
List of tabs in the tabs widget. Each array element represents a single tab with the following structure:
- label: string, required, the tab header label.
- encode: bool, optional, whether this label should be HTML-encoded. This param will override
global
$this->encodeLabelsparam. - headerOptions: array, optional, the HTML attributes of the tab header.
- linkOptions: array, optional, the HTML attributes of the tab header link tags.
- content: string, optional, the content (HTML) of the tab pane.
- url: string, optional, an external URL. When this is specified, clicking on this tab will bring the browser to this URL. This option is available since version 2.0.4.
- options: array, optional, the HTML attributes of the tab pane container.
- active: bool, optional, whether this item tab header and pane should be active. If no item is marked as 'active' explicitly - the first one will be activated.
- visible: bool, optional, whether the item tab header and pane should be visible or not. Defaults to true.
- disabled: bool, optional, whether the item tab header and pane should be disabled or not. Defaults to false.
- items: array, optional, can be used instead of
contentto specify a dropdown items configuration array. Each item can hold three extra keys, besides the above ones:- active: bool, optional, whether the item tab header and pane should be visible or not.
- content: string, required if
itemsis not set. The content (HTML) of the tab pane. - options: optional, array, the HTML attributes of the tab content container.
List of HTML attributes for the tab header link tags. This will be overwritten by the "linkOptions" set in individual $items.
See also \
Whether to render the tab-content container and its content. You may set this property
to be false so that you can manually render tab-content yourself in case your tab contents are complex.
List of HTML attributes for the tab-content container. This will always contain the CSS class tab-content.
See also \
Method Details
Sets the first visible tab as active.
This method activates the first tab that is visible and
not explicitly set to inactive ('active' => false).
| protected mixed activateFirstVisibleTab ( ) |
protected function activateFirstVisibleTab()
{
foreach ($this->items as $i => $item) {
$active = ArrayHelper::getValue($item, 'active', null);
$visible = ArrayHelper::getValue($item, 'visible', true);
$disabled = ArrayHelper::getValue($item, 'disabled', false);
if ($visible && $active !== false && $disabled !== true) {
$this->items[$i]['active'] = true;
return;
}
}
}
| public abstract \ | ||
| return | \ |
The view object that can be used to render views or view files. |
|---|---|---|
abstract function getView();
| protected boolean hasActiveTab ( ) | ||
| return | boolean |
If there's active tab defined |
|---|---|---|
protected function hasActiveTab()
{
foreach ($this->items as $item) {
if (isset($item['active']) && $item['active'] === true) {
return true;
}
}
return false;
}
Initializes the widget.
This method will register the bootstrap asset bundle. If you override this method, make sure you call the parent implementation first.
| public mixed init ( ) |
public function init()
{
parent::init();
Html::addCssClass($this->options, ['widget' => 'nav', $this->navType]);
Html::addCssClass($this->tabContentOptions, ['panel' => 'tab-content']);
}
Renders tab items as specified on $items.
| protected mixed prepareItems ( array &$items, string $prefix = '' ) | ||
| $items | array | |
| $prefix | string | |
| throws | \ |
|
|---|---|---|
protected function prepareItems(&$items, $prefix = '')
{
if (!$this->hasActiveTab()) {
$this->activateFirstVisibleTab();
}
foreach ($items as $n => $item) {
$options = array_merge($this->itemOptions, ArrayHelper::getValue($item, 'options', []));
$options['id'] = ArrayHelper::getValue($options, 'id', $this->options['id'] . $prefix . '-tab' . $n);
unset($items[$n]['options']['id']); // @see https://github.com/yiisoft/yii2-bootstrap4/issues/108#issuecomment-465219339
if (!ArrayHelper::remove($item, 'visible', true)) {
continue;
}
if (!array_key_exists('label', $item)) {
throw new InvalidConfigException("The 'label' option is required.");
}
$selected = ArrayHelper::getValue($item, 'active', false);
$disabled = ArrayHelper::getValue($item, 'disabled', false);
$headerOptions = ArrayHelper::getValue($item, 'headerOptions', $this->headerOptions);
if (isset($item['items'])) {
$this->prepareItems($items[$n]['items'], '-dd' . $n);
continue;
} else {
ArrayHelper::setValue($items[$n], 'options', $headerOptions);
if (!isset($item['url'])) {
ArrayHelper::setValue($items[$n], 'url', '#' . $options['id']);
ArrayHelper::setValue($items[$n], 'linkOptions.data.toggle', 'tab');
ArrayHelper::setValue($items[$n], 'linkOptions.role', 'tab');
ArrayHelper::setValue($items[$n], 'linkOptions.aria-controls', $options['id']);
if (!$disabled) {
ArrayHelper::setValue($items[$n], 'linkOptions.aria-selected', $selected ? 'true' : 'false');
}
} else {
continue;
}
}
Html::addCssClass($options, ['widget' => 'tab-pane']);
if ($selected) {
Html::addCssClass($options, ['activate' => 'active']);
}
if ($this->renderTabContent) {
$tag = ArrayHelper::remove($options, 'tag', 'div');
$this->panes[] = Html::tag($tag, isset($item['content']) ? $item['content'] : '', $options);
}
}
}
Defined in:
yii\
Registers JS event handlers that are listed in $clientEvents.
| protected mixed registerClientEvents ( ) |
protected function registerClientEvents()
{
if (!empty($this->clientEvents)) {
$id = $this->options['id'];
$js = [];
foreach ($this->clientEvents as $event => $handler) {
$js[] = "jQuery('#$id').on('$event', $handler);";
}
$this->getView()->registerJs(implode("\n" , $js));
}
}
Defined in:
yii\
Registers a specific Bootstrap plugin and the related events
| protected mixed registerPlugin ( string $name ) | ||
| $name | string |
The name of the Bootstrap plugin |
protected function registerPlugin($name)
{
$view = $this->getView();
BootstrapPluginAsset::register($view);
$id = $this->options['id'];
if ($this->clientOptions !== false) {
$options = empty($this->clientOptions) ? '' : Json::htmlEncode($this->clientOptions);
$js = "jQuery('#$id').$name($options);";
$view->registerJs($js);
}
$this->registerClientEvents();
}
Renders tab panes.
| public string renderPanes ( array $panes ) | ||
| $panes | array | |
| return | string |
The rendering result. |
|---|---|---|
public function renderPanes($panes)
{
return $this->renderTabContent ? "\n" . Html::tag('div', implode("\n" , $panes), $this->tabContentOptions) : '';
}
| public run ( ) | ||
| throws | \ |
|
|---|---|---|
| throws | Exception | |
public function run()
{
$this->registerPlugin('tab');
$this->prepareItems($this->items);
return Nav::widget([
'dropdownClass' => $this->dropdownClass,
'options' => ArrayHelper::merge(['role' => 'tablist'], $this->options),
'items' => $this->items,
'encodeLabels' => $this->encodeLabels,
]) . $this->renderPanes($this->panes);
}