How to add opacity to the drawer background please?

bambinou

Hello,

Anyone knows a good trick for adding opacity to the drawer? Each time I try all the buttons become also transparent.

.q-drawer__backdrop {
    z-index: 999 !important;
    will-change: background-color;
}

Thanks.

dgk

This doesn’t answer your question directly for the built-in/example drawer menu but

I wrote a drawer menu component that one can drop into the drawer that gives more/easier control over the elements.
If you don’t want to use it then try using similar classes in the existing drawer section of your template.

fyi .q-drawer__content is the primary class element into which the component drops. Take a look at styling section below

This component uses a menu prop which is just an object with the menu options. This for me was way easier than hard coding each choice. I just change an entry or change it’s disabled or hide property. Very easy to do dynamically too.

<template>
  <q-list class="q-drawer-menu">
    <q-item-label class="q-drawer-menu__heading" header v-if="menu.heading">{{ menu.heading }} </q-item-label>
    <q-separator v-if="menu.separator"/>
    <!-- <q-separator spaced v-if="menu.separator"/> -->
    <div :key="item.name" v-for="item in menu.items">
      <q-item
      :clickable="item.disabled"
      v-if="!item.hidden"
      :class="item.disabled ? 'disabled':'enabled'"
      class="q-drawer-menu__item"
      @click="$emit('active',item)"
      :to="`/${item.path||item.name}`">
        <q-tooltip v-if="item.tip">{{item.tip}}</q-tooltip>
        <q-item-section v-if="!menu.disableIcons" top avatar>
          <q-avatar v-if="item.icon" :color="item.iconColor" class="q-drawer-menu__item--icon" :icon="item.icon" />
          <!-- <q-icon v-if="item.icon" :color="item.iconColor || 'primary'" class="q-drawer-menu__item--icon" :name="item.icon" /> -->
        </q-item-section>
        <q-item-section>
          <q-item-label class="q-drawer-menu__item--name">{{ item.label ? item.label : item.name[0].toUpperCase()+item.name.slice(1) }}</q-item-label>
          <q-item-label caption class="q-drawer-menu__item--caption" lines="2">{{item.caption}}</q-item-label>
        </q-item-section>
      </q-item>
      <q-separator v-if="!item.disabled & menu.separator" />
    </div>
    <q-icon />
</q-list>
</template>

<script>
import { QItem, QItemLabel, QItemSection, QSeparator, QIcon } from 'quasar'

// is array of object that looks

export default {
  data () {
    return {
      pin: '',
      disabled: false
    }
  },
  props: ['menu'],
  methods: {
  },
  watch: {
    pin (val) {
      if (val && val.length === this.pin.length) {
        this.disabled = true
        this.validatePin()
      }
    }
  },
  components: { QItem, QItemLabel, QItemSection, QSeparator, QIcon }
}
</script>

<style lang="stylus">
.q-drawer__content
  background-color $menu-color
.q-drawer-menu__heading
  color $menu-heading-text-color
  background $menu-heading-color
.q-drawer-menu__item
  padding .2em
  color $menu-item-text-color
  background $menu-item-color
.q-drawer-menu__item
 &.disabled
  background $menu-item-disabled-color
.q-drawer-menu__item--caption
  color $menu-item-caption-text-color
.q-drawer-menu__item--icon
  color $menu-item-icon-symbol-color
  background-color $menu-item-icon-color

</style>

I put this in assets and then load it and set is as the passed menu prop.

export default {
  heading: 'System Configuration',
  // disableIcons: true,
  // disabled: true,
  separator: true,
  items: [ // name is only required
    // full props supported are, label, name, caption,icon,hidden,disabled
    { label: 'Primary', name: 'config', caption: 'primay configuration', icon: 'fas fa-cog' },
    { name: 'network', path: 'service/network', caption: 'Networked Devices/SBCs/Computers', icon: 'fas fa-network-wired' },
    { name: 'hardware', path: 'service/hardware', caption: 'Hardware Firmware Setup', icon: 'fas fa-microchip' },
    { name: 'circuits', path: 'service/circuits', caption: 'Physical Light/Outlet Circuits Setup', icon: 'fas fa-lightbulb' },
    { name: 'switches', path: 'service/switches', caption: 'Physical and Virtual Switch Setup', icon: 'fas fa-toggle-on' },
    { name: 'security', caption: 'System User Credentials', icon: 'fa fa-shield-alt' },
    { name: 'backup', caption: 'Backup Underlying Database', icon: 'fas fa-save', disabled: true },
    { name: 'help', caption: 'Configuration Help/Docs', tip: 'this is a tip', icon: 'fas fa-info-circle' },
    { name: 'command', caption: 'Custom Command', icon: 'fas fa-chevron-right', hidden: true }
  ]
}

    <q-drawer show-if-above v-model="menuOpen" side="left" bordered>
      <q-drawer-menu :menu="menu" @active="(item) => active=item"/>
    </q-drawer>

...

import menu from 'assets/menu'
import QDrawerMenu from 'src/components/DrawerMenu'


...
      menu: menu,

    }
  },
  components: {
    QDrawerMenu
  },
...

bambinou

Thank you so much, this looks really nice. I will check it further in the next couple of days as I am away at the moment.
But this is exactly what I am looking for.

Thanks again!

dgk

@bambinou just so you know this component also dependents on some dynamic font sizing otherwise it will look wonky.
https://forum.quasar-framework.org/topic/3483/fluid-typography-solved/34

Here is my latest version of that

// SET DEFAULT FONT SIZES

// FONT SIZING
@import '../../node_modules/rfs/stylus'
// rfs settable variables - commented are defaults
$rfs-base-font-size = 1rem
// $rfs-font-size-unit = rem
$rfs-breakpoint = 1400px
// $rfs-breakpoint-unit = px
// $rfs-factor = 10
// $rfs-rem-value = 16
$rfs-two-dimensional = true
// $rfs-class = false

$field-font-factor = 1.2  // relative to base font size
$field-label-font-factor = 1 // relative to field font size

$item-font-factor = 1.1  // relative to base font size
$item-caption-font-factor = .8 // relative to item size
$item-header-font-factor = 1.5 // relative to item size

.q-item__label
  rfs($rfs-base-font-size * $item-font-factor)

.q-item__label--header
  rfs($rfs-base-font-size * $item-font-factor * $item-header-font-factor)

.q-item__label--caption
  rfs($rfs-base-font-size * $field-label-font-factor * $item-caption-font-factor )
  padding-bottom .3em // needs to be dynamic based on font size

.q-field__native
   rfs($rfs-base-font-size * $field-font-factor)

.q-field__label
   rfs($rfs-base-font-size * $field-font-factor)
   padding-bottom .7em // needs to be dynamic based on font size

.q-field__label
&.no-pointer-events
  rfs($rfs-base-font-size * $field-font-factor * $field-label-font-factor )
  padding-bottom .5em // needs to be dynamic based on font size

No More Posting New Topics!

How to add opacity to the drawer background please?