Umpan Balik & Dialog
EmptyState (Kondisi Data Kosong)
Tampilan ramah dan informatif ketika warga belum memiliki riwayat permohonan atau pencarian tidak membuahkan hasil.
Komponen EmptyState (.mjl-empty-state) mencegah warga mengira sistem sedang rusak saat daftar permohonan atau pencarian bernilai nol. Komponen ini memberikan penjelasan jelas dan tombol tindakan pertama.
1. Pratinjau EmptyState
Pratinjau Belum Ada Permohonan
Belum Ada Permohonan Layanan
Anda belum pernah mengajukan permohonan dokumen kependudukan atau perizinan. Silakan mulai buat pengajuan baru di bawah ini.
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<div class="mjl-empty-state">
<h3 class="mjl-empty-state__title">Belum ada permohonan</h3>
<p class="mjl-empty-state__desc">Anda belum pernah mengajukan layanan.</p>
<a href="/permohonan/baru" class="mjl-btn mjl-btn--primary mjl-btn--md">Buat Pengajuan</a>
</div>
<script setup lang="ts">
import { MjlEmptyState, MjlButton } from '@majalengka/vue';
defineProps<{ permohonan: { id: number; nomor: string }[] }>();
</script>
<template>
<ul v-if="permohonan.length">
<li v-for="p in permohonan" :key="p.id">{{ p.nomor }}</li>
</ul>
<MjlEmptyState v-else title="Belum ada permohonan" description="Anda belum pernah mengajukan layanan.">
<MjlButton href="/permohonan/baru">Buat Pengajuan</MjlButton>
</MjlEmptyState>
</template>
import type { ReactNode } from 'react';
export function MjlEmptyState({ title, description, action }: { title: string; description?: string; action?: ReactNode }) {
return (
<div className="mjl-empty-state">
<h3 className="mjl-empty-state__title">{title}</h3>
{description && <p className="mjl-empty-state__desc">{description}</p>}
{action}
</div>
);
}
// Pemakaian
// {list.length === 0 && <MjlEmptyState title="Belum ada permohonan" action={<a className="mjl-btn mjl-btn--primary mjl-btn--md" href="/permohonan/baru">Buat Pengajuan</a>} />}
import { Component, input } from '@angular/core';
@Component({
selector: 'mjl-empty-state',
standalone: true,
template: `
<div class="mjl-empty-state">
<h3 class="mjl-empty-state__title">{{ title() }}</h3>
@if (description()) { <p class="mjl-empty-state__desc">{{ description() }}</p> }
<ng-content />
</div>
`,
})
export class MjlEmptyState {
title = input.required<string>();
description = input<string>();
}
// Pemakaian: @if (!items.length) { <mjl-empty-state title="Belum ada permohonan" /> }
@forelse ($permohonan as $p)
<x-kartu-permohonan :permohonan="$p" />
@empty
<div class="mjl-empty-state">
<h3 class="mjl-empty-state__title">Belum ada permohonan</h3>
<p class="mjl-empty-state__desc">Anda belum pernah mengajukan layanan.</p>
<a href="{{ route('permohonan.create') }}" class="mjl-btn mjl-btn--primary mjl-btn--md">Buat Pengajuan</a>
</div>
@endforelse
<?php if (empty($daftarPermohonan)): ?>
<div class="mjl-empty-state">
<h3 class="mjl-empty-state__title">Belum ada permohonan</h3>
<p class="mjl-empty-state__desc">Anda belum pernah mengajukan layanan.</p>
<a href="permohonan-baru.php" class="mjl-btn mjl-btn--primary mjl-btn--md">Buat Pengajuan</a>
</div>
<?php endif; ?>