Form Pengaturan Tampilan UI pada aplikasi Zayeen digunakan untuk mengubah tampilan visual aplikasi tanpa memengaruhi data maupun proses bisnis. Seluruh pengaturan pada halaman ini bersifat personal atau berbasis perusahaan, tergantung konfigurasi sistem, dan akan langsung memengaruhi pengalaman pengguna saat menggunakan aplikasi.

Tema Warna

Pada bagian Tema Warna, pengguna dapat memilih skema warna utama aplikasi. Tema ini akan mengubah warna header, tombol, ikon, dan elemen antarmuka lainnya.

Tombol Kelola Tema Warna digunakan untuk membuat atau mengedit tema khusus, misalnya menyesuaikan warna aplikasi dengan identitas visual perusahaan.

Layout Builder

Layout Builder berfungsi untuk mengatur posisi dan perilaku elemen utama aplikasi seperti Header, Footer, Sidebar kiri, Sidebar kanan, dan area konten.

Pengguna dapat memilih apakah elemen tertentu bersifat tetap (fixed), mengambang (overlay), atau mengikuti scroll halaman. Pengaturan ini sangat berguna untuk menyesuaikan tampilan antara layar besar dan perangkat mobile.

Header dan Footer

Opsi Header Reveal dan Footer Reveal memungkinkan header atau footer muncul dan menghilang secara dinamis saat halaman di-scroll.

Pengaturan Separator Type menentukan gaya pemisah antara header/footer dengan konten utama, seperti tampilan datar atau berbayang (elevated).

Left Side dan Right Side

Bagian ini mengatur perilaku sidebar kiri dan kanan aplikasi. Mode Overlay membuat sidebar muncul di atas konten, sedangkan opsi Show in Wide Screen memastikan sidebar selalu tampil pada layar berukuran besar.

Opsi Behavior menentukan apakah sidebar bersifat normal, menyempit, atau tersembunyi secara otomatis.

Input Style dan Mode

Pada bagian Input Style, pengguna dapat melihat contoh tampilan field input seperti text box dan dropdown. Ini membantu pengguna memahami efek visual sebelum memilih gaya tertentu.

Input Style Mode menentukan bentuk dan karakter input, seperti Outlined, Filled, Rounded, atau Borderless. Pengaturan ini memengaruhi seluruh form di aplikasi.

Dropdown Animation

Dropdown Animation digunakan untuk mengatur animasi saat menu dropdown ditampilkan dan disembunyikan. Contohnya animasi scale atau fade untuk transisi yang lebih halus.

Button Style

Bagian Button Style digunakan untuk memilih gaya tombol secara global. Pengguna dapat memilih tombol datar, rounded, outline, atau dengan efek bayangan.

Area Button Demo menampilkan contoh tombol secara langsung sehingga pengguna dapat melihat hasilnya sebelum menyimpan perubahan.

Style Kustom (CSS)

Pada bagian Style Kustom, pengguna tingkat lanjut dapat menambahkan kode CSS sendiri untuk menyesuaikan tampilan aplikasi secara lebih spesifik.

Contoh penggunaan:

.custom1 {
  color: #ff0000;
  text-shadow: 2px 2px #ff0000;
}
        

Menyimpan Perubahan

Setelah semua pengaturan selesai, klik tombol Simpan di bagian bawah halaman untuk menerapkan perubahan. Sistem akan langsung menerapkan tampilan baru tanpa perlu memuat ulang halaman.