Elemen Dasar
Divider (Pemisah Konten)
Garis pembatas horizontal tipis untuk memisahkan bagian konten atau kelompok formulir dengan rapi.
Divider (.mjl-divider) digunakan untuk memisahkan grup bidang isian atau seksi informasi dalam halaman dokumen panjang tanpa membuat antarmuka terasa ramai.
1. Pratinjau Divider
Pratinjau Divider
Bagian 1: Informasi Pemohon
Nama lengkap sesuai KTP dan NIK.
Bagian 2: Alamat Domisili
Kecamatan dan desa di wilayah Majalengka.
atau gunakan
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.
<hr class="mjl-divider">
<div class="mjl-divider mjl-divider--with-text">atau masuk dengan</div>
<script setup lang="ts">
import { MjlDivider } from '@majalengka/vue';
</script>
<template>
<MjlDivider />
<MjlDivider>atau masuk dengan</MjlDivider>
</template>
import type { ReactNode } from 'react';
export function MjlDivider({ children }: { children?: ReactNode }) {
return children
? <div className="mjl-divider mjl-divider--with-text">{children}</div>
: <hr className="mjl-divider" />;
}
// Pemakaian: <MjlDivider>atau masuk dengan</MjlDivider>
import { Component, input } from '@angular/core';
@Component({
selector: 'mjl-divider',
standalone: true,
template: `
@if (text()) {
<div class="mjl-divider mjl-divider--with-text">{{ text() }}</div>
} @else {
<hr class="mjl-divider" />
}
`,
})
export class MjlDivider {
text = input<string>();
}
// Pemakaian: <mjl-divider text="atau masuk dengan" />
{{-- resources/views/components/mjl/divider.blade.php --}}
@if ($slot->isNotEmpty())
<div {{ $attributes->class('mjl-divider mjl-divider--with-text') }}>{{ $slot }}</div>
@else
<hr {{ $attributes->class('mjl-divider') }}>
@endif
{{-- Pemakaian --}}
<x-mjl.divider>atau masuk dengan</x-mjl.divider>
<hr class="mjl-divider">
<div class="mjl-divider mjl-divider--with-text"><?= htmlspecialchars($teksPemisah, ENT_QUOTES, 'UTF-8') ?></div>