Messaging/Spotlight (AppSpotlight)
Spotlight (AppSpotlight)
● Needs Review Web Nuxt 4 + Mobile React Native
Dialog pengenalan fitur baru (Onboarding Tour Highlight) khas Atlassian untuk memandu siswa memahami navigasi CAT atau fitur evaluasi AI.
<AppSpotlight title="…" step="Langkah 2 dari 4" @next="…" @dismiss="…" />
Tur Bertahap
Spotlight dipakai untuk memperkenalkan satu fitur per kartu, dirangkai jadi tur beberapa langkah lewat prop step ("Langkah 2 dari 4") dan event next. Selalu beri jalan keluar ("Lewati Tur") di setiap langkah — jangan memaksa pengguna menyelesaikan seluruh tur untuk bisa menutupnya, karena ini adalah pengenalan opsional, bukan langkah wajib alur inti.
Spotlight Highlight Playground
Langkah 2 dari 4
Tombol Ragu-Ragu CAT
Gunakan tombol bendera ini jika kamu belum yakin dengan jawaban pilihan ganda, sehingga nomor soal akan ditandai warna kuning di navigasi.
Props & API Reference
3 properties| Property | Type | Default | Deskripsi |
|---|---|---|---|
| isOpen | boolean | true | Mengontrol render kartu spotlight (v-if internal). |
| title * | string | — | Nama fitur yang sedang disorot. |
| step | string | 'Langkah 1 dari 3' | Label progres tur, ditulis bebas (mis. "Langkah 2 dari 4"). |
Events & Emits API
2 events| Event Name | Payload Type | Deskripsi |
|---|---|---|
| next | void | Dipicu saat tombol "Lanjut" ditekan — pindah ke langkah tur berikutnya. |
| dismiss | void | Dipicu saat "✕" atau "Lewati Tur" ditekan — menutup seluruh tur. |
Slots API
1 slots| Slot Name | Scoped Props | Deskripsi |
|---|---|---|
| #default | — | Kalimat penjelasan fitur yang disorot, ditampilkan di bawah judul. |