Components in Fluid

01_ComponentsInFluid.md

Components in Fluid

Folder structure

• Resources/Private/Components
  • UserProfile
    • Assets
      • avatar-max.jpg
      • avatar-erika.jpg
    • UserProfile.css
    • UserProfile.html
    • UserProfile.js

02_List.html

<f:for each="{users}" as="user">
	<myExtension:userProfile
		name="{user.name}"
		link="{f:uri.action(action: 'profile', arguments: { user: user })}"
		avatar="{f:image(image: user.avatar)}"
	/>
</f:for>

03_UserProfile.html

<fc:component name="userProfile">
	<!-- Component data structure and default values -->
	<fc:param name="name" type="string" />
	<fc:param name="link" type="string" optional="1">https://example.com/erika-mustermann</fc:param>
	<fc:param name="avatar" type="string" optional="1">
		<img src="http://via.placeholder.com/350x150" alt="alternative text" />
	</fc:param>

	<!-- Component markup -->
	<fc:renderer>
		<div class="{component.prefix}">
			<f:if condition="{link}">
				<f:then>
					<a href="{link}" class="{component.prefix}__name">{name}</a>
				</f:then>
				<f:else>
					<span class="{component.prefix}__name">{name}</span>
				</f:else>
			</f:if>

			<f:if condition="{avatar}">
				<div class="{component.prefix}__avatar">
					<f:format.raw>{avatar}</f:format.raw>
				</div>
			</f:if>
		</div>
	</fc:renderer>
</fc:component>

04_UserProfile_Styleguide.html

<fc:component name="userProfile">
	<!-- Component metadata (Styleguide: Stage 2) -->
	<fcstyle:title>User Profile</fcstyle:title>
	<fcstyle:description>This component displays a user profile</fcstyle:description>
	<fcstyle:author email="praetorius@sitegeist.de">Simon Praetorius</fcstyle:author>
	<fcstyle:license>GPL-3.0-or-later</fcstyle:license>
	
	<!-- Example data (Styleguide: Stage 2) -->
	<fcstyle:mock name="male">
		<fcstyle:mock.param name="name">Max Mustermann</fcstyle:mock.param>
		<fcstyle:mock.param name="link">https://example.com/max-mustermann</fcstyle:mock.param>
		<fcstyle:mock.param name="avatar">Assets/avatar-max.jpg</fcstyle:mock.param>
	</fcstyle:mock>
	
	<!-- see above -->
</fc:component>

05_UserProfile_CssModules.html

<fc:component name="userProfile">
	<!-- Component assets (CSS Modules: Stage 3) -->
	<fc:style file="UserProfile.css" />
	<fc:script file="UserProfile.js" />
	
	<!-- see above -->
</fc:component>