Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add .offcanvas-expand-* functionality #34948

Closed
wants to merge 8 commits into from
Closed

Add .offcanvas-expand-* functionality #34948

wants to merge 8 commits into from

Conversation

leettaylor
Copy link

Offcanvas can be wrapped in an .offcanvas-expand{-sm|-md|-lg|-xl|-xxl} class to determine when it's content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For Offcanvas that never collapse, wrap the Offcanvas with the .offcanvas-expand class. For Offcanvas that always collapse, don't wrap with any .offcanvas-expand class.

Usage

<div class="offcanvas-expand-md">
    <button class="btn btn-primary d-md-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCollapse" aria-controls="offcanvasCollapse">
        Show Offcanvas
    </button>

    <div id="offcanvasCollapse" class="offcanvas offcanvas-end" aria-labelledby="offcanvasTitle">
        <div class="offcanvas-header">
            <h2 class="offcanvas-title" id="offcanvasTitle">Title</h2>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>

        <div class="offcanvas-body">
            <ul>
                <li>One</li>
                <li>Two</li>
            </ul>
        </div>
    </div>
</div>

Almost identical to how it works with the Navbar that uses Offcanvas and expands to a normal navbar.

@leettaylor leettaylor requested a review from a team as a code owner September 10, 2021 08:48
This allows the Offcanvas component to be expanded
at the selected breakpoints and collapse down to
an Offcanvas component below the breakpoint.
@leettaylor leettaylor marked this pull request as draft September 10, 2021 09:28
@leettaylor leettaylor marked this pull request as ready for review September 10, 2021 09:28
@XhmikosR XhmikosR changed the title Add .offcanvas-expand-* functionality Add .offcanvas-expand-* functionality Sep 10, 2021
@leettaylor
Copy link
Author

No need for this anymore, similar functionality added in #35736

@leettaylor leettaylor closed this Jul 5, 2022
@leettaylor leettaylor deleted the offcanvas-expand branch July 5, 2022 14:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants