Section #Id

Struktur HTML

Struktur HTML section digunakan untuk membuat bagian-bagian yang dapat dipertukarkan dalam halaman.

<!-- Parent View -->
<section id="index" [true]>
    <div>
        <h4>Child 1</h4>
    </div>
</section>

  <section id="Child2">
    <div>
        <h4>Child 2</h4>
    </div>
</section>  

Penjelasan Detail:

• Struktur Dasar
  • Tag section sebagai container utama
  • Atribut id untuk identifikasi unik
  • Atribut true untuk tampilan awal
  • data-section untuk child views
  • Mendukung nested views hingga beberapa level
  • Otomatis menangani visibilitas child views
  • Terintegrasi dengan sistem routing
• Penggunaan Atribut
  • id: Harus unik untuk setiap section
  • true: Mengatur tampilan default saat load
  • data-section: Menandai child view sections
  • class: Untuk styling tambahan jika diperlukan

Struktur Navigasi

Navigasi section menggunakan sistem URL berbasis hash yang memungkinkan deep-linking dan browser history. Format navigasi mendukung hierarki parent-child untuk kemudahan akses ke berbagai level konten.

<!-- Parent Menu -->
<ul>
    <li><a href="#index">Child Menu 1</a></li>
    <li><a href="#child2">Child Menu 2</a></li>
</ul>

Penjelasan Detail:

• Navigasi
  • Struktur menu bertingkat
  • Format URL dengan hash (#)
  • Nested navigation support
  • Automatic state tracking

Perilaku Tampilan

section memiliki perilaku tampilan yang intuitif dengan kemampuan menampilkan konten secara dinamis berdasarkan interaksi pengguna. Sistem ini mendukung navigasi bertingkat dan penyimpanan state otomatis.

• Perilaku Default
  • Klik parent menu: Menampilkan semua child sections
  • Klik child menu: Menampilkan hanya section yang dipilih
  • State tersimpan di URL (hash) dan IndexedDB
  • Mendukung browser back/forward navigation

State Management

Sistem manajemen state section menyediakan mekanisme untuk melacak dan mempertahankan status tampilan. Informasi state disimpan dalam format yang terstruktur dan dapat diakses melalui API yang disediakan.

const nexaUi = new Ngorei().Components();
nexaUi.SectionId()

Penjelasan Detail:

• State Management
  • Tracking view aktif
  • Persistensi state via URL
  • History management
  • Parameter handling

Implementasi

Contoh implementasi lengkap section dalam skenario nyata. Bagian ini mendemonstrasikan penggunaan section untuk manajemen database, termasuk navigasi antar halaman konfigurasi dan manajemen tabel.

<!-- Parent Menu -->
<ul>
    <li><a href="#index">Child Menu 1</a></li>
    <li><a href="#child2">Child Menu 2</a></li>
</ul>

<!-- Parent View -->
<section id="index" [true]>
    <div>
        <h4>Child 1</h4>
    </div>
</section>
<section id="Child2">
    <div>
        <h4>Child 2</h4>
    </div>
</section>  

Advance Atribut path

Contoh implementasi section path dalam skenario nyata. Bagian ini mendemonstrasikan penggunaan section untuk menavigasi antar halaman dari path yang berbeda.

<!-- Parent Menu -->
<ul>
    <li><a href="#Child3">Child Menu Path</a></li>
</ul>

<!-- Parent View -->
<section 
  id="Child3"
  path="exsampel/page/data.html">
</section>