TrustBanner
TrustBanner (.mjl-trust-banner) adalah komponen opsional yang bisa diletakkan di baris paling atas (sebelum navigasi utama) untuk memberi tahu pengunjung siapa yang mengelola situs ini.
Design system ini tidak mengklaim afiliasi resmi pemerintah. TrustBanner tidak punya teks bawaan — prop owner wajib diisi oleh pemakai dengan nama pengelola situs yang sebenarnya, baik itu dinas, komunitas, maupun bisnis. Untuk instansi pemerintah yang memakainya secara sukarela, cara memverifikasi keabsahan (domain .go.id, HTTPS, dsb.) ditulis sendiri lewat slot default, bukan template tetap dari komponennya.
1. Pratinjau
2. Props
| Prop | Tipe | Keterangan |
|---|---|---|
owner | string | Wajib. Nama pengelola situs yang sebenarnya. |
href | string | Opsional. Tautan ke halaman "tentang" bila tidak ada konten detail lewat slot. |
Isi slot default untuk menambah panel yang bisa dibuka/tutup, misalnya penjelasan domain resmi untuk instansi pemerintah, atau nomor legalitas untuk UMKM.
3. Integrasi Vue 3 (@majalengka/vue)
<script setup lang="ts">
import { MjlTrustBanner } from '@majalengka/vue';
</script>
<template>
<MjlTrustBanner owner="Dinas Komunikasi dan Informatika Kab. Majalengka">
Domain resmi berakhiran <code>.go.id</code> atau <code>majalengkakab.go.id</code>,
dan koneksi selalu HTTPS.
</MjlTrustBanner>
</template>
Komponen <MjlTrustBanner> sudah mencakup logika pembukaan panel (collapsible) dan atribut ARIA lengkap; isi klaimnya sepenuhnya di tangan pemakai.
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.
<aside class="mjl-trust-banner" aria-label="Informasi pengelola situs">
<div class="mjl-trust-banner__inner">
<span class="mjl-trust-banner__text">Situs ini dikelola oleh <strong>Pemerintah Desa Sukamaju</strong></span>
<a href="/tentang" class="mjl-trust-banner__toggle">Cara memastikan</a>
</div>
</aside>
<script setup lang="ts">
import { MjlTrustBanner } from '@majalengka/vue';
</script>
<template>
<MjlTrustBanner owner="Pemerintah Desa Sukamaju">
Situs resmi desa memakai domain <strong>.desa.id</strong>. Hubungi kantor desa bila ragu.
</MjlTrustBanner>
</template>
import { useId, useState, type ReactNode } from 'react';
export function MjlTrustBanner({ owner, children }: { owner: string; children: ReactNode }) {
const [open, setOpen] = useState(false);
const id = useId();
return (
<aside className="mjl-trust-banner" aria-label="Informasi pengelola situs">
<div className="mjl-trust-banner__inner">
<span className="mjl-trust-banner__text">Situs ini dikelola oleh <strong>{owner}</strong></span>
<button type="button" className="mjl-trust-banner__toggle" aria-expanded={open} aria-controls={id} onClick={() => setOpen(!open)}>
Cara memastikan
</button>
</div>
<div id={id} className="mjl-trust-banner__details" hidden={!open}>{children}</div>
</aside>
);
}
import { Component, input, signal } from '@angular/core';
let nextId = 0;
@Component({
selector: 'mjl-trust-banner',
standalone: true,
template: `
<aside class="mjl-trust-banner" aria-label="Informasi pengelola situs">
<div class="mjl-trust-banner__inner">
<span class="mjl-trust-banner__text">Situs ini dikelola oleh <strong>{{ owner() }}</strong></span>
<button type="button" class="mjl-trust-banner__toggle" [attr.aria-expanded]="open()" [attr.aria-controls]="detailsId" (click)="open.set(!open())">
Cara memastikan
</button>
</div>
<div [id]="detailsId" class="mjl-trust-banner__details" [hidden]="!open()"><ng-content /></div>
</aside>
`,
})
export class MjlTrustBanner {
owner = input.required<string>();
open = signal(false);
detailsId = `mjl-trust-banner-${nextId++}`;
}
{{-- resources/views/layouts/app.blade.php, tepat di awal <body> --}}
<aside class="mjl-trust-banner" aria-label="Informasi pengelola situs">
<div class="mjl-trust-banner__inner">
<span class="mjl-trust-banner__text">Situs ini dikelola oleh <strong>{{ config('app.pengelola') }}</strong></span>
<a href="{{ route('tentang') }}" class="mjl-trust-banner__toggle">Cara memastikan</a>
</div>
</aside>
<?php $pengelola = 'Pemerintah Desa Sukamaju'; ?>
<aside class="mjl-trust-banner" aria-label="Informasi pengelola situs">
<div class="mjl-trust-banner__inner">
<span class="mjl-trust-banner__text">Situs ini dikelola oleh <strong><?= htmlspecialchars($pengelola, ENT_QUOTES, 'UTF-8') ?></strong></span>
<a href="/tentang.php" class="mjl-trust-banner__toggle">Cara memastikan</a>
</div>
</aside>