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

# Steps

> Referensi komponen Steps di YiDA. Pelajari cara mengonfigurasi item Langkah dan mengontrol status saat ini untuk memandu pengguna menyelesaikan tugas langkah demi langkah.

Bilah navigasi yang memandu pengguna menyelesaikan tugas langkah demi langkah.

## Kapan digunakan

* Ketika sebuah tugas kompleks atau melibatkan serangkaian ketergantungan, bagi menjadi beberapa Langkah untuk menyederhanakannya.

## Contoh komponen

## Properti komponen

| Atribut          | Deskripsi                                        | Tipe                                                                      | Default                                                                                                                                                                                       |
| ---------------- | ------------------------------------------------ | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `animation`      | Apakah animasi diaktifkan                        | `boolean`                                                                 | `true`                                                                                                                                                                                        |
| `contentRender`  | Rendering kustom untuk konten                    | `(item: StepsDataSource, index: number)=> ReactNode`                      | -                                                                                                                                                                                             |
| `current`        | Langkah saat ini                                 | `number`                                                                  | `1`                                                                                                                                                                                           |
| `dataSource`     | Data Langkah                                     | [StepsDataSource\[\]](/id/open/yida/components/interface#stepsdatasource) | `[ { "title": "langkah1", "content": "Buka pintu kulkas" }, { "title": "langkah2", "content": "Masukkan gajah ke dalam kulkas" }, { "title": "langkah3", "content": "Tutup pintu kulkas" } ]` |
| `direction`      | Arah tampilan bilah Langkah                      | `'horizontal' \| 'vertical'`                                              | `'horizontal'`                                                                                                                                                                                |
| `labelPlacement` | Tata letak konten                                | `'horizontal' \| 'vertical'`                                              | `'vertical'`                                                                                                                                                                                  |
| `onClick`        | Peristiwa yang dipicu saat sebuah Langkah diklik | `(index: number) => void`                                                 | -                                                                                                                                                                                             |
| `readOnly`       | Apakah mode Hanya Baca diaktifkan                | `boolean`                                                                 | `false`                                                                                                                                                                                       |
| `shape`          | Tipe tampilan bilah Langkah                      | `'circle' \| 'arrow' \| 'dot'`                                            | `'circle'`                                                                                                                                                                                    |