2 2 3 3
> Otherwise known as off-canvas or a side drawer, BootstrapVue's custom `<b-sidebar>` component is a
4 4
> fixed-position toggleable slide out box, which can be used for navigation, menus, details, etc. It
5 -
> can be positioned on either the left (default) or right of the viewport.
5 +
> can be positioned on either the left (default) or right of the viewport, with optional backdrop
6 +
> support.
6 7 7 8
## Overview
8 9
@@ -118,8 +119,28 @@ for no shadow.
118 119
### Borders
119 120 120 121
By default, `<b-sidebar>` has no borders. Use
121 -
[border utility classes](/docs/reference/utility-classes) to add border(s) to `<b-sidebar>`, or use
122 -
CSS style overrides.
122 +
[border utility classes](/docs/reference/utility-classes) to add border(s) to `<b-sidebar>` (via the
123 +
`sidebar-class` prop <span class="badge badge-secondary">2.12.0+</span>), or use CSS style
124 +
overrides.
125 + 126 +
```html
127 +
<template>
128 +
<div>
129 +
<b-button v-b-toggle.sidebar-border>Toggle Sidebar</b-button>
130 +
<b-sidebar id="sidebar-border" sidebar-class="border-right border-danger">
131 +
<div class="px-3 py-2">
132 +
<p>
133 +
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
134 +
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
135 +
</p>
136 +
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
137 +
</div>
138 +
</b-sidebar>
139 +
</div>
140 +
</template>
141 + 142 +
<!-- b-sidebar-border.vue -->
143 +
```
123 144 124 145
### Width
125 146
@@ -142,6 +163,9 @@ slide transition via the `no-slide` prop.
142 163
[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
143 164
additional details.
144 165 166 +
When disabling the slid transition, the fade transition of the [optional backdrop](#backdrop) will
167 +
also be disabled.
168 + 145 169
### Z-index
146 170 147 171
The sidebar has a default `z-index` defined in SCSS/CSS. In some situations you may need to use a
@@ -237,6 +261,43 @@ In some instances, you may not want the content rendered when the sidebar is not
237 261
the `lazy` prop on `<b-sidebar>`. When `lazy` is `true`, the body and optional footer will _not_ be
238 262
rendered (removed from DOM) whenever the sidebar is closed.
239 263 264 +
### Backdrop
265 + 266 +
<span class="badge badge-info small">2.12.0+</span>
267 + 268 +
Add a basic backdrop when the side bar is open via the `backdrop` prop. When set to `true`, the
269 +
sidebar will show an opaque backdrop. Clicking on the backdrop will close the sidebar, unless the
270 +
`no-close-on-backdrop` prop is set to `true`.
271 + 272 +
```html
273 +
<template>
274 +
<div>
275 +
<b-button v-b-toggle.sidebar-backdrop>Toggle Sidebar</b-button>
276 +
<b-sidebar
277 +
id="sidebar-backdrop"
278 +
title="Sidebar with backdrop"
279 +
backdrop
280 +
shadow
281 +
>
282 +
<div class="px-3 py-2">
283 +
<p>
284 +
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
285 +
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
286 +
</p>
287 +
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
288 +
</div>
289 +
</b-sidebar>
290 +
</div>
291 +
</template>
292 + 293 +
<!-- b-sidebar-backdrop.vue -->
294 +
```
295 + 296 +
Note that when the sidebar is open, it may still be possible to scroll the body (unlike the
297 +
behaviour of modals). When the backdrop in enabled, focus constraint will attempt to keep focus
298 +
within the sidebar. Note that in rare circumstances it might be possible for users to move focus to
299 +
elements outside of the sidebar.
300 + 240 301
## Visibility control
241 302 242 303
### `v-b-toggle` directive
@@ -285,7 +346,11 @@ reader and keyboard-only users. When the sidebar is closed, the element that pre
285 346
before the sidebar was opened will be re-focused.
286 347 287 348
When the sidebar is open, users can press <kbd>Esc</kbd> to close the sidebar. To disable this
288 -
feature, set the `no-close-on-esc` prop to `true`.
349 +
feature, set the `no-close-on-esc` prop to `true`. with the backdrop enabled, you can use the prop
350 +
`no-close-on-backdrop` to disable the close on backdrop click feature.
351 + 352 +
When the `backdrop` prop is `true`, the sidebar will attempt to constrain focus within the sidebar,
353 +
and the sidebar will have the attribute `aria-modal="true"` set.
289 354 290 355
When you have hidden the header, or do not have a title for the sidebar, set either `aria-label` to
291 356
a string that describes the sidebar, or set `aria-labelledby` to an ID of an element that contains
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4