NotificationCard

Kartu notifikasi status dengan icon badge yang overlap ke border kiri, dan title pill mengambang di atas frame.

Bagian dari: vue-salayout · Family: Feedback

---

Import

import { NotificationCard } from '@bpmlib/vue-salayout';

Instalasi: lihat Installation & Setup di halaman utama.

---

Usage

<script setup lang="ts">
import { NotificationCard } from '@bpmlib/vue-salayout';
</script>

<template>
  <NotificationCard variant="danger" title="Error">
    <p>Terjadi kesalahan saat menyimpan data.</p>
  </NotificationCard>
</template>

---

API Reference

NOTE

Dibangun di atas useCardFoundation (region body/children/footer, sama seperti BasicCard) dan composable internal useNotificationNotch (resolusi warna icon/border/pill + icon default per variant). Keduanya tidak diekspos publik.

NotificationCard

Cara Penggunaan:

Berbeda dari BasicCard, tidak ada region header/tag/leftSide/rightSide — sebagai gantinya ada icon badge dan title pill yang posisinya tetap (di pojok kiri atas), didorong oleh satu prop variant yang mengatur icon, warna border kiri, dan warna pill sekaligus.

Props

Name	Type	Default	Description
variant	'primary' | 'secondary' | 'ternary' | 'success' | 'danger' | 'warning'	'primary'	Status notifikasi — mengatur icon, border kiri, dan pill sekaligus Lihat selengkapnya
color	CardColor	'card'	Warna body, independen dari variant
bodyColor	CardAccent	'card'	Warna region body, menang atas color
childrenColor	CardAccent	(family body)	Warna region children, menang atas color.children
footerColor	CardAccent	'primary'	Warna region footer, menang atas color.footer
icon	FontAwesome icon object	(default per variant)	Icon FontAwesome asli (mis. faSkullCrossbones) untuk override icon default Lihat selengkapnya
title	string	'Info'	Teks di title pill. Diabaikan kalau slot title diisi
alt	CardToggle	false	Toggle shade -alt untuk body/children
noPadding	CardToggle	false	Hilangkan padding per region
noAnimate	boolean	false	Matikan animasi fade-in-up saat kartu muncul
overflowing	boolean	false	Clip konten yang melebihi wrapper luar

variant

primary/secondary/ternary berbagi satu icon netral (info) karena tidak ada konotasi khusus di antara ketiganya; success punya icon sendiri (check); danger/warning berbagi satu icon peringatan (exclamation), dibedakan lewat warna saja.

Contoh:

<NotificationCard variant="success" title="Berhasil">
  <p>Data tersimpan.</p>
</NotificationCard>

Use Case: Pilih variant sesuai jenis status yang ingin disampaikan — bukan cuma warna, tapi juga icon default yang sesuai konotasinya.

icon

Menerima object icon FontAwesome asli (mis. hasil import faSkullCrossbones dari @fortawesome/free-solid-svg-icons) tanpa library ini butuh dependency FontAwesome apa pun — struktur object-nya saja yang dicocokkan.

Contoh:

<script setup lang="ts">
import { faSkullCrossbones } from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <NotificationCard variant="danger" :icon="faSkullCrossbones" title="Fatal Error">
    <p>Sistem tidak dapat melanjutkan proses.</p>
  </NotificationCard>
</template>

Use Case: Butuh icon yang lebih spesifik dari 3 default bawaan (info/check/exclamation), tanpa harus install ulang FontAwesome sebagai dependency library ini.

Slots

Name	Props	Description
icon	-	Override penuh icon, menang atas prop icon
title	-	Override penuh konten title pill, menang atas prop title
default	-	Konten region body
children	-	Konten region children, bertumpuk di bawah body
footer	-	Konten region footer

Contoh:

<NotificationCard variant="secondary">
  <template #title><strong>Judul Custom</strong></template>
  <p>Isi body.</p>
  <template #children>Detail tambahan di region children.</template>
  <template #footer>Tutup</template>
</NotificationCard>

---

Examples

1. Semua Variant

<NotificationCard v-for="variant in ['primary', 'secondary', 'ternary', 'success', 'danger', 'warning']" :key="variant" :variant="variant" :title="variant">
  <p>Contoh notifikasi untuk variant {{ variant }}.</p>
</NotificationCard>

2. Icon Slot Menang atas Prop

<NotificationCard variant="success" title="Slot Menang">
  <template #icon>
    <span style="font-size: 1.25rem">✅</span>
  </template>
  <p>Slot icon mengganti icon prop/default sepenuhnya.</p>
</NotificationCard>

---

Styling

Styling sepenuhnya self-contained — lihat Import CSS di halaman utama.

CSS Variables

variant="warning" mengambil nilai dari --color-warning (dan -alt/-foreground), yang secara default ikut nilai --color-primary lewat CSS fallback chain — override --color-warning secara terpisah kalau butuh warna warning yang beda dari primary:

:root {
  --color-warning: #f59e0b;
  --color-warning-alt: #d97706;
}

Warna region lain mengikuti token yang sama dengan BasicCard — lihat Accent Palette & alt Shading.

---

Related Components

Bagian dari family Feedback:

• LoadingCard — indikator loading, bukan status notifikasi
• ProgressBar — progress bar berdiri sendiri