delete useless pages
This commit is contained in:
Yusron alamsyah
@@ -0,0 +1,167 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
import AppBaseCard from '@/components/shared/AppBaseCard.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<!-- ============================================================= -->
|
||||
<!-- AppBaseCard -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="AppBaseCard — Layout Dua Panel (Kiri & Kanan)">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>AppBaseCard</strong> adalah komponen layout yang membagi tampilan menjadi
|
||||
dua panel: panel <em>kiri</em> (sidebar) dan panel <em>kanan</em> (konten utama).
|
||||
Panel kiri hanya ditampilkan pada layar besar (<code>lgAndUp</code>).
|
||||
Pada layar kecil, panel kiri dapat diakses melalui drawer navigasi yang dipicu tombol Menu.
|
||||
</p>
|
||||
|
||||
<v-alert type="info" variant="tonal" class="mb-6">
|
||||
Komponen ini digunakan pada aplikasi seperti <strong>Chat</strong> dan
|
||||
<strong>Kanban</strong> yang membutuhkan layout dua panel responsif.
|
||||
</v-alert>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Slot</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>leftpart</code></td>
|
||||
<td>Konten panel kiri (lebar tetap 320px), tampil di layar besar saja</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>rightpart</code></td>
|
||||
<td>Konten panel kanan (mengisi sisa lebar)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>mobileLeftContent</code></td>
|
||||
<td>Konten dalam drawer navigasi untuk tampilan mobile</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ appBaseCardCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Demo Sederhana" class="mb-6">
|
||||
<AppBaseCard>
|
||||
<template #leftpart>
|
||||
<div class="pa-4">
|
||||
<p class="text-subtitle-1 font-weight-bold mb-3">Panel Kiri (Sidebar)</p>
|
||||
<v-list density="compact">
|
||||
<v-list-item
|
||||
v-for="item in ['Item 1', 'Item 2', 'Item 3']"
|
||||
:key="item"
|
||||
:title="item"
|
||||
prepend-icon="mdi-circle-small"
|
||||
/>
|
||||
</v-list>
|
||||
</div>
|
||||
</template>
|
||||
<template #rightpart>
|
||||
<div class="pa-4">
|
||||
<p class="text-subtitle-1 font-weight-bold mb-3">Panel Kanan (Konten Utama)</p>
|
||||
<p class="text-body-2 text-medium-emphasis">
|
||||
Ini adalah area konten utama. Pada layar kecil, panel kiri akan
|
||||
disembunyikan dan dapat dibuka melalui tombol "Menu" yang muncul di atas.
|
||||
</p>
|
||||
<v-alert type="success" variant="tonal" class="mt-3">
|
||||
Coba perkecil browser untuk melihat perilaku responsif!
|
||||
</v-alert>
|
||||
</div>
|
||||
</template>
|
||||
<template #mobileLeftContent>
|
||||
<div class="pa-4">
|
||||
<p class="text-subtitle-1 font-weight-bold mb-3">Menu Mobile</p>
|
||||
<v-list density="compact">
|
||||
<v-list-item
|
||||
v-for="item in ['Item 1', 'Item 2', 'Item 3']"
|
||||
:key="item"
|
||||
:title="item"
|
||||
prepend-icon="mdi-circle-small"
|
||||
/>
|
||||
</v-list>
|
||||
</div>
|
||||
</template>
|
||||
</AppBaseCard>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Tips Penggunaan" class="mb-6">
|
||||
<v-list lines="two">
|
||||
<v-list-item
|
||||
prepend-icon="mdi-cellphone"
|
||||
title="Responsif otomatis"
|
||||
subtitle="Panel kiri hilang di layar kecil dan muncul sebagai drawer nav ketika tombol Menu diklik."
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-resize"
|
||||
title="Lebar panel kiri tetap"
|
||||
subtitle="Panel kiri memiliki lebar 320px yang tidak bisa diubah. Sesuaikan konten Anda dengan lebar ini."
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-content-copy"
|
||||
title="Duplikasi konten mobile"
|
||||
subtitle="Slot mobileLeftContent harus memuat konten yang sama dengan leftpart agar konsisten di semua ukuran layar."
|
||||
/>
|
||||
</v-list>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
appBaseCardCode: `<template>
|
||||
<AppBaseCard>
|
||||
<!-- Panel kiri: daftar kontak, list, dsb. -->
|
||||
<template #leftpart>
|
||||
<div class="pa-4">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="contact in contacts"
|
||||
:key="contact.id"
|
||||
:title="contact.name"
|
||||
@click="selectContact(contact)"
|
||||
/>
|
||||
</v-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Panel kanan: detail/percakapan/konten utama -->
|
||||
<template #rightpart>
|
||||
<div class="pa-4">
|
||||
<h5>Detail Kontak</h5>
|
||||
<p>{{ selectedContact?.name }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Konten drawer untuk mobile (sama dengan leftpart) -->
|
||||
<template #mobileLeftContent>
|
||||
<div class="pa-4">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="contact in contacts"
|
||||
:key="contact.id"
|
||||
:title="contact.name"
|
||||
@click="selectContact(contact)"
|
||||
/>
|
||||
</v-list>
|
||||
</div>
|
||||
</template>
|
||||
</AppBaseCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AppBaseCard from '@/components/shared/AppBaseCard.vue';
|
||||
<\/script>`,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user