fluid components -Download - fluid components -Quellcode-Download

fluid components

Komponenten von Drittanbietern

3.8.3 generate placeholder images internal

Herunterladen

fluid components

Diese TYPO3-Erweiterung versetzt Frontend-Entwickler in die Lage, gekapselte Komponenten in reinem Fluid zu erstellen. Durch die Definition einer klaren Schnittstelle (API) für die Integration können Frontend-Entwickler Komponenten unabhängig von Backend-Entwicklern implementieren. Das Ziel besteht darin, hoch wiederverwendbare Präsentationskomponenten zu erstellen, die keine Nebenwirkungen haben und nicht für die Datenerfassung verantwortlich sind.

TL;DR? Legen Sie gleich los

Was macht es?

Fluidvorlagen bestehen normalerweise aus drei Zutaten:

Vorlagen ,
Layouts , die das in der Vorlage definierte Markup strukturieren und umschließen, und
Partials , die Markup-Snippets zur Wiederverwendung in verschiedenen Vorlagen enthalten.

Darüber hinaus stellen ViewHelper grundlegende Kontrollstrukturen bereit und kapseln erweiterte Rendering- und Datenmanipulationen, die sonst nicht möglich wären. Sie sind als PHP-Klassen definiert.

Die Erweiterung fügt Fluid eine weitere Zutat hinzu: Components .

Was sind Komponenten?

fluid components ähneln ViewHelpers. Der Hauptunterschied besteht darin, dass sie ausschließlich in Fluid definiert werden können. In gewisser Weise sind sie den Teiltönen von Fluid ziemlich ähnlich, haben aber einige Vorteile:

Sie stellen über vordefinierte Parameter eine übersichtliche Schnittstelle zur Verfügung. Die Implementierung ist in der Komponente gekapselt. Sie müssen nicht wissen, was die Komponente intern tut, um sie verwenden zu können.
Mit semantischen Komponentennamen werden Ihre Vorlagen besser lesbar . Dies wird mit Atomic Design oder ähnlichen Ansätzen noch besser.
Sie können problemlos über verschiedene TYPO3-Erweiterungen hinweg verwendet werden, da sie die Namespaces von Fluid nutzen. Kein PartialRootPath erforderlich.

Wie sehen Komponenten aus?

Die folgende Komponente implementiert ein einfaches Teaserkartenelement:

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

Verwenden Sie den folgenden Code in Ihrer Vorlage, um eine Teaser-Karte zu TYPO3 zu rendern:

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

Das Ergebnis ist der folgende HTML-Code:

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

(verbesserte Einrückung für bessere Lesbarkeit)

Erste Schritte

Installieren Sie die Erweiterung entweder von TER oder über Composer:
```
 composer require sitegeist/fluid-components
```

Definieren Sie den Komponenten-Namespace in Ihrer 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 ' );

Verwenden Sie Ihren eigenen Anbieternamen für VENDOR , den Erweiterungsnamen für MyExtension und den Erweiterungsschlüssel für my_extension .

Erstellen Sie Ihre erste Komponente in EXT:my_extension/Resources/Private/Components/, indem Sie ein Verzeichnis MyComponent erstellen, das eine Datei MyComponent.html enthält
Definieren und wenden Sie Ihre Komponente gemäß „Wie sehen Komponenten aus?“ an. Auch die erweiterte Dokumentation kann hilfreich sein.
Schauen Sie sich Fluid Styleguide an, einen lebendigen Styleguide für fluid components , und fluid components Linter, um die Qualität und Wiederverwendbarkeit Ihrer Komponenten zu verbessern.

Wenn Sie Fragen haben, Unterstützung benötigen oder über Komponenten in TYPO3 diskutieren möchten, melden Sie sich gerne bei #ext-fluid_components an.

Warum sollte ich Komponenten verwenden?

Komponenten fördern die Wiederverwendung und Umgestaltung von Markups . Nur die Komponente kennt ihre Implementierungsdetails. Solange die Schnittstelle kompatibel bleibt, kann sich die Implementierung ändern.
Komponenten können ein Werkzeug zur Durchsetzung von Designrichtlinien sein. Wenn die Implementierung der Komponente die Richtlinien respektiert, werden diese überall dort eingehalten, wo die Komponente verwendet wird. Ein hilfreiches Tool hierfür ist der dazugehörige Living Styleguide: Fluid Styleguide.
Komponenten formalisieren und verbessern die Kommunikation . Frontend-Entwickler und Integratoren einigen sich auf eine klar definierte Schnittstelle, anstatt über Implementierungsdetails zu diskutieren.
Komponenten reduzieren Abhängigkeiten . Frontend-Entwickler können unabhängig von Integratoren und Backend-Entwicklern arbeiten.

Erweiterte Dokumentation

Funktionsreferenzen

ViewHelper-Referenz
Datenstrukturen
- Links und Typolink
- Dateien und Bilder
- Übersetzungen
- Navigationen
- DatumUhrzeit
- Spielautomaten
Komponentenpräfixe
Komponenteneinstellungen

Anleitungen