JavaScript

API JavaScript untuk komponen interaktif ferzui.

Getting Started

Include ferzui JavaScript setelah CSS.

<link rel="stylesheet" href="ferzui.css"> <script src="ferzui.js"></script>

Data Attributes

ferzui menggunakan data attributes untuk inisialisasi komponen.

<!-- Modal --> <button data-bs-toggle="modal" data-bs-target="#myModal">Open Modal</button> <!-- Dropdown --> <button data-bs-toggle="dropdown">Dropdown</button> <!-- Tooltip --> <button data-bs-toggle="tooltip" title="Tooltip text">Hover me</button>

Modal untuk dialog dan overlay content.

Dropdown menu untuk navigation dan actions.

Tooltip

Tooltip untuk informasi tambahan pada elemen.

Popover

Popover untuk konten yang lebih kompleks dari tooltip.

Toast

Toast notification untuk feedback dan alerts.

Offcanvas

Offcanvas untuk sidebar dan drawer navigation.

Offcanvas

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Tabs

Tabs untuk mengorganisir konten dalam panel.

Home content
Profile content
Contact content

Accordion

Accordion untuk konten yang dapat di-collapse.

This is the first item's accordion body.

This is the second item's accordion body.

JavaScript API

API untuk kontrol programmatic komponen.

// Initialize modal const modal = new bootstrap.Modal(document.getElementById('myModal')); // Show modal modal.show(); // Hide modal modal.hide(); // Toggle modal modal.toggle(); // Event listeners modal.addEventListener('shown.bs.modal', function () { // Modal is shown }); modal.addEventListener('hidden.bs.modal', function () { // Modal is hidden });

Langkah Selanjutnya

Lihat Komponen Coba Playground Lihat Templates