如何让Quasar QDialog在手机端全屏在线？

Question

我有一个带有一些 dialogs 的响应式 Web 应用程序，我想让它们在用户通过移动设备访问它时占据整个屏幕（也称为全屏）。

我找到了 full-width 和 full-height 道具，但我想不出将它们应用于移动设备的简洁方法。想法？

Answer 1

您可以在手机上有条件地设置maximized来实现。

示例 -

<q-btn label="Maximized" color="primary" @click="dialog = true" ></q-btn>

<q-dialog
  v-model="dialog"
  persistent
  :maximized="$q.platform.is.mobile?maximizedToggle:false"
  transition-show="slide-up"
  transition-hide="slide-down"
>
  <q-card class="bg-primary text-white">
    <q-bar>
      <q-space ></q-space>

      <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
        <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">Minimize</q-tooltip>
      </q-btn>
      <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
        <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">Maximize</q-tooltip>
      </q-btn>
      <q-btn dense flat icon="close" v-close-popup>
        <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
      </q-btn>
    </q-bar>

    <q-card-section>
      <div class="text-h6">Alert</div>
    </q-card-section>

    <q-card-section class="q-pt-none">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
    </q-card-section>
  </q-card>
</q-dialog>


    data: function () {
        return {
       maximizedToggle: true
     }
    }

Answer 2

尝试为 qDialog 组件使用 "maximized" 属性。

如何让Quasar QDialog在手机端全屏在线？

How to make Quasar QDialog full screen on mobile online?

css

modal-dialog

quasar-framework