Text ribbon.
A looping highlight strip with focus/hover pause and reduced-motion support.
Preview
<?= component('text-ribbon', ['items' => [['title' => 'Thoughtful spaces'], ['title' => 'Personal welcomes'], ['title' => 'Room to explore']]]) ?>Usage
Load page-layout.css and cms-layout-widgets.js. Find Text ribbon under Hospitality & highlights in the visual editor. All text remains escaped and editable. Bybook uses an oversized angled sage strip with alternating solid and outline type.
- 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('text-ribbon', ['items' => [['title' => 'Thoughtful spaces'], ['title' => 'Personal welcomes'], ['title' => 'Room to explore']]]) ?>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 of 1–12 data objects | Use the example structure. Values are validated and text escaped. |
Behavior & accessibility
Hover or focus pauses motion. The Pause/Resume button preserves the visitor choice after leaving the ribbon. Reduced motion displays the full text as a static wrapping list and hides the decorative duplicate. Decorative DL icons have no accessible text.
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/text-ribbon.php. Edit template ini jika membutuhkan perilaku tambahan. API PHP DL berbeda dari API React sumber rujukan.
php dl component text-ribbon