Skip to content

Update Offcanvas docs, update transition #42225

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.

Sign up for GitHub

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

Open
mdo wants to merge 1 commit into
base: v6-dev
Choose a base branch
from
+6 −7
Open

Update Offcanvas docs, update transition #42225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion scss/_offcanvas.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ $offcanvas-tokens: defaults(
--offcanvas-border-color: var(--border-color-translucent),
--offcanvas-border-radius: var(--border-radius-lg),
--offcanvas-box-shadow: var(--box-shadow-lg),
--offcanvas-transition: transform .3s ease-in-out,
--offcanvas-transition: transform .3s cubic-bezier(.22, 1, .36, 1),
--offcanvas-title-line-height: 1.5,
),
$offcanvas-tokens
Expand Down
11 changes: 5 additions & 6 deletions site/src/content/docs/components/offcanvas.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
---
title: Offcanvas
description: Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
description: Build hidden sidebars or drawers into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
toc: true
---

## How it works

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, 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 our JavaScript.
Offcanvas is a drawer component that can be toggled via JavaScript to appear from the left, right, top, 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 our JavaScript.

- Offcanvas shares some of the same JavaScript code as dialogs. Conceptually, they are quite similar, but they are separate plugins.
- Offcanvas cannot be built off our Dialog component unfortunately, as we rely on it being a responsive feature of our navbar component.
- When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.
- Similar to dialogs, only one offcanvas can be shown at a time.

**Heads up!** Given how CSS handles animations, you cannot use `margin` or `translate` on an `.offcanvas` element. Instead, use the class as an independent wrapping element.
- Only one offcanvas can be shown at a time.
- Due to how CSS handles animations, you cannot use `margin` or `translate` on an `.offcanvas` element. Instead, use the class as an independent wrapping element.

<Callout name="info-prefersreducedmotion" />

Expand Down
Loading