effendy/general-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

delete useless pages

Browse Source
This commit is contained in:
Yusron alamsyah
2026-03-17 09:22:24 +07:00
parent f2ed1b2556
commit c2fa3c160b
51 changed files with 1649 additions and 8842 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/shared-components/UiParentCard.vue
+158
View File
@@ -0,0 +1,158 @@
<script setup lang="ts">
import UiParentCard from '@/components/shared/UiParentCard.vue';
import UiChildCard from '@/components/shared/UiChildCard.vue';
</script>
<template>
<v-row>
<!-- ============================================================= -->
<!-- UiParentCard -->
<!-- ============================================================= -->
<v-col cols="12">
<UiParentCard title="UiParentCard — Elevated Card dengan Title">
<p class="text-body-1 mb-4">
<strong>UiParentCard</strong> adalah card dengan <code>elevation="10"</code> yang biasanya digunakan sebagai
<em>wrapper utama</em> pada halaman. Mendukung slot <code>default</code> (konten) dan slot
<code>action</code> (tombol/aksi di kanan atas header).
</p>
<!-- Props Table -->
<v-table density="compact" class="mb-6">
<thead>
<tr>
<th>Prop</th>
<th>Tipe</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<tr><td><code>title</code></td><td>String</td><td>Judul yang ditampilkan di header card</td></tr>
</tbody>
</v-table>
<!-- Slots Table -->
<v-table density="compact" class="mb-6">
<thead>
<tr>
<th>Slot</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<tr><td><code>default</code></td><td>Konten utama di dalam card</td></tr>
<tr><td><code>action</code></td><td>Konten aksi di kanan atas (misal: tombol)</td></tr>
</tbody>
</v-table>
<!-- Code Example -->
<UiChildCard title="Contoh Penggunaan" class="mb-6">
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiParentCardCode }}</pre>
</UiChildCard>
<!-- Live Demo -->
<UiChildCard title="Demo">
<UiParentCard title="Judul Card Saya">
<template #action>
<v-btn color="primary" size="small">Aksi</v-btn>
</template>
<p class="text-body-2">Ini adalah konten di dalam UiParentCard. Gunakan slot <strong>default</strong> untuk mengisi konten.</p>
</UiParentCard>
</UiChildCard>
</UiParentCard>
</v-col>
<!-- ============================================================= -->
<!-- UiChildCard -->
<!-- ============================================================= -->
<v-col cols="12">
<UiParentCard title="UiChildCard — Outlined Card dengan Title">
<p class="text-body-1 mb-4">
<strong>UiChildCard</strong> adalah card ber-outline (tanpa elevation) yang biasanya digunakan
<em>di dalam</em> UiParentCard untuk memisahkan bagian-bagian konten.
</p>
<!-- Props Table -->
<v-table density="compact" class="mb-6">
<thead>
<tr>
<th>Prop</th>
<th>Tipe</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<tr><td><code>title</code></td><td>String</td><td>Judul section di dalam card</td></tr>
</tbody>
</v-table>
<!-- Code Example -->
<UiChildCard title="Contoh Penggunaan" class="mb-6">
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiChildCardCode }}</pre>
</UiChildCard>
<!-- Live Demo -->
<UiChildCard title="Demo">
<v-row>
<v-col cols="12" md="6">
<UiChildCard title="Section A">
<p class="text-body-2">Konten section A.</p>
</UiChildCard>
</v-col>
<v-col cols="12" md="6">
<UiChildCard title="Section B">
<p class="text-body-2">Konten section B.</p>
</UiChildCard>
</v-col>
</v-row>
</UiChildCard>
</UiParentCard>
</v-col>
</v-row>
</template>
<script lang="ts">
export default {
data() {
return {
uiParentCardCode: `<template>
<UiParentCard title="Judul Card Saya">
<!-- Slot action: tombol/aksi di kanan atas -->
<template #action>
<v-btn color="primary" size="small">Aksi</v-btn>
</template>
<!-- Slot default: konten utama -->
<p>Konten di sini...</p>
</UiParentCard>
</template>
<script setup lang="ts">
import UiParentCard from '@/components/shared/UiParentCard.vue';
<\/script>`,
uiChildCardCode: `<template>
<!-- Biasanya dipakai di dalam UiParentCard -->
<UiParentCard title="Halaman Saya">
<v-row>
<v-col cols="12" md="6">
<UiChildCard title="Section A">
<p>Konten section A</p>
</UiChildCard>
</v-col>
<v-col cols="12" md="6">
<UiChildCard title="Section B">
<p>Konten section B</p>
</UiChildCard>
</v-col>
</v-row>
</UiParentCard>
</template>
<script setup lang="ts">
import UiParentCard from '@/components/shared/UiParentCard.vue';
import UiChildCard from '@/components/shared/UiChildCard.vue';
<\/script>`,
};
}
};
</script>