design_services NXVisual (Studio Style) — Panduan Penggunaan
NXVisual adalah alat desain visual (drag-and-drop page builder) untuk membuat halaman HTML langsung di NxCode. Anda bisa merancang tata letak, menambahkan komponen, mengatur gaya, melihat pratinjau di berbagai ukuran layar, dan mengekspor kode (HTML, JS, React).
Cara Membuka
- Buka panel Extensions di sidebar kiri.
- Cari dan buka ekstensi NXVisual (Studio Style).
- Panel Builder akan terbuka di tab editor.
Tampilan Utama
| Area | Lokasi | Fungsi |
|---|---|---|
| Toolbar | Paling atas | Mode (Design / Tree / Preview), Undo/Redo |
| Sidebar Library | Panel kiri | Daftar komponen yang bisa di-drag |
| Canvas | Tengah | Area kerja visual / Tree view |
| Properties | Panel kanan | Edit properti komponen yang dipilih |
| Project Panel | Panel kanan (bawah) | Kelola halaman, aset, simpan proyek |
| Code Panel | Bawah canvas | Lihat kode HTML, JS Object, JSX React |
Mode Tampilan
Design View
Kanvas visual untuk mendesain halaman secara langsung. Komponen di-render seperti tampilan asli di browser. Klik komponen untuk memilih, lalu edit propertinya di panel kanan.
Tree View
Tampilan pohon hierarki komponen. Cocok untuk melihat struktur halaman secara keseluruhan dan memindahkan komponen dengan drag-and-drop.
Preview
Pratinjau halaman dengan berbagai opsi: Visual, HTML, JS Object, JSX React.
Menambahkan Komponen
| Grup | Komponen Contoh |
|---|---|
| Layout | Container, Row, Col, Section, Hero, Footer |
| Navigation | Navbar, Sidenav, Pagination |
| Content | Heading, Paragraph, Image, Icon |
| Components | Button, Card, Modal, Accordion, Alert, Toast, Tooltip |
| Labels | Badge, Counter, Branch |
| Form | Form, Input, Textarea, Select, Checkbox, Radio, Input Group |
| Structure | Table, Form Group, Form Actions |
| UI | Avatar, Loader, Close Button, Select Menu |
| Presets | Template siap pakai (Login Form, Navbar, Hero, Card, Footer, dll.) |
Cara menambahkan: Klik nama komponen di sidebar, atau Drag-and-drop ke canvas.
Memilih & Mengedit Komponen
Di Design View
- Klik komponen di canvas untuk memilihnya.
- Klik dua kali pada teks untuk mengedit langsung (inline editing).
- Klik kanan untuk menu konteks (Cut, Copy, Paste, Duplicate, Delete, Wrap, Replace, Lock, Hide).
Float Toolbar (saat komponen dipilih)
- ↑ / ↓ — Pindah naik/turun
- ✎ — Edit teks
- ⧉ — Duplikat
- ▣ — Bungkus dalam Container
- 👁 — Sembunyikan/Tampilkan
- 🗑 — Hapus
Panel Properties (Kanan)
Content Tab
Atur teks, tag HTML, placeholder, type input, source gambar, dan pilih ikon (Material Symbols, Material Icons, Octicons, Font Awesome).
Style Tab
Atur inline style (padding, border radius, min/max width, height), tipografi (font weight, line height, font family), border, flex gap, dan warna (foreground, background, border color).
Manajemen Proyek
NXVisual mendukung proyek multi-halaman.
| Tombol | Fungsi |
|---|---|
| ＋ (Note Add) | Buat proyek baru |
| ⎋ (Folder Open) | Buka proyek dari folder |
| 💾 (Save) | Simpan proyek ke disk |
Di section Pages: tambah halaman baru, klik untuk beralih, ⌂ set sebagai home, ✎ rename, ✕ hapus.
Pratinjau & Ekspor
Pratinjau Visual — Ukuran Layar
| Tombol | Ukuran |
|---|---|
| 🖥 Desktop | Full width |
| 📟 Tablet Portrait | 768×1024 |
| 📟 Tablet Landscape | 1024×768 |
| 📱 Mobile Portrait | 390×844 |
| 📱 Mobile Landscape | 844×390 |
Ekspor File
Saat menyimpan proyek, NXVisual menghasilkan: file HTML per halaman, file JavaScript companion, file JSX React, dan file CSS stylesheet per halaman.
Undo / Redo & Pintasan Keyboard
| Pintasan | Fungsi |
|---|---|
| Ctrl+S | Simpan proyek |
| Ctrl+Z | Undo |
| Ctrl+Y / Ctrl+Shift+Z | Redo |
| Delete | Hapus komponen (di Tree View) |