Pridani skeletonu

2023-11-01 06:19:26 +01:00
parent 3e7ee9e686
commit 40f21d159e
8 changed files with 82 additions and 22 deletions
@@ -1,3 +1,23 @@
-<script setup> </script>
+<script setup> import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
+import {randomInt} from "src/composables/random";
+</script>

-<template>Skeleton</template>
+<template>
+
+  <q-card flat style="margin: 0 auto; max-width: 400px">
+    <q-skeleton type="rect" height="300px"/>
+
+    <q-card-section>
+
+      <div style="width: 200px; text-align: center; margin-top: -100px; margin-left: auto; margin-right: auto">
+        <q-skeleton class="inline-block" type="QAvatar" size="150px"/>
+        <q-skeleton class="inline-block" type="text" height="50px" :width="`${randomInt(50, 80)}%`"/>
+        <q-skeleton class="inline-block" type="text" height="40px" :width="`${randomInt(60, 90)}%`"/>
+      </div>
+      <div class="q-mt-lg">
+        <BasicTextSkeleton :lines="randomInt(1, 5)" :paragraphs="1"/>
+      </div>
+    </q-card-section>
+  </q-card>
+
+</template>