Quasar - популярная библиотека пользовательского интерфейса Vue для разработки красивых приложений Vue.
В этой статье мы рассмотрим, как создавать приложения Vue с помощью библиотеки Quasar UI.
Размеры радиокнопок
Мы можем установить размеры переключателей с помощью свойства size.
Например, мы можем написать:
<!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"
>
<div class="q-pa-md">
<q-radio
size="xs"
v-model="color"
val="green"
label="green"
color="green"
></q-radio>
<q-radio
size="sm"
v-model="color"
val="red"
label="red"
color="red"
></q-radio>
<q-radio
size="md"
v-model="color"
val="blue"
label="blue"
color="blue"
></q-radio>
</div>
<div class="q-px-sm">
<strong>{{ color }}</strong>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
color: ""
}
});
</script>
</body>
</html>
установить размеры. Другие возможные значения включают lg и xl.
Мы можем отображать переключатели с помощью компонента q-option-group:
<!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"
>
<div class="q-pa-md">
<q-option-group
:options="options"
label="Notifications"
type="radio"
v-model="group"
>
</q-option-group>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
group: null,
options: [
{ label: "Battery too low", value: "bat" },
{ label: "Friend request", value: "friend", color: "green" },
{ label: "Uploaded", value: "upload", color: "red" }
]
}
});
</script>
</body>
</html>
Мы устанавливаем опору options, чтобы установить параметры для переключателя.
Флажок
Мы можем добавить флажки в наше приложение Vue с помощью компонента Quasar q-checkbox.
Например, мы можем написать:
<!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"
>
<div class="q-pa-md">
<div class="q-gutter-sm">
<q-checkbox v-model="right" label="Label on Right"></q-checkbox>
</div>
<div class="q-gutter-sm">
<q-checkbox
left-label
v-model="left"
label="Label on Left"
></q-checkbox>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
right: false,
left: false
}
});
</script>
</body>
</html>
чтобы добавить это.
Связываем проверенное значение директивой v-model.
У стойки label есть метка для отображения с флажком.
left-label помещает метку слева от флажка.
Мы можем изменить цвет флажка с помощью опоры color:
<!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"
>
<div class="q-pa-md">
<div class="q-gutter-sm">
<q-checkbox
v-model="right"
color="green"
label="Label on Right"
></q-checkbox>
</div>
<div class="q-gutter-sm">
<q-checkbox
left-label
keep-color
v-model="left"
label="Label on Left"
color="orange"
></q-checkbox>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
right: false,
left: false
}
});
</script>
</body>
</html>
color устанавливает цвет флажка.
keep-color устанавливает цвет контура равным значению цвета свойства color, даже если он не установлен.
Заключение
Мы можем добавить флажки и переключатели в наше приложение Vue с помощью библиотеки Quasar.
