Scroll Story.
Cerita visual bertahap dengan gambar dan teks yang dapat diedit.
Preview
Architecture, with a point of view
Build a story with photographs and considered details.
ExploreRoom for everyday life
Add an image from the media library to each chapter.
<?= component('scroll-story', []) ?>Usage
Tambahkan melalui kategori Spatial storytelling pada visual editor. Pilih gambar dari Media atau upload langsung; isi judul, deskripsi, caption, dan tautan.
- Gunakan layout DL yang sudah memuat CSS dan dl.js.
- Letakkan kode berikut di view PHP Anda.
- Ganti data contoh dengan nilai aplikasi. Teks di-escape otomatis.
<?= component('scroll-story', []) ?>Examples
Default layout
Architecture, with a point of view
Build a story with photographs and considered details.
ExploreRoom for everyday life
Add an image from the media library to each chapter.
<?= component('scroll-story', []) ?>API reference
Props PHP yang didukung implementasi DL. Field di dalam array mengikuti bentuk pada kolom Type. Props yang tidak dicantumkan tidak menjadi bagian API komponen.
| Prop | Type / values | Panduan |
|---|---|---|
items | array | 1–8 objects: title, text, media_id, alt, meta, href, label. Image must exist in Media; links are validated. |
Behavior & accessibility
Konten tetap tersedia tanpa JavaScript. Mendukung keyboard dan prefers-reduced-motion.
Uji keyboard, fokus, dan pembaca layar pada halaman aplikasi Anda. Contoh ini tidak menggantikan audit aksesibilitas aplikasi secara menyeluruh.
Source & agent context
Source tersedia di views/components/scroll-story.php. Edit template ini jika membutuhkan perilaku tambahan. API PHP DL berbeda dari API React sumber rujukan.
php dl component scroll-story