Téléchargement fluid components - Téléchargement du code source fluid components

fluid components

Composants tiers

3.8.3 generate placeholder images internal

Télécharger

fluid components

Ces extensions TYPO3 permettent aux développeurs frontend de créer des composants encapsulés dans Pure Fluid. En définissant une interface claire (API) pour l'intégration, les développeurs front-end peuvent implémenter des composants indépendants des développeurs back-end. L'objectif est de créer des composants de présentation hautement réutilisables, sans effets secondaires et qui ne sont pas responsables de l'acquisition de données.

TL;DR? Commencez tout de suite

Qu'est-ce que ça fait ?

Les modèles fluides se composent généralement de trois ingrédients :

Modèles ,
Layouts , qui structurent et enveloppent le balisage défini dans le modèle, et
Partials , qui contiennent des extraits de balisage à réutiliser dans différents modèles.

De plus, ViewHelpers fournit des structures de contrôle de base et encapsule un rendu avancé et une manipulation de données qui ne seraient pas possibles autrement. Ils sont définis comme des classes PHP.

L'extension ajoute un autre ingrédient à Fluid : Components .

Que sont les composants ?

fluid components sont similaires à ViewHelpers. La principale différence est qu’ils peuvent être définis uniquement dans Fluid. D'une certaine manière, ils sont assez similaires aux partiels de Fluid, mais ils présentent quelques avantages :

Ils fournissent une interface claire via des paramètres prédéfinis. L'implémentation est encapsulée dans le composant. Vous n'avez pas besoin de savoir ce que fait le composant en interne pour pouvoir l'utiliser.
Avec les noms de composants sémantiques, vos modèles deviennent plus lisibles . Cela devient encore meilleur avec la conception atomique ou des approches similaires.
Ils peuvent facilement être utilisés sur différentes extensions TYPO3 car ils utilisent les espaces de noms de Fluid. Aucun chemin partielRootPath n'est nécessaire.

À quoi ressemblent les composants ?

Le composant suivant implémente un simple élément de carte teaser :

Composants/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 >

Utilisez le code suivant dans votre modèle pour afficher une carte teaser sur TYPO3 :

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

Le résultat est le HTML suivant :

< 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 >

(indentation améliorée pour une meilleure lisibilité)

Commencer

Installez l'extension soit depuis TER, soit via composer :
```
 composer require sitegeist/fluid-components
```

Définissez l'espace de noms du composant dans votre ext_localconf.php :

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

Utilisez votre propre nom de fournisseur pour VENDOR , le nom d'extension pour MyExtension et la clé d'extension pour my_extension .

Créez votre premier composant dans EXT:my_extension/Resources/Private/Components/ en créant un répertoire MyComponent contenant un fichier MyComponent.html
Définissez et appliquez votre composant selon À quoi ressemblent les composants ?. La documentation étendue peut également être utile.
Consultez Fluid Styleguide, un guide de style vivant pour fluid components et fluid components Linter pour améliorer la qualité et la réutilisabilité de vos composants.

Si vous avez des questions, avez besoin d'aide ou souhaitez discuter des composants de TYPO3, n'hésitez pas à rejoindre #ext-fluid_components.

Pourquoi devrais-je utiliser des composants ?

Les composants encouragent la réutilisation et la refactorisation du balisage . Seul le composant connaît les détails de son implémentation. Tant que l'interface reste compatible, l'implémentation peut changer.
Les composants peuvent être un outil pour appliquer les directives de conception . Si l'implémentation du composant respecte les directives, elles sont respectées partout où le composant est utilisé. Un outil utile pour y parvenir est le guide de style de vie correspondant : Fluid Styleguide.
Les composants formalisent et améliorent la communication . Les développeurs et intégrateurs frontend s'accordent sur une interface clairement définie au lieu de débattre des détails de mise en œuvre.
Les composants réduisent les dépendances . Les développeurs front-end peuvent travailler indépendamment des intégrateurs et des développeurs back-end.

Documentation étendue

Références des fonctionnalités

Référence ViewHelper
Structures de données
- Liens et Typolink
- Fichiers et images
- Traductions
- Navigation
- DateHeure
- Machines à sous
Préfixes de composants
Paramètres des composants

Comment faire