Descarga fluid components - fluid components Descarga del código fuente

fluid components

Componentes de terceros

3.8.3 generate placeholder images internal

Descargar

fluid components

Esta extensión TYPO3 permite a los desarrolladores frontend crear componentes encapsulados en Fluid puro. Al definir una interfaz clara (API) para la integración, los desarrolladores frontend pueden implementar componentes independientes de los desarrolladores backend. El objetivo es crear componentes de presentación altamente reutilizables que no tengan efectos secundarios y no sean responsables de la adquisición de datos.

TL;DR? Comience de inmediato

¿Qué hace?

Las plantillas fluidas suelen constar de tres ingredientes:

plantillas ,
Diseños , que estructuran y envuelven el marcado definido en la plantilla, y
Parciales , que contienen fragmentos de marcado que se pueden reutilizar en diferentes plantillas.

Además, ViewHelpers proporciona estructuras de control básicas y encapsula la representación avanzada y la manipulación de datos que de otro modo no serían posibles. Se definen como clases PHP.

La extensión añade otro ingrediente a Fluid: Componentes .

¿Qué son los componentes?

fluid components son similares a ViewHelpers. La principal diferencia es que se pueden definir únicamente en Fluid. En cierto modo, son bastante similares a los parciales de Fluid, pero tienen algunas ventajas:

Proporcionan una interfaz clara a través de parámetros predefinidos. La implementación está encapsulada en el componente. No es necesario saber qué hace el componente internamente para poder utilizarlo.
Con nombres de componentes semánticos, sus plantillas se vuelven más legibles . Esto mejora aún más con el diseño atómico o enfoques similares.
Se pueden usar fácilmente en diferentes extensiones de TYPO3 porque utilizan los espacios de nombres de Fluid. No se necesita una ruta raíz parcial .

¿Cómo se ven los componentes?

El siguiente componente implementa un elemento de tarjeta teaser simple:

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

Utilice el siguiente código en su plantilla para representar una tarjeta teaser sobre TYPO3:

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

El resultado es el siguiente 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 >

(sangría mejorada para una mejor legibilidad)

Empezando

Instale la extensión desde TER o mediante Composer:
```
 composer require sitegeist/fluid-components
```

Defina el espacio de nombres del componente en su 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 ' );

Utilice su propio nombre de proveedor para VENDOR , nombre de extensión para MyExtension y clave de extensión para my_extension .

Cree su primer componente en EXT:my_extension/Resources/Private/Components/ creando un directorio MyComponent que contenga un archivo MyComponent.html
Defina y aplique su componente según ¿Cómo se ven los componentes?. La documentación ampliada también puede resultar útil.
Consulte Fluid Styleguide, una guía de estilo viva para fluid components y fluid components Linter para mejorar la calidad y la reutilización de sus componentes.

Si tiene alguna pregunta, necesita ayuda o quiere hablar sobre los componentes de TYPO3, no dude en unirse a #ext-fluid_components.

¿Por qué debería utilizar componentes?

Los componentes fomentan la reutilización y refactorización del marcado . Sólo el componente conoce los detalles de su implementación. Mientras la interfaz siga siendo compatible, la implementación puede cambiar.
Los componentes pueden ser una herramienta para hacer cumplir las pautas de diseño . Si la implementación del componente respeta las directrices, éstas se respetarán en todos los lugares donde se utilice el componente. Una herramienta útil para lograrlo es la guía de estilo de vida correspondiente: Fluid Styleguide.
Los componentes formalizan y mejoran la comunicación . Los desarrolladores e integradores de frontend acuerdan una interfaz claramente definida en lugar de debatir los detalles de implementación.
Los componentes reducen las dependencias . Los desarrolladores frontend pueden trabajar independientemente de los integradores y desarrolladores backend.

Documentación ampliada

Referencias de funciones

Ver referencia de ayuda
Estructuras de datos
- Enlaces y Typolink
- Archivos e imágenes
- Traducciones
- Navegaciones
- FechaHora
- Tragamonedas
Prefijos de componentes
Configuración de componentes

Cómo hacer