How to add opacity to the drawer background please?



  • 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.



  • 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.

    53bf684b-3739-4dbe-bac1-8cddecd7fdc9-image.png

    <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
      },
    ...
    


  • 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!



  • @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
    

Log in to reply