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.