Aspect Ratio.
Gunakan src lokal untuk gambar atau text untuk placeholder.
Preview
<?= component('aspect-ratio', ['text' => 'Small, understandable components. Native PHP, ready for the browser.', 'src' => '/assets/designlof-mark.webp', 'alt' => 'DesignLof brand mark', 'ratio' => '1:1']) ?>Usage
Gunakan src lokal untuk gambar atau text untuk placeholder. ratio hanya mendukung 16:9 dan 1:1.
- 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('aspect-ratio', ['text' => 'Small, understandable components. Native PHP, ready for the browser.', 'src' => '/assets/designlof-mark.webp', 'alt' => 'DesignLof brand mark', 'ratio' => '1:1']) ?>Examples
Square
<?= component('aspect-ratio', ['text' => '1 : 1', 'ratio' => '1:1']) ?>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 |
|---|---|---|
text | string | Isi teks biasa; HTML di-escape. |
src | string | URL gambar; gunakan aset lokal agar sesuai CSP default. |
alt | string | Deskripsi alternatif gambar. |
ratio | string | 16:9 atau 1:1 (default 16:9). |
Behavior & accessibility
Isi alt dengan deskripsi gambar bermakna. CSP default membatasi gambar ke origin sendiri dan data URL; helper URL tidak menerima data URL.
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/aspect-ratio.php. Edit template ini jika membutuhkan perilaku tambahan. API PHP DL berbeda dari API React sumber rujukan.
php dl component aspect-ratio