Elemen Dasar
User (Identitas Ringkas)
Komposisi foto profil avatar, nama, dan peran petugas dalam satu baris ringkas.
Komponen terpadu untuk menampilkan identitas pengguna di bilah navigasi (navbar), header dasbor, atau riwayat disposisi surat.
Pratinjau Komponen
Siti Rahmawati, S.STP
Petugas Loket Disdukcapil
Penggunaan CSS Murni
<div class="mjl-user">
<span class="mjl-avatar mjl-avatar--md mjl-avatar--circle">
<span class="mjl-avatar__fallback">SR</span>
</span>
<div class="mjl-user__content">
<span class="mjl-user__name">Siti Rahmawati, S.STP</span>
<span class="mjl-user__desc">Petugas Loket Pelayanan</span>
</div>
</div>
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-user">
<span class="mjl-avatar mjl-avatar--md mjl-avatar--circle" aria-hidden="true">
<span class="mjl-avatar__fallback">SR</span>
</span>
<div class="mjl-user__content">
<span class="mjl-user__name">Siti Rahmawati, S.STP</span>
<span class="mjl-user__desc">Petugas Loket Pelayanan</span>
</div>
</div>
<script setup lang="ts">
import { MjlUser } from '@majalengka/vue';
</script>
<template>
<MjlUser
name="Siti Rahmawati, S.STP"
description="Petugas Loket Pelayanan"
avatar-src="/foto/siti.jpg"
/>
</template>
export function MjlUser({ name, description, initials }: { name: string; description?: string; initials: string }) {
return (
<div className="mjl-user">
<span className="mjl-avatar mjl-avatar--md mjl-avatar--circle" aria-hidden="true">
<span className="mjl-avatar__fallback">{initials}</span>
</span>
<div className="mjl-user__content">
<span className="mjl-user__name">{name}</span>
{description && <span className="mjl-user__desc">{description}</span>}
</div>
</div>
);
}
import { Component, input } from '@angular/core';
@Component({
selector: 'mjl-user',
standalone: true,
template: `
<div class="mjl-user">
<span class="mjl-avatar mjl-avatar--md mjl-avatar--circle" aria-hidden="true">
<span class="mjl-avatar__fallback">{{ initials() }}</span>
</span>
<div class="mjl-user__content">
<span class="mjl-user__name">{{ name() }}</span>
@if (description()) { <span class="mjl-user__desc">{{ description() }}</span> }
</div>
</div>
`,
})
export class MjlUser {
name = input.required<string>();
initials = input.required<string>();
description = input<string>();
}
{{-- resources/views/components/mjl/user.blade.php --}}
@props(['name', 'description' => null, 'src' => null])
<div {{ $attributes->class('mjl-user') }}>
<x-mjl.avatar :name="$name" :src="$src" aria-hidden="true" />
<div class="mjl-user__content">
<span class="mjl-user__name">{{ $name }}</span>
@if ($description)<span class="mjl-user__desc">{{ $description }}</span>@endif
</div>
</div>
{{-- Pemakaian --}}
<x-mjl.user :name="$petugas->nama" :description="$petugas->jabatan" />
<div class="mjl-user">
<span class="mjl-avatar mjl-avatar--md mjl-avatar--circle" aria-hidden="true">
<span class="mjl-avatar__fallback"><?= htmlspecialchars($petugas['inisial'], ENT_QUOTES, 'UTF-8') ?></span>
</span>
<div class="mjl-user__content">
<span class="mjl-user__name"><?= htmlspecialchars($petugas['nama'], ENT_QUOTES, 'UTF-8') ?></span>
<span class="mjl-user__desc"><?= htmlspecialchars($petugas['jabatan'], ENT_QUOTES, 'UTF-8') ?></span>
</div>
</div>