> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Komponen halaman kustom
> Pelajari komponen halaman kustom di YiDA — konfigurasi, kegunaan, dan penggunaan lanjutan komponen dasar seperti Teks, Gambar, dan Tautan, serta komponen premium seperti Carousel dan Lini Masa.
| **Fitur** | **Paket Luang** | **Edisi Basic** | **Edisi Professional** | **Edisi Dedicated** |
| -------------- | --------------- | --------------- | ---------------------- | ------------------- |
| Halaman kustom | Tidak didukung | Tidak didukung | Didukung | Didukung |
## 1. Pengantar
**Komponen pada halaman kustom memiliki atribut konfigurasi yang lebih kaya dan fleksibel dibandingkan komponen pada halaman formulir. Untuk contoh penggunaan komponen, lihat** [**Developer Center**](/id/open/yida/index)**.**
Komponen pada halaman kustom dikelompokkan ke dalam kategori \[Tata letak], \[Dasar], \[Formulir], \[Premium], dan \[Lainnya]:
### 1.1 Komponen halaman kustom dan kegunaannya
| **Nama komponen** | **Kegunaan** |
| ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Teks](/id/open/yida/components/basic/text) | Menampilkan konten teks. |
| [Gambar](/id/open/yida/components/basic/image) | Menampilkan konten gambar. |
| [Ikon](/id/open/yida/components/basic/icon) | Memilih dari beragam gaya ikon. |
| [Tautan](/id/open/yida/components/basic/link) | Menambahkan URL yang mengarah ke halaman terkait saat diklik. |
| [Blok tautan](/id/open/yida/components/basic/linkBlock) | Komponen kontainer yang memicu navigasi saat elemen apa pun di dalamnya diklik. |
| [Tombol](/id/open/yida/components/basic/button) | Memicu tindakan melalui peristiwa tombol — misalnya, klik tombol untuk mendapatkan waktu saat ini. |
| [Pemutar video](/id/open/yida/components/basic/video) | Memutar video pada halaman dengan beragam opsi pemutaran. |
| [Dialog](/id/open/yida/components/basic/dialog) | Digunakan pada skenario berikut:
• Menampilkan notifikasi kepada pengguna
• Meminta pengguna mengonfirmasi suatu tindakan
• Meminta pengguna menyelesaikan tugas tanpa berpindah halaman dan mengganggu alur kerja |
| [Drawer](/id/open/yida/components/basic/drawer) | Digunakan pada skenario berikut:
• Menampilkan notifikasi kepada pengguna
• Meminta pengguna mengonfirmasi suatu tindakan
• Meminta pengguna menyelesaikan tugas tanpa berpindah halaman dan mengganggu alur kerja |
| [Spreadsheet](/id/open/yida/components/advanced/table) | Menampilkan data dari formulir atau formulir alur kerja dalam bentuk tabel. |
| [HTML](/id/open/yida/components/advanced/HTML) | Memungkinkan pengembangan fitur kustom. Desain halaman memerlukan pengetahuan front-end — minimal pemahaman dasar tentang HTML, CSS, dan JS. |
| [JSX](/id/open/yida/components/advanced/JSX) | Merender komponen yang sepenuhnya kustom menggunakan kode JSX. Umumnya digunakan untuk skenario tampilan saja. |
| [Carousel](/id/open/yida/components/advanced/slider) | Menampilkan beberapa gambar secara berulang dalam mode putaran. |
| [Tooltip balon](/id/open/yida/components/advanced/balloon) | Saat melakukan iterasi data pada halaman kustom, konten yang panjang mungkin terpotong. Gunakan tooltip balon untuk menampilkan konten lengkap ketika kursor diarahkan. |
| Panel ciutkan | Ketika sebuah halaman memiliki terlalu banyak komponen, gunakan panel ciutkan untuk melipatnya dan mengurangi kekacauan tampilan. |
| [Banner bawah](/id/open/yida/components/advanced/bannerContainer) | Menambahkan konten yang ditempatkan di bagian bawah halaman dengan lebar penuh. |
| [Iframe](/id/open/yida/components/advanced/Iframe) | Menyematkan konten dari halaman web lain ke halaman designer saat ini. Umumnya digunakan untuk skenario tampilan saja. |
| [Indikator progres](/id/open/yida/components/advanced/progress) | Menampilkan progres suatu proyek. |
| [Paginasi](/id/open/yida/components/advanced/pagination) | Gunakan komponen ini untuk membagi data yang ditampilkan pada halaman kustom menjadi beberapa halaman. |
| [Cari](/id/open/yida/components/advanced/search) | Saat menggunakan komponen Spreadsheet pada halaman kustom, gunakan komponen Cari untuk menemukan rekam data tertentu. |
| [Filter](/id/open/yida/components/advanced/filter) | Saat menampilkan data dalam tabel kustom, pencarian pada bilah atas hanya dapat memfilter satu kolom. Gunakan komponen Filter untuk mencari di beberapa kolom sekaligus. |
| [Menu](/id/open/yida/components/advanced/menu) | Gunakan halaman kustom sebagai daftar isi, dengan item menu yang mengarah ke halaman lain. |
| [Pohon](/id/open/yida/components/advanced/tree) | Gunakan komponen pohon untuk menjelajahi suatu kategori beserta subkategorinya. |
| [Lini Masa](/id/open/yida/components/advanced/timeLine) | Umumnya digunakan untuk menampilkan riwayat perusahaan atau tonggak penting sebuah proyek. |
| [Langkah](/id/open/yida/components/advanced/steps) | Komponen indikator langkah untuk halaman kustom. Cocok untuk alur multi-langkah seperti input data onboarding karyawan atau registrasi akun, memberikan pengingat progres saat pengisian informasi dasar. |