-
Notifications
You must be signed in to change notification settings - Fork 0
/
quasar.html
91 lines (80 loc) · 4.02 KB
/
quasar.html
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
<!DOCTYPE html>
<html>
<!--
WARNING! Make sure that you match all Quasar related
tags to the same version! (Below it's "@2.16.6")
-->
<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://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@^7.0.0/css/materialdesignicons.min.css" rel="stylesheet"
type="text/css">
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" type="text/css">
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/ionicons@^4.0.0/dist/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/eva-icons@^1.0.0/style/eva-icons.css" rel="stylesheet" type="text/css">
<link href="https://themify.me/wp-content/themes/themify-v32/themify-icons/themify-icons.css" rel="stylesheet"
type="text/css">
<link href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"
rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@^1.0.0/font/bootstrap-icons.css" rel="stylesheet"
type="text/css">
<link href="https://cdn.jsdelivr.net/npm/animate.css@^4.0.0/animate.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.16.6/dist/quasar.prod.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--
Forked from:
https://quasar.dev/vue-components/stepper#example--horizontal
-->
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md">
<q-stepper v-model="step" ref="stepper" color="primary" animated>
<q-step :name="1" title="Select campaign settings" icon="settings" :done="step > 1">
For each ad campaign that you create, you can control how much you're willing to
spend on clicks and conversions, which networks and geographical locations you want
your ads to show on, and more.
</q-step>
<q-step :name="2" title="Create an ad group" caption="Optional" icon="create_new_folder" :done="step > 2">
An ad group contains one or more ads which target a shared set of keywords.
</q-step>
<q-step :name="3" title="Ad template" icon="assignment" disable>
This step won't show up because it is disabled.
</q-step>
<q-step :name="4" title="Create an ad" icon="add_comment">
Try out different ad text to see what brings in the most customers, and learn how to
enhance your ads using features like ad extensions. If you run into any problems with
your ads, find out how to tell if they're running and how to resolve approval issues.
</q-step>
<template v-slot:navigation>
<q-stepper-navigation>
<q-btn @click="$refs.stepper.next()" color="primary" :label="step === 4 ? 'Finish' : 'Continue'"></q-btn>
<q-btn v-if="step > 1" flat color="primary" @click="$refs.stepper.previous()" label="Back"
class="q-ml-sm"></q-btn>
</q-stepper-navigation>
</template>
</q-stepper>
</div>
</div>
<!-- Add the following at the end of your body tag -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.16.6/dist/quasar.umd.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.16.6/dist/icon-set/material-icons-round.umd.prod.js"></script>
<script>
/*
Example kicking off the UI. Obviously, adapt this to your specific needs.
Assumes you have a <div id="q-app"></div> in your <body> above
*/
const app = Vue.createApp({
setup() {
return {
step: Vue.ref(1)
}
}
})
app.use(Quasar, { config: {} })
app.mount('#q-app')
</script>
</body>
</html>