Class yii\bootstrap5\Offcanvas

All Classes | Properties | Methods | Constants
Inheritanceyii\bootstrap5\Offcanvas » yii\bootstrap5\Widget » yii\base\Widget
Uses Traitsyii\bootstrap5\BootstrapWidgetTrait
Source Code https://github.com/yiisoft/yii2-bootstrap5/blob/master/src/Offcanvas.php

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and data attributes are used to invoke the required JavaScript.

The following example will show the content enclosed the begin() and end() calls within the offcancas container:

Offcanvas::begin([
    'placement' => Offcanvas::PLACEMENT_END,
    'backdrop' => true,
    'scrolling' => true
]);

Nav::widget([...]);

Offcanvas::end();

See also https://getbootstrap.com/docs/5.1/components/offcanvas/.

Public Properties

Hide inherited properties

Property Type Description Defined By
$backdrop boolean Whether to enable backdrop or not. yii\bootstrap5\Offcanvas
$bodyOptions array Additional body options. yii\bootstrap5\Offcanvas
$clientEvents array The event handlers for the underlying Bootstrap JS plugin. yii\bootstrap5\BootstrapWidgetTrait
$clientOptions array|false The options for the underlying Bootstrap JS plugin/component. yii\bootstrap5\BootstrapWidgetTrait
$closeButton array|false The options for rendering the close button tag. yii\bootstrap5\Offcanvas
$headerOptions array Additional header options. yii\bootstrap5\Offcanvas
$options array The HTML attributes for the widget container tag. yii\bootstrap5\Widget
$placement string Where to place the offcanvas. yii\bootstrap5\Offcanvas
$scrolling boolean Whether to enable body scrolling or not. yii\bootstrap5\Offcanvas
$title string The title content in the offcanvas container. yii\bootstrap5\Offcanvas
$titleOptions array Additional title options. yii\bootstrap5\Offcanvas
$toggleButton array|false The options for rendering the toggle button tag. yii\bootstrap5\Offcanvas

Public Methods

Hide inherited methods

Method Description Defined By
init() yii\bootstrap5\Offcanvas
run() Renders the widget. yii\bootstrap5\Offcanvas

Protected Methods

Hide inherited methods

Method Description Defined By
initOptions() Initializes the widget options. yii\bootstrap5\Offcanvas
registerClientEvents() Registers JS event handlers that are listed in $clientEvents. yii\bootstrap5\BootstrapWidgetTrait
registerPlugin() Registers a specific Bootstrap plugin/component and the related events. yii\bootstrap5\BootstrapWidgetTrait
renderBodyBegin() Renders the opening tag of the modal body. yii\bootstrap5\Offcanvas
renderBodyEnd() Renders the closing tag of the modal body. yii\bootstrap5\Offcanvas
renderCloseButton() Renders the close button. yii\bootstrap5\Offcanvas
renderHeader() Renders the header HTML markup of the modal yii\bootstrap5\Offcanvas
renderToggleButton() Renders the toggle button. yii\bootstrap5\Offcanvas

Constants

Hide inherited constants

Constant Value Description Defined By
PLACEMENT_BOTTOM 'bottom' yii\bootstrap5\Offcanvas
PLACEMENT_END 'end' yii\bootstrap5\Offcanvas
PLACEMENT_START 'start' yii\bootstrap5\Offcanvas
PLACEMENT_TOP 'top' yii\bootstrap5\Offcanvas

Property Details

Hide inherited properties

$backdrop public property

Whether to enable backdrop or not. Defaults to true.

public boolean $backdrop = true
$bodyOptions public property

Additional body options.

See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

public array $bodyOptions = []
$closeButton public property

The options for rendering the close button tag. The close button is displayed in the header of the offcanvas container. Clicking on the button will hide the offcanvas container. If this is false, no close button will be rendered.

The following special options are supported:

  • tag: string, the tag name of the button. Defaults to 'button'.

The rest of the options will be rendered as the HTML attributes of the button tag. Please refer to the Offcanvas plugin help for the supported HTML attributes.

public array|false $closeButton = []
$headerOptions public property

Additional header options.

See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

public array $headerOptions = []
$placement public property

Where to place the offcanvas. Can be of of the [[PLACEMENT_*]] constants.

public string $placement = self::PLACEMENT_START
$scrolling public property

Whether to enable body scrolling or not. Defaults to false.

public boolean $scrolling = false
$title public property

The title content in the offcanvas container.

public string $title = null
$titleOptions public property

Additional title options.

The following special options are supported:

  • tag: string, the tag name of the button. Defaults to 'h5'.

See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

public array $titleOptions = []
$toggleButton public property

The options for rendering the toggle button tag. The toggle button is used to toggle the visibility of the modal window. If this property is false, no toggle button will be rendered.

The following special options are supported:

  • tag: string, the tag name of the button. Defaults to 'button'.
  • label: string, the label of the button. Defaults to 'Show'.

The rest of the options will be rendered as the HTML attributes of the button tag. Please refer to the Modal plugin help for the supported HTML attributes.

public array|false $toggleButton = false

Method Details

Hide inherited methods

init() public method

public void init ( )

                public function init(): void
{
    parent::init();
    $this->initOptions();
    ob_start();
    echo $this->renderToggleButton() . "\n";
    echo Html::beginTag('div', $this->options) . "\n";
    echo $this->renderHeader() . "\n";
    echo $this->renderBodyBegin() . "\n";
}
initOptions() protected method

Initializes the widget options.

This method sets the default values for various options.

protected void initOptions ( )

                protected function initOptions(): void
{
    $this->options = array_merge([
        'tabindex' => -1,
        'data' => [
            'bs-backdrop' => $this->backdrop ? 'true' : 'false',
            'bs-scroll' => $this->scrolling ? 'true' : 'false',
        ],
    ], $this->options);
    Html::addCssClass($this->options, [
        'widget' => 'offcanvas offcanvas-' . $this->placement,
    ]);
    $this->titleOptions = array_merge([
        'id' => $this->options['id'] . '-label',
    ], $this->titleOptions);
    if (!isset($this->options['aria']['label'], $this->options['aria']['labelledby']) && isset($this->title)) {
        $this->options['aria']['labelledby'] = $this->titleOptions['id'];
    }
    if ($this->closeButton !== false) {
        $this->closeButton = array_merge([
            'class' => [
                'widget' => 'btn-close text-reset',
            ],
            'data' => [
                'bs-dismiss' => 'offcanvas',
            ],
            'aria' => [
                'label' => Yii::t('yii/bootstrap5', 'Close'),
            ],
        ], $this->closeButton);
    }
    if ($this->toggleButton !== false) {
        $this->toggleButton = array_merge([
            'data' => [
                'bs-toggle' => 'offcanvas',
            ],
            'type' => 'button',
            'aria' => [
                'controls' => $this->options['id'],
            ],
        ], $this->toggleButton);
        if (!isset($this->toggleButton['data']['bs-target']) && !isset($this->toggleButton['href'])) {
            $this->toggleButton['data']['bs-target'] = '#' . $this->options['id'];
        }
    }
}
registerClientEvents() protected method

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

Registers JS event handlers that are listed in $clientEvents.

protected void registerClientEvents ( ?string $name = null )
$name ?string 

                protected function registerClientEvents(?string $name = null): void
{
    if (!empty($this->clientEvents)) {
        $id = $this->options['id'];
        $js = [];
        $appendix = ($name === 'dropdown') ? '.parentElement' : '';
        foreach ($this->clientEvents as $event => $handler) {
            $js[] = "document.getElementById('$id')$appendix.addEventListener('$event', $handler);";
        }
        $this->getView()->registerJs(implode("\n", $js));
    }
}
registerPlugin() protected method

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

Registers a specific Bootstrap plugin/component and the related events.

protected void registerPlugin ( string $name )
$name string

The name of the Bootstrap plugin

 

                protected function registerPlugin(string $name): void
{
    /**
     * @see https://github.com/twbs/bootstrap/blob/v5.2.0/js/index.esm.js
     */
    $jsPlugins = [
        'alert',
        'button',
        'carousel',
        'collapse',
        'dropdown',
        'modal',
        'offcanvas',
        'popover',
        'scrollspy',
        'tab',
        'toast',
        'tooltip',
    ];
    if (in_array($name, $jsPlugins, true)) {
        $view = $this->getView();
        BootstrapPluginAsset::register($view);
        // 'popover', 'toast' and 'tooltip' plugins not activates via data attributes
        if ($this->clientOptions !== false || in_array($name, ['popover', 'toast', 'tooltip'], true)) {
            $name = ucfirst($name);
            $id = $this->options['id'];
            $options = empty($this->clientOptions) ? '{}' : Json::htmlEncode($this->clientOptions);
            $view->registerJs("(new bootstrap.$name('#$id', $options));");
        }
        $this->registerClientEvents($name);
    }
}
renderBodyBegin() protected method

Renders the opening tag of the modal body.

protected string renderBodyBegin ( )
return string

The rendering result

 

                protected function renderBodyBegin(): string
{
    Html::addCssClass($this->bodyOptions, [
        'widget' => 'offcanvas-body',
    ]);
    return Html::beginTag('div', $this->bodyOptions);
}
renderBodyEnd() protected method

Renders the closing tag of the modal body.

protected string renderBodyEnd ( )
return string

The rendering result

 

                protected function renderBodyEnd(): string
{
    return Html::endTag('div');
}
renderCloseButton() protected method

Renders the close button.

protected string|null renderCloseButton ( )
return string|null

The rendering result

 

                protected function renderCloseButton(): ?string
{
    if (($closeButton = $this->closeButton) !== false) {
        $tag = ArrayHelper::remove($closeButton, 'tag', 'button');
        $label = ArrayHelper::remove($closeButton, 'label', '');
        if ($tag === 'button' && !isset($closeButton['type'])) {
            $closeButton['type'] = 'button';
        }
        return Html::tag($tag, $label, $closeButton);
    } else {
        return null;
    }
}
renderHeader() protected method

Renders the header HTML markup of the modal

protected string renderHeader ( )
return string

The rendering result

 

                protected function renderHeader(): string
{
    $button = $this->renderCloseButton();
    if (isset($this->title)) {
        $tag = ArrayHelper::remove($this->titleOptions, 'tag', 'h5');
        Html::addCssClass($this->titleOptions, [
            'widget' => 'offcanvas-title',
        ]);
        $header = Html::tag($tag, $this->title, $this->titleOptions);
    } else {
        $header = '';
    }
    if ($button !== null) {
        $header .= "\n" . $button;
    } elseif ($header === '') {
        return '';
    }
    Html::addCssClass($this->headerOptions, [
        'widget' => 'offcanvas-header',
    ]);
    return Html::tag('div', "\n" . $header . "\n", $this->headerOptions);
}
renderToggleButton() protected method

Renders the toggle button.

protected string|null renderToggleButton ( )
return string|null

The rendering result

 

                protected function renderToggleButton(): ?string
{
    if (($toggleButton = $this->toggleButton) !== false) {
        $tag = ArrayHelper::remove($toggleButton, 'tag', 'button');
        $label = ArrayHelper::remove($toggleButton, 'label', Yii::t('yii/bootstrap5', 'Show'));
        return Html::tag($tag, $label, $toggleButton);
    } else {
        return null;
    }
}
run() public method

Renders the widget.

public string run ( )

                public function run(): string
{
    $content = ob_get_clean();
    $content .= "\n" . $this->renderBodyEnd();
    $content .= "\n" . Html::endTag('div');
    $this->registerPlugin('offcanvas');
    return $content;
}