Unduhan fluid components - pengunduhan kode sumber fluid components

fluid components

Komponen pihak ketiga

3.8.3 generate placeholder images internal

Unduh

fluid components

Ekstensi TYPO3 ini menempatkan pengembang frontend pada posisi untuk membuat komponen yang dienkapsulasi dalam Fluid murni. Dengan mendefinisikan antarmuka (API) yang jelas untuk integrasi, pengembang frontend dapat mengimplementasikan komponen yang independen dari pengembang backend. Tujuannya adalah untuk membuat komponen presentasi yang sangat dapat digunakan kembali yang tidak memiliki efek samping dan tidak bertanggung jawab atas akuisisi data.

TL;DR? Mulailah segera

Apa fungsinya?

Templat cair biasanya terdiri dari tiga bahan:

Templat ,
Tata letak , yang menyusun dan membungkus markup yang ditentukan dalam templat, dan
Parsial , yang berisi cuplikan markup untuk digunakan kembali di templat berbeda.

Selain itu, ViewHelpers menyediakan struktur kontrol dasar dan merangkum rendering tingkat lanjut dan manipulasi data yang tidak mungkin dilakukan jika tidak dilakukan. Mereka didefinisikan sebagai kelas PHP.

Ekstensi menambahkan bahan lain ke Fluid: Components .

Apa itu komponen?

fluid components mirip dengan ViewHelpers. Perbedaan utamanya adalah mereka hanya dapat didefinisikan dalam Fluid. Di satu sisi, mereka sangat mirip dengan parsial Fluid, namun mereka memiliki beberapa keunggulan:

Mereka menyediakan antarmuka yang jelas melalui parameter yang telah ditentukan sebelumnya. Implementasinya dirangkum dalam komponen. Anda tidak perlu mengetahui apa yang dilakukan komponen secara internal untuk dapat menggunakannya.
Dengan nama komponen semantik, templat Anda menjadi lebih mudah dibaca . Ini menjadi lebih baik dengan desain atom atau pendekatan serupa.
Mereka dapat dengan mudah digunakan di berbagai ekstensi TYPO3 karena menggunakan namespace Fluid. Tidak diperlukan parsialRootPath .

Bagaimana tampilan komponennya?

Komponen berikut mengimplementasikan elemen kartu teaser sederhana:

Komponen/TeaserCard/TeaserCard.html

< fc : component >
    < fc : param name = " title " type = " string " />
    < fc : param name = " link " type = " Typolink " />
    < fc : param name = " icon " type = " string " optional = " 1 " />
    < fc : param name = " theme " type = " string " optional = " 1 " default = " light " />

    < fc : renderer >
        < a href = " {link} " class = " {component.class} {component.class}-{theme} " >
            < h3 class = " {component.prefix}title " >{title}</ h3 >
            < f : if condition = " {content} " >
                < p class = " {component.prefix}description " >< fc : slot /></ p >
            </ f : if >

            < f : if condition = " {icon} " >
                < i class = " icon icon-{icon} {component.prefix}icon " ></ i >
            </ f : if >
        </ a >
    </ fc : renderer >
</ fc : component >

Gunakan kode berikut di template Anda untuk merender kartu teaser tentang TYPO3:

{namespace my=VENDORMyExtensionComponents}
< my : teaserCard
    title = " TYPO3 "
    link = " https://typo3.org "
    icon = " typo3 "
>
    The professional, flexible Content Management System
</ my : teaserCard >

Hasilnya adalah HTML berikut:

< a href = " https://typo3.org " class = " smsExampleTeaserCard smsExampleTeaserCard-light " >
    < h3 class = " smsExampleTeaserCard_title " >TYPO3</ h3 >
    < p class = " smsExampleTeaserCard_description " >The professional, flexible Content Management System</ p >

    < i class = " icon icon-typo3 smsExampleTeaserCard_icon " ></ i >
</ a >

(peningkatan lekukan agar lebih mudah dibaca)

Memulai

Instal ekstensi baik dari TER atau melalui composer:
```
 composer require sitegeist/fluid-components
```

Tentukan namespace komponen di ext_localconf.php Anda:

 $ GLOBALS [ ' TYPO3_CONF_VARS ' ][ ' EXTCONF ' ][ ' fluid_components ' ][ ' namespaces ' ][ ' VENDOR \ MyExtension \ Components ' ] =
	 TYPO3  CMS  Core  Utility ExtensionManagementUtility:: extPath ( ' my_extension ' , ' Resources/Private/Components ' );

Gunakan nama vendor Anda sendiri untuk VENDOR , nama ekstensi untuk MyExtension , dan kunci ekstensi untuk my_extension .

Buat komponen pertama Anda di EXT:my_extension/Resources/Private/Components/ dengan membuat direktori MyComponent yang berisi file MyComponent.html
Tentukan dan terapkan komponen Anda berdasarkan Bagaimana tampilan komponen?. Dokumentasi yang Diperluas juga dapat membantu.
Lihat Fluid Styleguide, panduan gaya hidup untuk fluid components , dan Linter fluid components untuk meningkatkan kualitas dan penggunaan kembali komponen Anda.

Jika Anda memiliki pertanyaan, memerlukan dukungan atau ingin mendiskusikan komponen di TYPO3, silakan bergabung dengan #ext-fluid_components.

Mengapa saya harus menggunakan komponen?

Komponen mendorong penggunaan kembali markup dan pemfaktoran ulang . Hanya komponen yang mengetahui detail implementasinya. Selama antarmuka tetap kompatibel, implementasinya dapat berubah.
Komponen dapat menjadi alat untuk menegakkan pedoman desain . Jika penerapan komponen mematuhi pedoman, maka penerapannya akan dihormati di mana pun komponen tersebut digunakan. Alat yang berguna untuk mencapai hal tersebut adalah panduan gaya hidup yang sesuai: Fluid Styleguide.
Komponen memformalkan dan meningkatkan komunikasi . Pengembang dan integrator frontend menyetujui antarmuka yang jelas daripada memperdebatkan detail implementasi.
Komponen mengurangi ketergantungan . Pengembang frontend dapat bekerja secara independen terhadap integrator dan pengembang backend.

Dokumentasi yang Diperluas

Referensi Fitur

Referensi ViewHelper
Struktur Data
- Tautan dan Typolink
- File dan Gambar
- Terjemahan
- Navigasi
- TanggalWaktu
- slot
Awalan Komponen
Pengaturan Komponen

Bagaimana caranya