Ngorei Doc
Ngorei Doc
Dokumentasi komponen Dropdown yang dapat digunakan dalam NexaUI framework.
Contoh penggunaan dropdown dasar dengan hover.
<div class="nx-dropdown">
<button class="nx-btn-primary">Dropdown</button>
<div class="nx-dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<Dropdown
title="Dropdown"
class="nx-btn-primary"
items='(
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
)'/>
Dropdown dapat diarahkan ke berbagai posisi sesuai kebutuhan layout.
Dropdown yang muncul di atas tombol trigger.
<div class="nx-dropdown">
<button class="nx-btn nx-btn-secondary">Dropdown Atas</button>
<div class="nx-dropdown-content nx-dropdown-top">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<Dropdown
title="Dropdown Atas"
class=" nx-btn-secondary"
type="top"
items='(
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
)'/>
Dropdown dapat diarahkan ke berbagai posisi sesuai kebutuhan layout.
Dropdown yang muncul di sebelah kanan tombol trigger.
<div class="nx-dropdown">
<button class="nx-btn nx-btn-secondary">Dropdown Kanan</button>
<div class="nx-dropdown-content nx-dropdown-right">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<Dropdown
title="Dropdown Kanan"
class=" nx-btn-secondary"
type="right"
items='(
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
)'/>
Dropdown dapat diarahkan ke berbagai posisi sesuai kebutuhan layout.
Dropdown yang muncul di sebelah kiri tombol trigger.
<div class="nx-dropdown">
<button class="nx-btn nx-btn-secondary">Dropdown Kiri</button>
<div class="nx-dropdown-content nx-dropdown-left">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<Dropdown
title="Dropdown Kiri"
class=" nx-btn-secondary"
type="left"
items='(
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
)'/>
Dropdown yang muncul saat diklik menggunakan JavaScript.
<div class="nx-dropdown">
<button class="nx-btn-primary" onclick="toggleDropdown(this)">Klik Dropdown</button>
<div class="nx-dropdown-content" id="clickDropdown">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
function toggleDropdown(btn) {
const dropdown = btn.nextElementSibling;
dropdown.classList.toggle('show');
}
// Tutup dropdown saat klik di luar
window.onclick = function(event) {
if (!event.target.matches('.nx-btn')) {
const dropdowns = document.getElementsByClassName('nx-dropdown-content');
for (const dropdown of dropdowns) {
if (dropdown.classList.contains('show')) {
dropdown.classList.remove('show');
}
}
}
}
<<div>
</div>
Dropdown dengan garis pembatas antar item.
<div class="nx-dropdown">
<button class="nx-btn-primary">Dropdown Pembatas</button>
<div class="nx-dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<div class="nx-dropdown-divider"></div>
<a href="#">Link 3</a>
</div>
</div>
<Dropdown
title="Dropdown Pembatas"
class=" nx-btn-primary"
items='(
<a href="#">Link </a>
<a href="#">Link 2</a>
<div class="nx-dropdown-divider"></div>
<a href="#">Link 3</a>
)'/>
Dropdown yang memiliki header/judul grup.
<div class="nx-dropdown">
<button class="nx-btn-primary">Dropdown Header</button>
<div class="nx-dropdown-content">
<div class="nx-dropdown-header">Grup 1</div>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<div class="nx-dropdown-divider"></div>
<div class="nx-dropdown-header">Grup 2</div>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</div>
<Dropdown
title="Dropdown Header"
class=" nx-btn-primary"
items='(
<div class="nx-dropdown-header">Grup 1</div>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<div class="nx-dropdown-divider"></div>
<div class="nx-dropdown-header">Grup 2</div>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
)'/>
Dropdown dan item yang dinonaktifkan.
<div class="nx-dropdown">
<button class="nx-btn-primary">Dropdown Nonaktif</button>
<div class="nx-dropdown-content">
<a href="#">Link 1</a>
<a href="#" class="disabled">Link Nonaktif</a>
<a href="#">Link 3</a>
</div>
</div>
<Dropdown
title="Dropdown Nonaktif"
class=" nx-btn-primary"
items='(
<a href="#">Link 1</a>
<a href="#" class="disabled">Link Nonaktif</a>
<a href="#">Link 3</a>
)'/>
Dokumentasi penggunaan JavaScript untuk mengontrol dropdown.
Tambahkan script berikut untuk mengaktifkan fungsi dropdown dengan klik:
// Inisialisasi dropdown
const nxDropdown = {
init: function() {
// Tambahkan event listener untuk semua tombol dropdown
const dropdownBtns = document.querySelectorAll('.nx-dropdown-toggle');
dropdownBtns.forEach(btn => {
btn.addEventListener('click', this.toggle);
});
// Tutup dropdown saat klik di luar
document.addEventListener('click', this.closeAll);
},
// Toggle dropdown
toggle: function(event) {
event.stopPropagation();
const dropdown = this.nextElementSibling;
dropdown.classList.toggle('show');
},
// Tutup semua dropdown
closeAll: function(event) {
if (!event.target.matches('.nx-dropdown-toggle')) {
const dropdowns = document.querySelectorAll('.nx-dropdown-content');
dropdowns.forEach(dropdown => {
if (dropdown.classList.contains('show')) {
dropdown.classList.remove('show');
}
});
}
}
};
// Inisialisasi saat dokumen dimuat
document.addEventListener('DOMContentLoaded', () => {
nxDropdown.init();
});
Contoh penggunaan dropdown dengan JavaScript:
<div class="nx-dropdown">
<button class="nx-btn-primary nx-dropdown-toggle">Dropdown JavaScript</button>
<div class="nx-dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
Berikut adalah method-method yang tersedia untuk mengontrol dropdown:
// Buka dropdown
nxDropdown.show(dropdownElement);
// Tutup dropdown
nxDropdown.hide(dropdownElement);
// Toggle dropdown
nxDropdown.toggle(dropdownElement);
// Tutup semua dropdown
nxDropdown.hideAll();
Event yang tersedia pada dropdown:
// Event sebelum dropdown dibuka
dropdown.addEventListener('nx.dropdown.show', function(e) {
// Kode yang akan dijalankan sebelum dropdown dibuka
});
// Event setelah dropdown dibuka
dropdown.addEventListener('nx.dropdown.shown', function(e) {
// Kode yang akan dijalankan setelah dropdown dibuka
});
// Event sebelum dropdown ditutup
dropdown.addEventListener('nx.dropdown.hide', function(e) {
// Kode yang akan dijalankan sebelum dropdown ditutup
});
// Event setelah dropdown ditutup
dropdown.addEventListener('nx.dropdown.hidden', function(e) {
// Kode yang akan dijalankan setelah dropdown ditutup
});