Как сделать Quasar QDialog полноэкранным на мобильном телефоне онлайн? - PullRequest
Новая
       45

Как сделать Quasar QDialog полноэкранным на мобильном телефоне онлайн?

0 голосов
/ 30 января 2020

У меня есть отзывчивое веб-приложение с несколькими диалоговыми окнами , и я бы хотел, чтобы они занимали весь экран (он же полный экран) всякий раз, когда пользователь обращается к нему через мобильное устройство.

Я нашел full-width и full-height реквизиты, но я не могу придумать, как просто применить их для мобильных устройств. Идеи?

Ответы [ 2 ]

1 голос
/ 30 января 2020

Для этого можно условно установить 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
     }
    }
0 голосов
/ 30 января 2020

Попробуйте использовать "развернутую" опору для компонента qDialog.

...