Download fluid components - download do código-fonte de fluid components

fluid components

Componentes de terceiros

3.8.3 generate placeholder images internal

Baixar

fluid components

Essas extensões TYPO3 colocam os desenvolvedores front-end em posição de criar componentes encapsulados em Fluido puro. Ao definir uma interface clara (API) para a integração, os desenvolvedores front-end podem implementar componentes independentes dos desenvolvedores back-end. O objetivo é criar componentes de apresentação altamente reutilizáveis, que não tenham efeitos colaterais e não sejam responsáveis pela aquisição de dados.

DR? Comece agora mesmo

O que isso faz?

Os modelos fluidos geralmente consistem em três ingredientes:

Modelos ,
Layouts , que estruturam e envolvem a marcação definida no modelo, e
Partials , que contêm trechos de marcação para serem reutilizados em diferentes modelos.

Além disso, ViewHelpers fornecem estruturas de controle básicas e encapsulam renderização avançada e manipulação de dados que de outra forma não seriam possíveis. Eles são definidos como classes PHP.

A extensão adiciona outro ingrediente ao Fluid: Componentes .

O que são componentes?

fluid components são semelhantes aos ViewHelpers. A principal diferença é que eles podem ser definidos apenas em Fluid. De certa forma, eles são bastante semelhantes aos parciais do Fluid, mas têm algumas vantagens:

Eles fornecem uma interface clara por meio de parâmetros predefinidos. A implementação é encapsulada no componente. Você não precisa saber o que o componente faz internamente para poder usá-lo.
Com nomes de componentes semânticos, seus modelos ficam mais legíveis . Isso fica ainda melhor com design atômico ou abordagens semelhantes.
Eles podem ser facilmente usados em diferentes extensões TYPO3 porque utilizam namespaces do Fluid. Não é necessário parcialRootPath .

Como são os componentes?

O componente a seguir implementa um elemento de cartão teaser simples:

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 >

Use o seguinte código em seu modelo para renderizar um cartão teaser sobre TYPO3:

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

O resultado é o seguinte 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 >

(recuo aprimorado para melhor legibilidade)

Começando

Instale a extensão do TER ou via compositor:

 composer require sitegeist/fluid-components

Defina o namespace do componente em seu 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 ' );

Use seu próprio nome de fornecedor para VENDOR , nome de extensão para MyExtension e chave de extensão para my_extension .

Crie seu primeiro componente em EXT:my_extension/Resources/Private/Components/ criando um diretório MyComponent contendo um arquivo MyComponent.html
Defina e aplique seu componente de acordo com Como são os componentes? A documentação estendida também pode ser útil.
Confira Fluid Styleguide, um guia de estilo vivo para fluid components e fluid components Linter para melhorar a qualidade e a reutilização de seus componentes.

Se você tiver alguma dúvida, precisar de suporte ou quiser discutir componentes no TYPO3, sinta-se à vontade para ingressar em #ext-fluid_components.

Por que devo usar componentes?

Os componentes incentivam a reutilização e refatoração de marcação . Somente o componente conhece os detalhes de sua implementação. Contanto que a interface permaneça compatível, a implementação pode mudar.
Os componentes podem ser uma ferramenta para impor diretrizes de projeto . Se a implementação do componente respeitar as diretrizes, elas serão respeitadas em todos os lugares em que o componente for utilizado. Uma ferramenta útil para conseguir isso é o guia de estilo de vida correspondente: Fluid Styleguide.
Os componentes formalizam e melhoram a comunicação . Os desenvolvedores e integradores de front-end concordam com uma interface claramente definida em vez de debater detalhes de implementação.
Componentes reduzem dependências . Os desenvolvedores front-end podem trabalhar independentemente de integradores e desenvolvedores back-end.

Documentação Estendida

Referências de recursos

Referência do ViewHelper
Estruturas de dados
- Links e Typolink
- Arquivos e imagens
- Traduções
- Navegações
- DataHora
- Caça-níqueis
Prefixadores de componentes
Configurações de componentes

Como fazer