Skip to content

Commit d59ae10

Browse files
mrholekmrholek
committed
docs(COffcanvas): add static backdrop example
1 parent cbd4ef2 commit d59ae10

File tree

1 file changed

+132
-88
lines changed

1 file changed

+132
-88
lines changed

‎packages/docs/content/components/offcanvas.mdx

Lines changed: 132 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,138 @@ return (
8686
</>
8787
)
8888
```
89+
### Body scrolling
90+
91+
Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the scroll property to toggle `<body>` scrolling and backdrop to toggle the backdrop.
92+
93+
export const BodyScrollingExample = () => {
94+
const [visible, setVisible] = useState(false)
95+
return (
96+
<>
97+
<CButton onClick={() => setVisible(true)}>Enable body scrolling</CButton>
98+
<COffcanvas backdrop={false} placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>
99+
<COffcanvasHeader>
100+
<COffcanvasTitle>Offcanvas with body scrolling</COffcanvasTitle>
101+
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
102+
</COffcanvasHeader>
103+
<COffcanvasBody>
104+
Try scrolling the rest of the page to see this option in action.
105+
</COffcanvasBody>
106+
</COffcanvas>
107+
</>
108+
)
109+
}
110+
111+
<Example>
112+
<BodyScrollingExample />
113+
</Example>
114+
115+
```jsx
116+
const [visible, setVisible] = useState(false)
117+
return (
118+
<>
119+
<CButton onClick={() => setVisible(true)}>Enable body scrolling</CButton>
120+
<COffcanvas backdrop={false} placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>
121+
<COffcanvasHeader>
122+
<COffcanvasTitle>Offcanvas with body scrolling</COffcanvasTitle>
123+
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
124+
</COffcanvasHeader>
125+
<COffcanvasBody>
126+
Try scrolling the rest of the page to see this option in action.
127+
</COffcanvasBody>
128+
</COffcanvas>
129+
</>
130+
)
131+
```
132+
133+
### Body scrolling and backdrop
134+
135+
You can also enable `<body>` scrolling with a visible backdrop.
136+
137+
export const BodyScrollingAndBackdropExample = () => {
138+
const [visible, setVisible] = useState(false)
139+
return (
140+
<>
141+
<CButton onClick={() => setVisible(true)}>Enable both scrolling &amp; backdrop</CButton>
142+
<COffcanvas placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>
143+
<COffcanvasHeader>
144+
<COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
145+
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
146+
</COffcanvasHeader>
147+
<COffcanvasBody>
148+
Try scrolling the rest of the page to see this option in action.
149+
</COffcanvasBody>
150+
</COffcanvas>
151+
</>
152+
)
153+
}
154+
155+
<Example>
156+
<BodyScrollingAndBackdropExample />
157+
</Example>
158+
159+
```jsx
160+
const [visible, setVisible] = useState(false)
161+
return (
162+
<>
163+
<CButton onClick={() => setVisible(true)}>Enable both scrolling &amp; backdrop</CButton>
164+
<COffcanvas placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>
165+
<COffcanvasHeader>
166+
<COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
167+
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
168+
</COffcanvasHeader>
169+
<COffcanvasBody>
170+
Try scrolling the rest of the page to see this option in action.
171+
</COffcanvasBody>
172+
</COffcanvas>
173+
</>
174+
)
175+
```
176+
177+
### Static backdrop
178+
179+
If you set a `backdrop` to `static`, your React offcanvas component will not close when clicking outside of it.
180+
181+
export const StaticBackdropExample = () => {
182+
const [visible, setVisible] = useState(false)
183+
return (
184+
<>
185+
<CButton onClick={() => setVisible(true)}>Toggle static offcanvas</CButton>
186+
<COffcanvas backdrop="static" placement="start" visible={visible} onHide={() => setVisible(false)}>
187+
<COffcanvasHeader>
188+
<COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
189+
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
190+
</COffcanvasHeader>
191+
<COffcanvasBody>
192+
I will not close if you click outside of me.
193+
</COffcanvasBody>
194+
</COffcanvas>
195+
</>
196+
)
197+
}
198+
199+
<Example>
200+
<StaticBackdropExample />
201+
</Example>
202+
203+
```jsx
204+
const [visible, setVisible] = useState(false)
205+
return (
206+
<>
207+
<CButton onClick={() => setVisible(true)}>Toggle static offcanvas</CButton>
208+
<COffcanvas backdrop="static" placement="start" visible={visible} onHide={() => setVisible(false)}>
209+
<COffcanvasHeader>
210+
<COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
211+
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
212+
</COffcanvasHeader>
213+
<COffcanvasBody>
214+
I will not close if you click outside of me.
215+
</COffcanvasBody>
216+
</COffcanvas>
217+
</>
218+
)
219+
```
220+
89221

90222
## Placement
91223

@@ -224,94 +356,6 @@ return (
224356
)
225357
```
226358

227-
export const BackdropExample = () => {
228-
const [visibleScrolling, setVisibleScrolling] = useState(false)
229-
const [visibleWithBackdrop, setVisibleWithBackdrop] = useState(false)
230-
const [visibleWithBothOptions, setVisibleWithBothOptions] = useState(false)
231-
return (
232-
<>
233-
<CButton color="primary" onClick={() => setVisibleScrolling(true)}>Enable body scrolling</CButton>
234-
<CButton color="primary" onClick={() => setVisibleWithBackdrop(true)}>Enable backdrop (default)</CButton>
235-
<CButton color="primary" onClick={() => setVisibleWithBothOptions(true)}>Enable both scrolling &amp; backdrop</CButton>
236-
<COffcanvas backdrop={false} placement="start" scroll visible={visibleScrolling} onHide={() => setVisibleScrolling(false)}>
237-
<COffcanvasHeader>
238-
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
239-
<CCloseButton className="text-reset" onClick={() => setVisibleScrolling(false)}/>
240-
</COffcanvasHeader>
241-
<COffcanvasBody>
242-
<p>Try scrolling the rest of the page to see this option in action.</p>
243-
</COffcanvasBody>
244-
</COffcanvas>
245-
<COffcanvas placement="start" visible={visibleWithBackdrop} onHide={() => setVisibleWithBackdrop(false)}>
246-
<COffcanvasHeader>
247-
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
248-
<CCloseButton className="text-reset" onClick={() => setVisibleWithBackdrop(false)}/>
249-
</COffcanvasHeader>
250-
<COffcanvasBody>
251-
<p>.....</p>
252-
</COffcanvasBody>
253-
</COffcanvas>
254-
<COffcanvas placement="start" scroll visible={visibleWithBothOptions} onHide={() => setVisibleWithBothOptions(false)}>
255-
<COffcanvasHeader>
256-
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
257-
<CCloseButton className="text-reset" onClick={() => setVisibleWithBothOptions(false)}/>
258-
</COffcanvasHeader>
259-
<COffcanvasBody>
260-
<p>Try scrolling the rest of the page to see this option in action.</p>
261-
</COffcanvasBody>
262-
</COffcanvas>
263-
</>
264-
)
265-
}
266-
267-
## Backdrop
268-
269-
Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `scroll` property to toggle `<body>` scrolling and `backdrop` to toggle the backdrop.
270-
271-
<Example>
272-
<BackdropExample />
273-
</Example>
274-
275-
```jsx
276-
const [visibleScrolling, setVisibleScrolling] = useState(false)
277-
const [visibleWithBackdrop, setVisibleWithBackdrop] = useState(false)
278-
const [visibleWithBothOptions, setVisibleWithBothOptions] = useState(false)
279-
return (
280-
<>
281-
<CButton color="primary" onClick={() => setVisibleScrolling(true)}>Enable body scrolling</CButton>
282-
<CButton color="primary" onClick={() => setVisibleWithBackdrop(true)}>Enable backdrop (default)</CButton>
283-
<CButton color="primary" onClick={() => setVisibleWithBothOptions(true)}>Enable both scrolling &amp; backdrop</CButton>
284-
<COffcanvas backdrop={false} placement="start" scroll visible={visibleScrolling} onHide={() => setVisibleScrolling(false)}>
285-
<COffcanvasHeader>
286-
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
287-
<CCloseButton className="text-reset" onClick={() => setVisibleScrolling(false)}/>
288-
</COffcanvasHeader>
289-
<COffcanvasBody>
290-
<p>Try scrolling the rest of the page to see this option in action.</p>
291-
</COffcanvasBody>
292-
</COffcanvas>
293-
<COffcanvas placement="start" visible={visibleWithBackdrop} onHide={() => setVisibleWithBackdrop(false)}>
294-
<COffcanvasHeader>
295-
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
296-
<CCloseButton className="text-reset" onClick={() => setVisibleWithBackdrop(false)}/>
297-
</COffcanvasHeader>
298-
<COffcanvasBody>
299-
<p>.....</p>
300-
</COffcanvasBody>
301-
</COffcanvas>
302-
<COffcanvas placement="start" scroll visible={visibleWithBothOptions} onHide={() => setVisibleWithBothOptions(false)}>
303-
<COffcanvasHeader>
304-
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
305-
<CCloseButton className="text-reset" onClick={() => setVisibleWithBothOptions(false)}/>
306-
</COffcanvasHeader>
307-
<COffcanvasBody>
308-
<p>Try scrolling the rest of the page to see this option in action.</p>
309-
</COffcanvasBody>
310-
</COffcanvas>
311-
</>
312-
)
313-
```
314-
315359
## Accessibility
316360

317361
Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to `<COffcanvas>`. Note that you don’t need to add `role="dialog"` since we already add it automatically.

0 commit comments

Comments
 (0)