fluid componentsのダウンロード - fluid componentsソースコードのダウンロード

fluid components

サードパーティ製コンポーネント

3.8.3 generate placeholder images internal

ダウンロード

fluid components

この TYPO3 拡張機能により、フロントエンド開発者は純粋な Fluid でカプセル化されたコンポーネントを作成できるようになります。統合用の明確なインターフェイス (API) を定義することで、フロントエンド開発者はバックエンド開発者から独立してコンポーネントを実装できます。目標は、副作用がなく、データ取得を担当しない、再利用性の高いプレゼンテーションコンポーネントを作成することです。

TL;DR?今すぐ始めましょう

それは何をするのですか？

流体テンプレートは通常、次の 3 つの要素で構成されます。

テンプレート、
レイアウト: テンプレートで定義されたマークアップを構造化してラップします。
Partials : さまざまなテンプレートで再利用されるマークアップスニペットが含まれます。

さらに、 ViewHelpers は基本的な制御構造を提供し、他の方法では不可能な高度なレンダリングとデータ操作をカプセル化します。これらは PHP クラスとして定義されます。

この拡張機能は、別のコンポーネントを Fluid: Componentsに追加します。

コンポーネントとは何ですか?

fluid components ViewHelpers に似ています。主な違いは、Fluid 内でのみ定義できることです。ある意味、これらは Fluid のパーシャルに非常に似ていますが、いくつかの利点があります。

事前定義されたパラメータを介して明確なインターフェイスを提供します。実装はコンポーネント内にカプセル化されます。コンポーネントを使用するために、コンポーネントが内部で何をしているのかを知る必要はありません。
セマンティックコンポーネント名を使用すると、テンプレートがより読みやすくなります。これは、アトミックデザインまたは同様のアプローチを使用するとさらに改善されます。
これらは Fluid の名前空間を利用しているため、さまざまな TYPO3 拡張機能間で簡単に使用できます。部分ルートパスは必要ありません。

コンポーネントはどのように見えますか?

次のコンポーネントは、単純なティーザーカード要素を実装します。

コンポーネント/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 >

テンプレートで次のコードを使用して、TYPO3 に関するティーザーカードをレンダリングします。

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

結果は次の HTML になります。

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

(読みやすくするためにインデントを改善しました)

はじめる

TER またはコンポーザー経由で拡張機能をインストールします。
```
 composer require sitegeist/fluid-components
```

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 ' );

VENDORには独自のベンダー名を、 MyExtensionには拡張名を、 my_extensionには拡張キーを使用します。

ファイルMyComponent.htmlを含むディレクトリMyComponentを作成して、 EXT:my_extension/Resources/Private/Components/に最初のコンポーネントを作成します。
「コンポーネントはどのように見えますか?」に従ってコンポーネントを定義して適用します。拡張ドキュメントも役立ちます。
コンポーネントの品質と再利用性を向上させるには、 fluid componentsの生きたスタイルガイドである Fluid Styleguide とfluid componentsリンターを確認してください。

質問がある場合、サポートが必要な場合、または TYPO3 のコンポーネントについて議論したい場合は、お気軽に #ext-fluid_components に参加してください。

なぜコンポーネントを使用する必要があるのですか?

コンポーネントはマークアップの再利用とリファクタリングを促進します。コンポーネントだけがその実装の詳細を知っています。インターフェイスの互換性が維持される限り、実装は変更される可能性があります。
コンポーネントは、設計ガイドラインを強制するツールとなり得ます。コンポーネントの実装がガイドラインを尊重している場合、コンポーネントが使用されるすべての場所でガイドラインが尊重されます。それを達成するのに役立つツールが、対応するリビングスタイルガイドである Fluid Styleguide です。
コンポーネントはコミュニケーションを形式化し、改善します。フロントエンド開発者とインテグレータは、実装の詳細について議論するのではなく、明確に定義されたインターフェイスについて合意します。
コンポーネントは依存関係を減らします。フロントエンド開発者は、インテグレーターやバックエンド開発者から独立して作業できます。