> ## 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.

# Pengenalan gaya kustom

> Bandingkan fitur gaya kustom YiDA di Free plan, Edisi Basic, Edisi Professional, dan Edisi Dedicated. Pelajari properti tata letak CSS seperti padding, margin, dan border untuk mempercantik halaman kustom.

| **Fitur**           | **Free plan**  | **Edisi Basic** | **Edisi Professional** | **Edisi Dedicated** |
| ------------------- | -------------- | --------------- | ---------------------- | ------------------- |
| Gaya halaman kustom | Tidak didukung | Tidak didukung  | Didukung               | Didukung            |

## 1. Ikhtisar

Saat ini, hanya **Tampilan teks kaya**, **Kontainer tata letak**, dan **Komponen grup** yang mendukung pengaturan gaya. Gunakan komponen tersebut untuk menata komponen formulir agar tampilannya lebih rapi.

## 2. Detail fitur

### 2.1 Pengeditan kode sumber

Bila gaya CSS tertentu tidak dapat dikonfigurasi melalui panel pengaturan, gunakan pengeditan kode sumber untuk menulis kode CSS dan mendefinisikan gaya kustom.

Pengeditan kode sumber dan panel pengaturan di sisi kanan selalu tersinkron. Perubahan langsung berlaku, dan suntingan di salah satu sisi otomatis tercermin di sisi lainnya.

Referensi: Cara memodifikasi gaya dan ukuran komponen Teks satu baris

### 2.2 Status default

| **Atribut** | **Deskripsi**                                                            |
| ----------- | ------------------------------------------------------------------------ |
| :active     | Menerapkan gaya pada elemen saat elemen tersebut aktif.                  |
| :focus      | Menerapkan gaya pada elemen saat elemen memperoleh fokus input keyboard. |
| :hover      | Menerapkan gaya pada elemen saat kursor mouse berada di atasnya.         |

### 2.3 Tata letak

#### 2.3.2 Properti padding CSS

| **Properti**                                                              | **Deskripsi**                                                                             |
| ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| [padding](http://www.w3school.com.cn/cssref/pr_padding.asp)               | Properti singkatan. Mengatur seluruh properti padding sebuah elemen dalam satu deklarasi. |
| [padding-bottom](http://www.w3school.com.cn/cssref/pr_padding-bottom.asp) | Mengatur padding bawah sebuah elemen.                                                     |
| [padding-left](http://www.w3school.com.cn/cssref/pr_padding-left.asp)     | Mengatur padding kiri sebuah elemen.                                                      |
| [padding-right](http://www.w3school.com.cn/cssref/pr_padding-right.asp)   | Mengatur padding kanan sebuah elemen.                                                     |
| [padding-top](http://www.w3school.com.cn/cssref/pr_padding-top.asp)       | Mengatur padding atas sebuah elemen.                                                      |

#### 2.3.3 Properti margin CSS

| **Properti**                                                            | **Deskripsi**                                                              |
| ----------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| [margin](http://www.w3school.com.cn/cssref/pr_margin.asp)               | Properti singkatan. Mengatur seluruh properti margin dalam satu deklarasi. |
| [margin-bottom](http://www.w3school.com.cn/cssref/pr_margin-bottom.asp) | Mengatur margin bawah sebuah elemen.                                       |
| [margin-left](http://www.w3school.com.cn/cssref/pr_margin-left.asp)     | Mengatur margin kiri sebuah elemen.                                        |
| [margin-right](http://www.w3school.com.cn/cssref/pr_margin-right.asp)   | Mengatur margin kanan sebuah elemen.                                       |
| [margin-top](http://www.w3school.com.cn/cssref/pr_margin-top.asp)       | Mengatur margin atas sebuah elemen.                                        |

#### 2.3.4 Properti border CSS

| **Properti**                                                                        | Deskripsi                                                                                                                                   |
| ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| [border](http://www.w3school.com.cn/cssref/pr_border.asp)                           | Properti singkatan. Mengatur properti keempat sisi border dalam satu deklarasi.                                                             |
| [border-style](http://www.w3school.com.cn/cssref/pr_border-style.asp)               | Mengatur gaya seluruh border sebuah elemen, atau mengatur gaya border tiap sisi secara terpisah.                                            |
| [border-width](http://www.w3school.com.cn/cssref/pr_border-width.asp)               | Properti singkatan. Mengatur lebar seluruh border sebuah elemen, atau mengatur lebar border tiap sisi secara terpisah.                      |
| [border-color](http://www.w3school.com.cn/cssref/pr_border-color.asp)               | Properti singkatan. Mengatur warna bagian tampak dari seluruh border sebuah elemen, atau mengatur warna untuk keempat sisi secara terpisah. |
| [border-bottom](http://www.w3school.com.cn/cssref/pr_border-bottom.asp)             | Properti singkatan. Mengatur seluruh properti border bawah dalam satu deklarasi.                                                            |
| [border-bottom-color](http://www.w3school.com.cn/cssref/pr_border-bottom_color.asp) | Mengatur warna border bawah sebuah elemen.                                                                                                  |
| [border-bottom-style](http://www.w3school.com.cn/cssref/pr_border-bottom_style.asp) | Mengatur gaya border bawah sebuah elemen.                                                                                                   |
| [border-bottom-width](http://www.w3school.com.cn/cssref/pr_border-bottom_width.asp) | Mengatur lebar border bawah sebuah elemen.                                                                                                  |
| [border-left](http://www.w3school.com.cn/cssref/pr_border-left.asp)                 | Properti singkatan. Mengatur seluruh properti border kiri dalam satu deklarasi.                                                             |
| [border-left-color](http://www.w3school.com.cn/cssref/pr_border-left_color.asp)     | Mengatur warna border kiri sebuah elemen.                                                                                                   |
| [border-left-style](http://www.w3school.com.cn/cssref/pr_border-left_style.asp)     | Mengatur gaya border kiri sebuah elemen.                                                                                                    |
| [border-left-width](http://www.w3school.com.cn/cssref/pr_border-left_width.asp)     | Mengatur lebar border kiri sebuah elemen.                                                                                                   |
| [border-right](http://www.w3school.com.cn/cssref/pr_border-right.asp)               | Properti singkatan. Mengatur seluruh properti border kanan dalam satu deklarasi.                                                            |
| [border-right-color](http://www.w3school.com.cn/cssref/pr_border-right_color.asp)   | Mengatur warna border kanan sebuah elemen.                                                                                                  |
| [border-right-style](http://www.w3school.com.cn/cssref/pr_border-right_style.asp)   | Mengatur gaya border kanan sebuah elemen.                                                                                                   |
| [border-right-width](http://www.w3school.com.cn/cssref/pr_border-right_width.asp)   | Mengatur lebar border kanan sebuah elemen.                                                                                                  |
| [border-top](http://www.w3school.com.cn/cssref/pr_border-top.asp)                   | Properti singkatan. Mengatur seluruh properti border atas dalam satu deklarasi.                                                             |
| [border-top-color](http://www.w3school.com.cn/cssref/pr_border-top_color.asp)       | Mengatur warna border atas sebuah elemen.                                                                                                   |
| [border-top-style](http://www.w3school.com.cn/cssref/pr_border-top_style.asp)       | Mengatur gaya border atas sebuah elemen.                                                                                                    |
| [border-top-width](http://www.w3school.com.cn/cssref/pr_border-top_width.asp)       | Mengatur lebar border atas sebuah elemen.                                                                                                   |

### 2.4 Tampilan

#### 2.4.1 block

Elemen block-level selalu menempati satu baris penuh. Elemen dimulai pada baris baru, dan elemen apa pun setelahnya juga dimulai pada baris baru.

Lebar (**width**), tinggi (**height**), padding (**padding**), dan margin (**margin**) semuanya dapat diatur.

#### 2.4.2 inline-block

Elemen inline-block tampil pada baris yang sama dengan elemen inline di sebelahnya.

Lebar (**width**), tinggi (**height**), padding (**padding**), dan margin (**margin**) semuanya dapat diatur.

#### 2.4.3 inline

Elemen inline tampil pada baris yang sama dengan elemen inline di sebelahnya.

Lebar (**width**), tinggi (**height**), padding atas/bawah (**padding-top/padding-bottom**), serta margin atas/bawah (**margin-top/margin-bottom**) tidak dapat diubah. Ukurannya ditentukan oleh Teks atau Gambar yang dimuatnya.

#### 2.4.4 flex (pengguna non-teknis disarankan menggunakan tata letak kolom)

Tata letak flex adalah cara sederhana, lengkap, dan responsif untuk membangun berbagai Tata letak halaman.

Elemen yang menggunakan tata letak flex disebut kontainer flex. Secara default, sebuah kontainer memiliki dua sumbu: sumbu utama horizontal dan sumbu silang vertikal.

**Direction: row** — Sumbu utama berjalan horizontal, dimulai dari kiri (default).

**Direction: column** — Sumbu utama berjalan horizontal, dimulai dari kanan.

**Direction: row-reverse** — Sumbu utama berjalan vertikal, dimulai dari atas.

**Direction: column-reverse** — Sumbu utama berjalan vertikal, dimulai dari bawah.

**Align: flex-start** — Ratakan item ke awal sumbu silang.

**Align: flex-end** — Ratakan item ke akhir sumbu silang.

**Align: center** — Ratakan item ke tengah sumbu silang.

**Align: baseline** — Ratakan item sepanjang garis dasar baris teks pertama.

**Align: stretch** — Item tanpa tinggi yang ditetapkan atau bernilai auto direntangkan untuk memenuhi tinggi kontainer secara penuh (default).

**Justify: flex-start** — Rata Kiri (default).

**Justify: flex-end** — Rata Kanan.

**Justify: center** — Rata Tengah.

**Justify: space-between** — Ratakan item ke kedua ujung dengan jarak yang sama antar item.

**Justify: space-around** — Beri jarak yang sama pada kedua sisi setiap item.

Catatan: Untuk tutorial rinci, lihat **Tutorial sintaks tata letak Flex**.

### 2.5 Teks

**(1) Font**: Font Teks.

**(2) Weight**: Ketebalan Teks.

**(3) Style**: Gaya Teks (normal atau Miring).

**(4) Color**: Warna Teks.

**(5) Size**: Ukuran Teks.

**(6) Line height**: Tinggi baris yang memuat Teks.

**(7) Align**: Perataan Teks (Rata Kiri, Rata Tengah, Rata Kanan, atau justify).

**(8) Decoration**: Dekorasi Teks (normal, Garis Bawah, atau Coret).

### 2.6 Latar belakang

**(1) Fill color**: Warna latar belakang.

**(2) Image**: Gunakan Gambar sebagai latar belakang.

### 2.7 Border

**(1) Line style**: Gaya garis border (solid, dotted, atau dashed).

**(2) Width**: Lebar border.

**(3) Color**: Warna border.

**(4) Corner radius**: Ukuran sudut lengkung border.

### 2.8 Efek

**(1) Opacity**: Tingkat transparansi elemen. Semakin kecil nilainya, semakin transparan elemen tersebut.

**(2) Cursor**: Gaya Cursor yang ditampilkan saat penunjuk diarahkan ke elemen (pointer atau hand).

### 2.9 Bayangan

**(1) Color**: Warna bayangan.

**(2) X**: Offset horizontal bayangan.

**(3) Y**: Offset vertikal bayangan.

**(4) Blur**: Jarak keburaman bayangan. Nilai yang lebih besar menghasilkan tepi bayangan yang lebih lembut.

**(5) Spread**: Radius sebaran bayangan. Nilai positif memperluas keseluruhan bayangan, sedangkan nilai negatif menyusutkannya.

> Jika dokumen Bantuan di atas tidak menyelesaikan issue Anda, hubungi Xingfudemianhuatang.