Quasar - популярная библиотека пользовательского интерфейса Vue для разработки красивых приложений Vue.

В этой статье мы рассмотрим, как создавать приложения Vue с помощью библиотеки Quasar UI.

Баннер

Мы можем добавить баннер с компонентом q-banner.

Например, мы можем написать:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-banner class="bg-primary text-white">
          Error occured
          <template v-slot:action>
            <q-btn flat color="white" label="Dismiss" />
            <q-btn flat color="white" label="Update" />
          </template>
        </q-banner>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

добавить баннер.

Мы заполняем слот action, чтобы добавить кнопки внизу баннера.

Мы можем добавить значок в левой части сообщения со слотом avatar:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
<body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-banner class="bg-primary text-white">
          <template v-slot:avatar>
            <q-icon name="signal_wifi_off" />
          </template>
          This app is offline.
          <template v-slot:action>
            <q-btn flat color="white" label="Dismiss" />
            <q-btn flat color="white" label="Retry" />
          </template>
        </q-banner>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

Мы можем сделать углы закругленными с помощью опоры rounded:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-banner rounded class="bg-purple-8 text-white">
          Please sign in
          <template v-slot:action>
            <q-btn flat color="white" label="Continue as a Guest" />
            <q-btn flat color="white" label="Sign in" />
          </template>
        </q-banner>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

Также мы можем добавить изображение в слот avatar для его отображения:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-banner rounded class="bg-purple-8 text-white">
          <template v-slot:avatar>
            <img
              src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c"
              style="width: 100px; height: 64px;"
            />
          </template>
Could not retrieve data.
          <template v-slot:action>
            <q-btn flat label="Retry" />
          </template>
        </q-banner>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

Заключение

Мы можем добавлять баннеры в наше приложение Vue с помощью библиотеки Quasar.