Elemen Dasar
Kbd (Tombol Keyboard)
Penampil tombol keyboard untuk shortcut pencarian dan instruksi navigasi dokumen.
Komponen untuk menampilkan tombol pintasan keyboard pada dokumentasi, kotak pencarian, atau formulir petugas.
Pratinjau Komponen
Tekan Ctrl + K untuk mencari layanan
Tekan Esc untuk menutup dialog
Penggunaan CSS Murni
<p>
Tekan <kbd class="mjl-kbd">Ctrl</kbd> + <kbd class="mjl-kbd">K</kbd> untuk membuka pencarian.
</p>
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.
<p>Tekan <kbd class="mjl-kbd">Ctrl</kbd> + <kbd class="mjl-kbd">K</kbd> untuk mencari layanan.</p>
<script setup lang="ts">
import { MjlKbd } from '@majalengka/vue';
</script>
<template>
<p>Tekan <MjlKbd>Ctrl</MjlKbd> + <MjlKbd>K</MjlKbd> untuk mencari layanan.</p>
</template>
import type { ReactNode } from 'react';
export const MjlKbd = ({ children }: { children: ReactNode }) => <kbd className="mjl-kbd">{children}</kbd>;
// Pemakaian
export const Petunjuk = () => (
<p>Tekan <MjlKbd>Ctrl</MjlKbd> + <MjlKbd>K</MjlKbd> untuk mencari layanan.</p>
);
import { Component } from '@angular/core';
@Component({
selector: 'kbd[mjlKbd]',
standalone: true,
host: { class: 'mjl-kbd' },
template: '<ng-content />',
})
export class MjlKbd {}
// Pemakaian: <p>Tekan <kbd mjlKbd>Ctrl</kbd> + <kbd mjlKbd>K</kbd> untuk mencari.</p>
{{-- resources/views/components/mjl/kbd.blade.php --}}
<kbd {{ $attributes->class('mjl-kbd') }}>{{ $slot }}</kbd>
{{-- Pemakaian --}}
<p>Tekan <x-mjl.kbd>Ctrl</x-mjl.kbd> + <x-mjl.kbd>K</x-mjl.kbd> untuk mencari layanan.</p>
<p>Tekan <kbd class="mjl-kbd">Ctrl</kbd> + <kbd class="mjl-kbd">K</kbd> untuk mencari layanan.</p>