study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-09-28 07:05:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
fofolee
2022-03-29 22:34:21 +08:00
parent 30a9a73f30
commit 72d146ba3f
5 changed files with 136 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/pages/ConfigurationPage.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<div>
<q-splitter v-model="splitterModel" style="height: 250px">
<template v-slot:before>
<q-tabs v-model="tab" vertical class="text-teal">
<q-tab name="mails" icon="mail" label="Mails" />
<q-tab name="alarms" icon="alarm" label="Alarms" />
<q-tab name="movies" icon="movie" label="Movies" />
</q-tabs>
</template>
<template v-slot:after>
<q-tab-panels
v-model="tab"
animated
swipeable
vertical
transition-prev="jump-up"
transition-next="jump-up"
>
<q-tab-panel name="mails">
<div class="text-h4 q-mb-md">Mails</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
praesentium cumque magnam odio iure quidem, quod illum numquam
possimus obcaecati commodi minima assumenda consectetur culpa fuga
nulla ullam. In, libero.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
praesentium cumque magnam odio iure quidem, quod illum numquam
possimus obcaecati commodi minima assumenda consectetur culpa fuga
nulla ullam. In, libero.
</p>
</q-tab-panel>
<q-tab-panel name="alarms">
<div class="text-h4 q-mb-md">Alarms</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
praesentium cumque magnam odio iure quidem, quod illum numquam
possimus obcaecati commodi minima assumenda consectetur culpa fuga
nulla ullam. In, libero.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
praesentium cumque magnam odio iure quidem, quod illum numquam
possimus obcaecati commodi minima assumenda consectetur culpa fuga
nulla ullam. In, libero.
</p>
</q-tab-panel>
<q-tab-panel name="movies">
<div class="text-h4 q-mb-md">Movies</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
praesentium cumque magnam odio iure quidem, quod illum numquam
possimus obcaecati commodi minima assumenda consectetur culpa fuga
nulla ullam. In, libero.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
praesentium cumque magnam odio iure quidem, quod illum numquam
possimus obcaecati commodi minima assumenda consectetur culpa fuga
nulla ullam. In, libero.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
praesentium cumque magnam odio iure quidem, quod illum numquam
possimus obcaecati commodi minima assumenda consectetur culpa fuga
nulla ullam. In, libero.
</p>
</q-tab-panel>
</q-tab-panels>
</template>
</q-splitter>
</div>
</template>
<script>
export default {
data() {
return {
tab: "mails",
splitterModel: 20,
};
},
};
</script>