Offcanvas

Twitter bootstrap Documentation

Examples

Twitter bootstrap Documentation

Offcanvas components

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->offcanvas(
    'Content for the offcanvas goes here. ' .
'You can place just about any Bootstrap component or custom elements here.',
    [
        'header' => [
            'title' => [
                'content' => 'Offcanvas',
                'attributes' => [
                    'id' => 'offcanvasLabel',
                ],
            ],
        ],
        'id' => 'offcanvas',
    ]
);

Live demo

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->offcanvas(
    '<div>' .
'    Some text as placeholder. In real life you can have the elements you have chosen. ' .
'Like, text, images, lists, etc.' .
'</div>' .
$this->formButton()->renderSpec([
    'options' => [
        'label' => 'Dropdown button',
        'dropdown' => [
            'items' => ['Action', 'Another action', 'Something else here'],
            'attributes' => ['class' => 'mt-3'],
        ],
    ],
    'attributes' => ['id' => 'dropdownMenuButton'],
]),
    [
        'triggers' => [
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Link with href',
                    'tag' => 'a',
                ],
            ],
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Button with data-bs-target',
                ],
            ],
        ],
        'header' => [
            'title' => [
                'content' => 'Offcanvas',
                'attributes' => [
                    'id' => 'offcanvasExampleLabel',
                ],
            ],
        ],
        'id' => 'offcanvasExample',
    ]
);

Placement

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->offcanvas(
    '...',
    [
        'triggers' => [
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Toggle top offcanvas',
                ],
            ],
        ],
        'header' => [
            'title' => [
                'content' => 'Offcanvas top',
                'attributes' => [
                    'id' => 'offcanvasTopLabel',
                ],
            ],
        ],
        'placement' => 'top',
        'id' => 'offcanvasTop',
    ]
);

echo PHP_EOL . '<br>';

echo $this->offcanvas(
    '...',
    [
        'triggers' => [
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Toggle right offcanvas',
                ],
            ],
        ],
        'header' => [
            'title' => [
                'content' => 'Offcanvas right',
                'attributes' => [
                    'id' => 'offcanvasRightLabel',
                ],
            ],
        ],
        'placement' => 'end',
        'id' => 'offcanvasRight',
    ]
);

echo PHP_EOL . '<br>';

echo $this->offcanvas(
    '...',
    [
        'triggers' => [
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Toggle bottom offcanvas',
                ],
            ],
        ],
        'header' => [
            'title' => [
                'content' => 'Offcanvas bottom',
                'attributes' => [
                    'id' => 'offcanvasBottomLabel',
                ],
            ],
        ],
        'body' => [
            'class' => 'small',
        ],
        'placement' => 'bottom',
        'id' => 'offcanvasBottom',
    ]
);

Backdrop

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->offcanvas(
    '<p>Try scrolling the rest of the page to see this option in action.</p>',
    [
        'triggers' => [
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Enable body scrolling',
                ],
            ],
        ],
        'header' => [
            'title' => [
                'content' => 'Colored with scrolling',
                'attributes' => [
                    'id' => 'offcanvasScrollingLabel',
                ],
            ],
        ],
        'backdrop' => false,
        'scroll' => true,
        'id' => 'offcanvasScrolling',
    ]
);

echo $this->offcanvas(
    '<p>.....</p>',
    [
        'triggers' => [
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Enable backdrop (default)',
                ],
            ],
        ],
        'header' => [
            'title' => [
                'content' => 'Offcanvas with backdrop',
                'attributes' => [
                    'id' => 'offcanvasWithBackdropLabel',
                ],
            ],
        ],
        'id' => 'offcanvasWithBackdrop',
    ]
);

echo $this->offcanvas(
    '<p>Try scrolling the rest of the page to see this option in action.</p>',
    [
        'scroll' => true,
        'triggers' => [
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Enable both scrolling & backdrop',
                ],
            ],
        ],
        'header' => [
            'title' => [
                'content' => 'Backdrop with scrolling',
                'attributes' => [
                    'id' => 'offcanvasWithBothOptionsLabel',
                ],
            ],
        ],
        'id' => 'offcanvasWithBothOptions',
    ]
);