Class yii\bootstrap4\Accordion

All Classes | Properties | Methods

Inheritance	yii\bootstrap4\Accordion » yii\bootstrap4\Widget » yii\base\Widget
Uses Traits	yii\bootstrap4\BootstrapWidgetTrait
Source Code	https://github.com/yiisoft/yii2-bootstrap4/blob/master/src/Accordion.php

Accordion renders an accordion bootstrap javascript component.

For example:

echo Accordion::widget([
    'items' => [
        // equivalent to the above
        [
            'label' => 'Collapsible Group Item #1',
            'content' => 'Anim pariatur cliche...',
            // open its content by default
            'contentOptions' => ['class' => 'in']
        ],
        // another group item
        [
            'label' => 'Collapsible Group Item #1',
            'content' => 'Anim pariatur cliche...',
            'contentOptions' => [...],
            'options' => [...],
            'expand' => true,
        ],
        // if you want to swap out .card-block with .list-group, you may use the following
        [
            'label' => 'Collapsible Group Item #1',
            'content' => [
                'Anim pariatur cliche...',
                'Anim pariatur cliche...'
            ],
            'contentOptions' => [...],
            'options' => [...],
            'footer' => 'Footer' // the footer label in list-group
        ],
    ]
]);

Public Properties

Hide inherited properties

Property	Type	Description	Defined By
$autoCloseItems	boolean	Whether to close other items if an item is opened.	yii\bootstrap4\Accordion
$clientEvents	array	The event handlers for the underlying Bootstrap JS plugin.	yii\bootstrap4\BootstrapWidgetTrait
$clientOptions	array	The options for the underlying Bootstrap JS plugin.	yii\bootstrap4\BootstrapWidgetTrait
$encodeLabels	boolean	Whether the labels for header items should be HTML-encoded.	yii\bootstrap4\Accordion
$itemToggleOptions	array	The HTML options for the item toggle tag.	yii\bootstrap4\Accordion
$items	array	List of groups in the collapse widget.	yii\bootstrap4\Accordion
$options	array	The HTML attributes for the widget container tag.	yii\bootstrap4\Widget

Public Methods

Hide inherited methods

Method	Description	Defined By
getView()		yii\bootstrap4\BootstrapWidgetTrait
init()	Initializes the widget.	yii\bootstrap4\BootstrapWidgetTrait
renderItem()	Renders a single collapsible item group	yii\bootstrap4\Accordion
renderItems()	Renders collapsible items as specified on $items.	yii\bootstrap4\Accordion
run()		yii\bootstrap4\Accordion

Protected Methods

Hide inherited methods

Method	Description	Defined By
registerClientEvents()	Registers JS event handlers that are listed in $clientEvents.	yii\bootstrap4\BootstrapWidgetTrait
registerPlugin()	Registers a specific Bootstrap plugin and the related events	yii\bootstrap4\BootstrapWidgetTrait

Property Details

Hide inherited properties

$autoCloseItems public property

Whether to close other items if an item is opened. Defaults to true which causes an accordion effect. Set this to false to allow keeping multiple items open at once.

public boolean $autoCloseItems = true

$encodeLabels public property

Whether the labels for header items should be HTML-encoded.

public boolean $encodeLabels = true

$itemToggleOptions public property

The HTML options for the item toggle tag. Key 'tag' might be used here for the tag name specification. For example:

[
    'tag' => 'div',
    'class' => 'custom-toggle',
]

public array $itemToggleOptions = []

$items public property

List of groups in the collapse widget. Each array element represents a single group with the following structure:

label: string, required, the group header label.
encode: bool, optional, whether this label should be HTML-encoded. This param will override global $this->encodeLabels param.
content: array|string|object, required, the content (HTML) of the group
options: array, optional, the HTML attributes of the group
contentOptions: optional, the HTML attributes of the group's content

Since version 2.0.7 you may also specify this property as key-value pairs, where the key refers to the label and the value refers to content. If value is a string it is interpreted as label. If it is an array, it is interpreted as explained above.

For example:

echo Accordion::widget([
    'items' => [
      'Introduction' => 'This is the first collapsable menu',
      'Second panel' => [
          'content' => 'This is the second collapsable menu',
      ],
      [
          'label' => 'Third panel',
          'content' => 'This is the third collapsable menu',
      ],
  ]
])

public array $items = []

Method Details

Hide inherited methods

getView() public abstract method

Defined in: yii\bootstrap4\BootstrapWidgetTrait::getView()

See also \yii\base\Widget::getView().

public abstract \yii\web\View getView ( )
return	\yii\web\View	The view object that can be used to render views or view files.

Source code

                abstract function getView();

init() public method

Defined in: yii\bootstrap4\BootstrapWidgetTrait::init()

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 void init ( )

Source code

                public function init()
{
    parent::init();
    if (!isset($this->options['id'])) {
        $this->options['id'] = $this->getId();
    }
}

registerClientEvents() protected method

Defined in: yii\bootstrap4\BootstrapWidgetTrait::registerClientEvents()

Registers JS event handlers that are listed in $clientEvents.

protected void registerClientEvents ( )

Source code

                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));
    }
}

registerPlugin() protected method

Defined in: yii\bootstrap4\BootstrapWidgetTrait::registerPlugin()

Registers a specific Bootstrap plugin and the related events

protected void registerPlugin ( $name )
$name	string	The name of the Bootstrap plugin

Source code

                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();
}

renderItem() public method

Renders a single collapsible item group

public string renderItem ( $header, $item, $index )
$header	string	A label of the item group $items
$item	array	A single item from $items
$index	integer	The item index as each item group content must have an id
return	string	The rendering result
throws	\yii\base\InvalidConfigException
throws	Exception

Source code

                public function renderItem($header, $item, $index)
{
    if (array_key_exists('content', $item)) {
        $id = $this->options['id'] . '-collapse' . $index;
        $expand = ArrayHelper::remove($item, 'expand', false);
        $options = ArrayHelper::getValue($item, 'contentOptions', []);
        $options['id'] = $id;
        Html::addCssClass($options, ['widget' => 'collapse']);
        // check if accordion expanded, if true add show class
        if ($expand) {
            Html::addCssClass($options, ['visibility' => 'show']);
        }
        if (!isset($options['aria-label'], $options['aria-labelledby'])) {
            $options['aria-labelledby'] = $options['id'] . '-heading';
        }
        $encodeLabel = isset($item['encode']) ? $item['encode'] : $this->encodeLabels;
        if ($encodeLabel) {
            $header = Html::encode($header);
        }
        $itemToggleOptions = array_merge([
            'tag' => 'button',
            'type' => 'button',
            'data-toggle' => 'collapse',
            'data-target' => '#' . $options['id'],
            'aria-expanded' => $expand ? 'true' : 'false',
            'aria-controls' => $options['id']
        ], $this->itemToggleOptions);
        $itemToggleTag = ArrayHelper::remove($itemToggleOptions, 'tag', 'button');
        if ($itemToggleTag === 'a') {
            ArrayHelper::remove($itemToggleOptions, 'data-target');
            $headerToggle = Html::a($header, '#' . $id, $itemToggleOptions) . "\n";
        } else {
            Html::addCssClass($itemToggleOptions, ['feature' => 'btn-link']);
            $headerToggle = Button::widget([
                    'label' => $header,
                    'encodeLabel' => false,
                    'options' => $itemToggleOptions
                ]) . "\n";
        }
        $header = Html::tag('h5', $headerToggle, ['class' => 'mb-0']);
        if (is_string($item['content']) || is_numeric($item['content']) || is_object($item['content'])) {
            $content = Html::tag('div', $item['content'], ['class' => 'card-body']) . "\n";
        } elseif (is_array($item['content'])) {
            $content = Html::ul($item['content'], [
                    'class' => 'list-group',
                    'itemOptions' => [
                        'class' => 'list-group-item'
                    ],
                    'encode' => false,
                ]) . "\n";
        } else {
            throw new InvalidConfigException('The "content" option should be a string, array or object.');
        }
    } else {
        throw new InvalidConfigException('The "content" option is required.');
    }
    $group = [];
    if ($this->autoCloseItems) {
        $options['data-parent'] = '#' . $this->options['id'];
    }
    $group[] = Html::tag('div', $header, ['class' => 'card-header', 'id' => $options['id'] . '-heading']);
    $group[] = Html::beginTag('div', $options);
    $group[] = $content;
    if (isset($item['footer'])) {
        $group[] = Html::tag('div', $item['footer'], ['class' => 'card-footer']);
    }
    $group[] = Html::endTag('div');
    return implode("\n", $group);
}

renderItems() public method

Renders collapsible items as specified on $items.

public string renderItems ( )
return	string	The rendering result
throws	\yii\base\InvalidConfigException	if label isn't specified

Source code

                public function renderItems()
{
    $items = [];
    $index = 0;
    $expanded = array_search(true, ArrayHelper::getColumn(ArrayHelper::toArray($this->items), 'expand', true));
    foreach ($this->items as $key => $item) {
        if (!is_array($item)) {
            $item = ['content' => $item];
        }
        // BC compatibility: expand first item if none is expanded
        if ($expanded === false && $index === 0) {
            $item['expand'] = true;
        }
        if (!array_key_exists('label', $item)) {
            if (is_int($key)) {
                throw new InvalidConfigException("The 'label' option is required.");
            } else {
                $item['label'] = $key;
            }
        }
        $header = ArrayHelper::remove($item, 'label');
        $options = ArrayHelper::getValue($item, 'options', []);
        Html::addCssClass($options, ['panel' => 'card']);
        $items[] = Html::tag('div', $this->renderItem($header, $item, $index++), $options);
    }
    return implode("\n", $items);
}

run() public method

public void run ( )
throws	\yii\base\InvalidConfigException

Source code

                public function run()
{
    $this->registerPlugin('collapse');
    Html::addCssClass($this->options, ['widget' => 'accordion']);
    return implode("\n", [
            Html::beginTag('div', $this->options),
            $this->renderItems(),
            Html::endTag('div')
        ]) . "\n";
}