berbant.github.io/index.html at main · berbant/berbant.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Статическая страница Quasar</title>

  <!-- 1. Подключаем стили Quasar -->
  <link href="https://cdn.jsdelivr.net/npm/quasar@2.16.4/dist/quasar.prod.css" rel="stylesheet" type="text/css">

  <!-- 2. Подключаем иконки (Material Icons - стандарт для Quasar) -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
</head>

<body>
  <!-- 3. Это корневой элемент, куда будет вмонтировано наше приложение -->
  <div id="q-app">
    <!-- q-layout - это основа макета страницы в Quasar -->
    <q-layout view="lHh lpr lFf">
      <q-page-container>
        <!-- q-page - компонент-обертка для контента страницы -->
        <!-- "flex flex-center" - это вспомогательные CSS-классы Quasar для центрирования -->
        <q-page class="flex flex-center text-center">
          <div>
            <h4>Простейшая Quasar страница</h4>
            <p>Этот файл работает без сервера!</p>


            <!-- Используем компонент кнопки из Quasar -->
            <!-- @click вызывает нашу функцию showNotification -->
            <q-btn
              @click="showNotification"
              color="primary"
              icon="touch_app"
              label="Нажми меня!"
              size="lg"
              glossy
            />
          </div>
        </q-page>
      </q-page-container>
    </q-layout>
  </div>

  <!-- 4. Сначала подключаем Vue.js, т.к. Quasar от него зависит -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>

  <!-- 5. Затем подключаем сам Quasar -->
  <script src="https://cdn.jsdelivr.net/npm/quasar@2.16.4/dist/quasar.umd.prod.js"></script>

  <!-- 6. Наш собственный скрипт для управления приложением -->
  <script>
    /*
     * В CDN-версии мы получаем доступ к Vue и Quasar
     * через глобальные объекты `Vue` и `Quasar`.
     */
    const { createApp } = Vue;
    const { useQuasar } = Quasar;

    const app = createApp({
      // Метод setup() - это место, где определяется вся логика компонента
      setup() {
        // Получаем доступ к функциям Quasar, таким как Notify
        const $q = useQuasar();

        // Наша функция, которая будет вызвана при клике
        function showNotification() {
          $q.notify({
            message: 'Отлично! Интерактивность работает!',
            icon: 'sentiment_very_satisfied',
            color: 'positive',
            position: 'top',
          });
        }

        // Мы должны вернуть функцию, чтобы она была доступна в шаблоне
        return {
          showNotification,
        };
      },
    });

    // "Регистрируем" плагин Quasar в нашем приложении Vue
    app.use(Quasar, {
      plugins: {
        Notify, // Включаем плагин уведомлений
      },
    });

    // "Монтируем" наше приложение в элемент <div id="q-app">
    app.mount('#q-app');
  </script>
</body>
</html>