BasicCard

Kartu layout dasar dengan region header, footer, tag, leftSide, rightSide, body, dan children.

Bagian dari: vue-salayout · Family: Layout

---

Import

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

Instalasi: lihat Installation & Setup di halaman utama.

---

Usage

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

<template>
  <BasicCard headerColor="secondary">
    <template #header>Judul Kartu</template>
    <template #tag>Baru</template>

    Isi utama kartu.

    <template #footer>Aksi footer</template>
  </BasicCard>
</template>

---

API Reference

NOTE

Dibangun di atas composable internal (useCardFoundation), tidak diekspos secara publik. Lihat Core Concepts di halaman utama untuk detail arsitektur region, palette, dan corner-radius cascade.

BasicCard

Cara Penggunaan:

Region header/footer/tag/leftSide/rightSide hanya muncul jika slot-nya diisi. Region body (default slot) selalu ada; children muncul kalau slot children diisi. Lihat Region Anatomy: Content vs Chrome untuk perbedaan perlakuan padding-nya.

Props

Name	Type	Default	Description
color	CardColor	'card'	Warna body, atau map warna banyak region sekaligus Lihat selengkapnya
bodyColor	CardAccent	'card'	Warna region body, menang atas color Lihat selengkapnya
childrenColor	CardAccent	(family body)	Warna region children, menang atas color.children Lihat selengkapnya
headerColor	CardAccent	'primary'	Warna region header, menang atas color.header
footerColor	CardAccent	'primary'	Warna region footer, menang atas color.footer
tagColor	CardAccent	'primary'	Warna region tag, menang atas color.tag
leftSideColor	CardAccent	'primary'	Warna region leftSide, menang atas color.leftSide
rightSideColor	CardAccent	'primary'	Warna region rightSide, menang atas color.rightSide
alt	CardToggle	false	Toggle shade -alt per region Lihat selengkapnya
noPadding	CardToggle	false	Hilangkan padding per region Lihat selengkapnya
noAnimate	boolean	false	Matikan animasi fade-in-up saat kartu muncul
overflowing	boolean	false	Clip konten yang melebihi wrapper luar (memengaruhi tag)

color, bodyColor & childrenColor

color menerima string (hanya menyasar body) atau object (menyasar banyak region sekaligus, termasuk body dan children). Urutan resolusi tiap region selalu: prop standalone-nya (bodyColor, childrenColor, headerColor, dst — kalau diisi eksplisit) → key yang cocok di color → default hardcoded region tersebut. children yang tidak diset lewat childrenColor/color.children default ke family body (lihat Accent Palette & alt Shading). Detail lengkap ada di Resolusi Warna: color, bodyColor, dan Prop Standalone.

Contoh:

<!-- body & header sekaligus lewat object -->
<BasicCard :color="{ body: 'success', header: 'primary' }">
  <template #header>Header</template>
</BasicCard>

<!-- headerColor eksplisit menang atas color.header -->
<BasicCard :color="{ header: 'primary' }" header-color="danger">
  <template #header>Header (danger, bukan primary)</template>
</BasicCard>

<!-- children independen dari body -->
<BasicCard body-color="primary" children-color="danger">
  <template #children>Warna children tidak ikut family body</template>
</BasicCard>

Use Case: Object form berguna saat butuh set beberapa region sekaligus dari satu sumber data (mis. status → warna); prop standalone tetap tersedia untuk override cepat satu region tanpa mengubah object-nya. childrenColor khususnya berguna saat children perlu warna family yang benar-benar berbeda dari body, bukan cuma shade alt-nya.

alt

Mengatur shade -alt per region. Diterima dalam 3 bentuk (lihat Toggle Props: alt & noPadding): boolean (hanya body), array region, atau object per-region. Khusus body/children, keduanya auto-alternate — lihat Accent Palette & alt Shading.

Contoh:

<!-- children jadi base, body otomatis flip ke alt -->
<BasicCard :alt="{ children: false }">
  Body (alt)
  <template #children>Children (base)</template>
</BasicCard>

<!-- header ikut alt, region lain default -->
<BasicCard :alt="['header']">
  <template #header>Header (alt)</template>
  Body
</BasicCard>

Use Case: Bedakan visual antar region yang bertumpuk (mis. body vs children) tanpa mengganti warna family-nya.

noPadding

Menghilangkan padding per region, tanpa efek auto-link seperti alt — tiap region mengikuti persis apa yang diminta.

Contoh:

<BasicCard :no-padding="['body']">
  Body tanpa padding, region lain tetap padded.
</BasicCard>

Use Case: Body berisi konten yang perlu penuh ke tepi (gambar, tabel), sementara region lain tetap butuh padding standar.

Slots

Name	Props	Description
default	-	Konten region body
children	-	Konten region children, bertumpuk di bawah body
header	-	Konten region header
footer	-	Konten region footer
tag	-	Konten region tag (pill kecil di pojok atas)
leftSide	-	Konten region leftSide
rightSide	-	Konten region rightSide

Contoh:

<BasicCard color="success" :alt="true" no-animate>
  <template #tag>Live</template>
  <template #header>Status Server</template>

  Semua service berjalan normal.

  <template #children>Terakhir dicek: 2 menit lalu</template>
  <template #footer>Refresh</template>
</BasicCard>

---

Examples

1. Region Chrome Lengkap

<BasicCard headerColor="secondary" footerColor="secondary" leftSideColor="ternary">
  <template #tag>Draft</template>
  <template #header>Formulir Pengajuan</template>
  <template #leftSide>📄</template>

  Isi form di sini.

  <template #footer>Simpan</template>
</BasicCard>

2. alt & noPadding Bersama

<BasicCard :alt="{ header: true }" :no-padding="['body']">
  <template #header>Header (alt)</template>
  <img src="/banner.jpg" alt="" />
</BasicCard>

3. Card Tanpa Chrome (Content-Only)

<BasicCard color="card-alt">
  Kartu polos, hanya region body — semua sudut otomatis rounded penuh.
</BasicCard>

---

Styling

Styling sepenuhnya self-contained — lihat Import CSS di halaman utama. Tidak ada class yang perlu didefinisikan sendiri oleh consumer.

CSS Variables

Warna tiap CardAccent diambil dari CSS custom property di tokens.css, bisa di-override untuk retheme:

:root {
  --color-primary: #eb8500;
  --color-primary-alt: #cf7600;
  --color-primary-foreground: #ffffff;
}

Daftar lengkap family (primary, secondary, ternary, success, danger, card, background) beserta shade dark mode-nya ada di Accent Palette & alt Shading.

---

Related Components

Bagian dari family Layout — component tunggal, belum ada anggota lain di family ini. Untuk varian yang bisa dibuka/tutup, lihat family Expandable: Disclosure dan Accordion.