如何在 Quasar 中的 q-scroll-area 底部一行 position

Question

我有一个侧边栏菜单，我试图将我的社交媒体部分放在侧边栏的底部，但我正在努力让 flex 工作并这样做。 我在第二行尝试了 item-stretch 但问题是该行没有扩展整个滚动区域。 最接近的不是类星体的例子可以在这里找到https://preview.colorlib.com/#elen

侧边栏组件：

<template>
<div class="navigation-links q-pa-lg">
  <q-list padding>
    <q-item clickable v-ripple class="q-pa-md q-ma-md menu-item">
      <q-item-section avatar>
        <q-icon name="fa-solid fa-house" style="font-size:1.25rem"/>
      </q-item-section>
      <q-item-section>
        HOME
      </q-item-section>
    </q-item>

    <q-item active clickable v-ripple class="q-pa-md q-ma-md menu-item active-menu-item">
      <q-item-section avatar>
        <q-icon name="fa-solid fa-shirt" style="font-size:1.25rem"/>
      </q-item-section>

      <q-item-section>
        SERVICES
      </q-item-section>
    </q-item>

    <q-item clickable v-ripple class="q-pa-md q-ma-md menu-item">
      <q-item-section avatar>
        <q-icon name="fa-solid fa-envelope" style="font-size:1.25rem"/>
      </q-item-section>

      <q-item-section>
        CONTACT US
      </q-item-section>
    </q-item>
  </q-list>
</div>
<div class="socialmedia-links q-pa-lg text-center column no-wrap flex-center self" style="">
  <div class="row">
    <q-btn flat size="sm" color="primary" round icon="fa-brands fa-google" aria-label="google" class="float-right q-ma-sm no-shadow"/>
    <q-btn flat size="sm" color="primary" round icon="fa-brands fa-facebook-f" aria-label="facebook" class="float-right q-ma-sm no-shadow"/>
    <q-btn flat size="sm" color="primary" round icon="fa-brands fa-instagram" aria-label="instagram" class="float-right q-ma-sm no-shadow"/>
  </div>
  <h2 class="text-h5 text-weight-bolder q-mb-xs">CONNECT WITH US</h2>
  <h6 class="text-subtitle1 text-accent text-weight-normal q-my-none">If you like what you have seen so far we can guarentee you will appreciate our print quality.</h6>
</div>

<script setup>
  import { ref } from 'vue'

  const searchText = ref('')
</script>
<style lang="scss" scoped>
  .block-wrapper{
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }

  .active-menu-item{
    background-color: $background-accent;
  }

  .menu-item{
    letter-spacing: .15rem;
    font-weight:500;
    border-radius: 7px;
  }

</style>

布局组件

    <q-drawer
  v-model="navigationDrawer"
  bordered
  side="left"
  behavior="mobile"
  :width="$q.screen.width >= 400  ? 400 : $q.screen.width"
>
  <q-scroll-area class="fit q-pa-lg">
    <div class="row justify-end">
      <q-btn flat round icon="fa-solid fa-xmark" aria-label="Menu" @click="toggleNavigationDrawer"/>
    </div>
    <div class="row" style="min-height: 100%;">
      <div class="col-12">
        <HomeSidebar/>
      </div>
    </div>
  </q-scroll-area>
</q-drawer>

Answer 1

将 q-scroll-area 的内容容器变成一个 flex 列。 您可以使用:content-style prop 将 CSS 类直接应用于容器

<q-scroll-area
  class="fit q-pa-lg"
  :content-style="{ display: 'flex', 'flex-direction': 'column' }"
>

还使侧边栏周围的 div 成为带有justify-content: space-between的弹性列。 它周围的行也应该有flex-grow: 1

<div class="row" style="min-height: 100%; flex-grow: 1">
  <div class="col-12 flex column justify-between">
    <HomeSidebar/>
  </div>

这是一个显示结果的沙箱