Page Screens

Screens adalah komponen layout NexaUI yang memungkinkan Anda membuat tata letak halaman dengan navigasi dan konten dinamis. Komponen ini bekerja sama dengan StackRoute untuk mengelola konten dan require untuk navigasi.

Penggunaan Dasar

Struktur Dasar

<Screens class="nx-row" active="esensial">
    <div class="nx-col-2">
        <div require="doc/esensial/navigasi"></div>
    </div>
    <div class="nx-col-8 pl-110px">
        <StackRoute setcall="esensial/intro"/>
    </div>
</Screens>

Struktur File

public/
├── doc/
│   ├── esensial/
│   │   ├── navigasi.html      # File navigasi
│   │   ├── intro.html         # Konten intro
│   │   └── other-content.html # Konten lainnya
│   └── other-sections/
└── index.html

Implementasi Lengkap

Layout Utama (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Documentation</title>
    <link rel="stylesheet" href="assets/css/nexa.css">
</head>
<body>
    <Nexa module="(require,StackRoute)" from="Tatiye" />
    <Screens class="nx-row" active="esensial">
        <!-- Sidebar Navigation -->
        <div class="nx-col-2">
            <div require="doc/esensial/navigasi"></div>
        </div>
        <!-- Main Content -->
        <div class="nx-col-8 pl-110px">
            <StackRoute setcall="esensial/intro"/>
        </div>
    </Screens>
</body>
</html>

File Navigasi (doc/esensial/navigasi.html)

<nav class="sidebar-nav">
    <ul>
        <li><a href="#/intro">Pengenalan</a></li>
        <li><a href="#/getting-started">Memulai</a></li>
        <li><a href="#/features">Fitur</a></li>
    </ul>
</nav>

Grid System

Screens menggunakan sistem grid NexaUI:

nx-row: Container baris
nx-col-2: Kolom dengan lebar 2/12
nx-col-8: Kolom dengan lebar 8/12
pl-110px: Padding left 110px