Ngorei Doc
Ngorei Doc
Dokumentasi komponen Scrollspy yang dapat digunakan dalam NexaUI framework. Scrollspy memungkinkan Anda untuk melacak posisi scroll dan menyorot item navigasi yang sesuai secara otomatis.
Contoh dasar penggunaan scrollspy dengan data attributes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Vestibulum ac diam sit amet quam vehicula elementum...
Nulla quis lorem ut libero malesuada feugiat...
<nav class="scrollspy-nav" id="navbar-example" data-nx-nav>
<ul class="nx-nav nx-nav-pills nx-flex-column">
<li class="nx-nav-item">
<button class="nx-nav-link" data-nx-scroll-target="section1">Bagian 1</button>
</li>
<li class="nx-nav-item">
<button class="nx-nav-link" data-nx-scroll-target="section2">Bagian 2</button>
</li>
<li class="nx-nav-item">
<button class="nx-nav-link" data-nx-scroll-target="section3">Bagian 3</button>
</li>
</ul>
</nav>
<div class="scrollspy-example" data-nx-spy="scroll" data-nx-custom="true">
<section id="section1" data-nx-section>...</section>
<section id="section2" data-nx-section>...</section>
<section id="section3" data-nx-section>...</section>
</div>
<<div>
</div>
Contoh scrollspy dengan navigasi bersarang (nested navigation).
<div>
</div>
<<div>
</div>
Implementasi scrollspy menggunakan navigasi horizontal di bagian atas.
Contoh navigasi horizontal dengan data attributes untuk scrollspy.
Navigasi horizontal cocok untuk header atau navbar atas.
Menggunakan data-nx-scroll-target untuk navigasi yang lebih fleksibel.
<nav class="nx-navbar scrollspy-nav-horizontal" id="navbar-horizontal" data-nx-nav>
<ul class="nx-nav nx-nav-pills">
<li class="nx-nav-item">
<button class="nx-nav-link" data-nx-scroll-target="horizontal1">Bagian 1</button>
</li>
<li class="nx-nav-item">
<button class="nx-nav-link" data-nx-scroll-target="horizontal2">Bagian 2</button>
</li>
<li class="nx-nav-item">
<button class="nx-nav-link" data-nx-scroll-target="horizontal3">Bagian 3</button>
</li>
</ul>
</nav>
<div class="scrollspy-example" data-nx-spy="scroll" data-nx-custom="true">
<section id="horizontal1" data-nx-section>...</section>
<section id="horizontal2" data-nx-section>...</section>
<section id="horizontal3" data-nx-section>...</section>
</div>
<<div>
</div>
Menggunakan list group dengan data attributes.
Lorem ipsum dolor sit amet...
Sed porttitor lectus nibh...
Curabitur aliquet quam id dui...
Donec sollicitudin molestie...
<div class="nx-list-group-scrollspy" id="list-example" data-nx-nav>
<button class="nx-list-group-item" data-nx-scroll-target="list-item-1">Item 1</button>
<button class="nx-list-group-item" data-nx-scroll-target="list-item-2">Item 2</button>
<button class="nx-list-group-item" data-nx-scroll-target="list-item-3">Item 3</button>
<button class="nx-list-group-item" data-nx-scroll-target="list-item-4">Item 4</button>
</div>
<div class="scrollspy-example" data-nx-spy="scroll" data-nx-custom="true">
<section id="list-item-1" data-nx-section>...</section>
<section id="list-item-2" data-nx-section>...</section>
<section id="list-item-3" data-nx-section>...</section>
<section id="list-item-4" data-nx-section>...</section>
</div>
<<div>
</div>
Implementasi dengan offset menggunakan data attributes.
Konten dengan offset 60px dari atas...
Scrollspy akan mengaktifkan sesuai offset...
Offset membantu menghindari tumpang tindih...
<nav class="scrollspy-offset-nav" id="navbar-offset" data-nx-nav>
<ul class="nx-nav nx-nav-pills">
<li class="nx-nav-item">
<button class="nx-nav-link" data-nx-scroll-target="offset1">Bagian 1</button>
</li>
<li class="nx-nav-item">
<button class="nx-nav-link" data-nx-scroll-target="offset2">Bagian 2</button>
</li>
<li class="nx-nav-item">
<button class="nx-nav-link" data-nx-scroll-target="offset3">Bagian 3</button>
</li>
</ul>
</nav>
<div class="scrollspy-example" data-nx-spy="scroll" data-nx-offset="60">
<section id="offset1" data-nx-section>...</section>
<section id="offset2" data-nx-section>...</section>
<section id="offset3" data-nx-section>...</section>
</div>
<<div>
</div>
Implementasi alternatif scrollspy menggunakan data attributes dan custom events.
Contoh penggunaan data attributes untuk scrollspy tanpa href.
Menggunakan custom events untuk menangani scroll dan aktivasi.
Lebih fleksibel untuk kasus penggunaan khusus.
<nav class="scrollspy-nav" id="custom-nav" data-nx-nav>
<ul class="nx-nav nx-nav-pills nx-flex-column">
<li class="nx-nav-item">
<button class="nx-nav-link" data-nx-scroll-target="section-a">Bagian A</button>
</li>
<li class="nx-nav-item">
<button class="nx-nav-link" data-nx-scroll-target="section-b">Bagian B</button>
</li>
<li class="nx-nav-item">
<button class="nx-nav-link" data-nx-scroll-target="section-c">Bagian C</button>
</li>
</ul>
</nav>
<div class="scrollspy-example" data-nx-spy="scroll">
<section id="section-a" data-nx-section>...</section>
<section id="section-b" data-nx-section>...</section>
<section id="section-c" data-nx-section>...</section>
</div>
<<div>
</div>