Skip to content
Permalink
Browse files
feat(b-sidebar): add prop backdrop-variant (#5411)
* initial take

* Update sidebar.js

* Update package.json

* Update sidebar.spec.js

* Update sidebar.spec.js

* Migrate to `backdrop-variant` prop

* Update _sidebar.scss

* Update README.md

* Update README.md

Co-authored-by: Rasmus Nielsen <rni@nova-c.dk>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
Co-authored-by: Troy Morehouse <troymore@nbnet.nb.ca>
  • Loading branch information
4 people committed May 20, 2020
1 parent 9172665 commit 4b0c163156b6ac5be6c1b0a2801d7c169c87cb49
Showing 6 changed files with 105 additions and 78 deletions.
@@ -270,27 +270,52 @@ Add a basic backdrop when the side bar is open via the `backdrop` prop. When set
sidebar will show an opaque backdrop. Clicking on the backdrop will close the sidebar, unless the
`no-close-on-backdrop` prop is set to `true`.

Optionally (as of BootstrapVue v2.15.0+) you can use the `backdrop-variant` prop to control the
theme color variant of the backdrop. The default backdrop variant is `dark`.

```html
<template>
<div>
<b-button v-b-toggle.sidebar-backdrop>Toggle Sidebar</b-button>

<b-sidebar
id="sidebar-backdrop"
title="Sidebar with backdrop"
:backdrop-variant="variant"
backdrop
shadow
>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
<b-form-group label="Backdrop variant" label-for="backdrop-variant">
<b-form-select id="backdrop-variant" v-model="variant" :options="variants"></b-form-select>
</b-form-group>
</div>
</b-sidebar>
</div>
</template>

<script>
export default {
data() {
return {
variant: 'dark',
variants: [
'transparent',
'white',
'light',
'dark',
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
]
}
}
}
</script>

<!-- b-sidebar-backdrop.vue -->
```

@@ -15,8 +15,7 @@
z-index: -1;
width: 100vw;
height: 100vh;
background-color: #000;
opacity: 0.5;
opacity: 0.6;
}

.b-sidebar {
@@ -76,6 +76,11 @@
"version": "2.12.0",
"description": "When `true`, shows a backdrop when the sidebar is open"
},
{
"prop": "backdropVariant",
"version": "2.15.0",
"description": "Theme variant color for the backdrop of the sidebar. Defaults to 'dark'"
},
{
"prop": "lazy",
"description": "When set to `true`, the content of the sidebar will only be rendered while the sidebar is open"
@@ -108,16 +108,21 @@ const renderContent = (h, ctx) => {
if (ctx.lazy && !ctx.isOpen) {
return $header
}

return [$header, renderBody(h, ctx), renderFooter(h, ctx)]
}

const renderBackdrop = (h, ctx) => {
if (!ctx.backdrop) {
return h()
}

const { backdropVariant } = ctx

return h('div', {
directives: [{ name: 'show', value: ctx.localShow }],
staticClass: 'b-sidebar-backdrop',
class: { [`bg-${backdropVariant}`]: !!backdropVariant },
on: { click: ctx.onBackdropClick }
})
}
@@ -197,10 +202,14 @@ export const BSidebar = /*#__PURE__*/ Vue.extend({
// default: null
},
backdrop: {
// If true, shows a basic backdrop
// If `true`, shows a basic backdrop
type: Boolean,
default: false
},
backdropVariant: {
type: String,
default: () => getComponentConfig(NAME, 'backdropVariant')
},
noSlide: {
type: Boolean,
default: false

0 comments on commit 4b0c163

Please sign in to comment.