smic/webcomponents

该包最新版本（0.2.0）的许可证信息不可用。

渲染 Web 组件

维护者

详细信息

github.com/sinso/typo3-webcomponents

源代码

问题

安装: 13

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 3

分支: 0

公开问题: 6

类型:typo3-cms-extension

0.2.0 2024-08-02 09:56 UTC

Requires

Unknown License 6e39ec01e115700f21e455de11f426c22c951756

This package is auto-updated.

Last update: 2024-09-18 13:19:59 UTC

README

本扩展提供了使用 TYPO3 渲染 Web 组件的工具。

基于 TypoScript 的渲染

tt_content.tx_myext_mycontentelement = WEBCOMPONENT
tt_content.tx_myext_mycontentelement {
  tagName = my-web-component
  properties {
    title.data = header
    greeting = Hello World!
  }
}

生成输出

<my-web-component
    title="This is the title from the content element record"
    greeting="Hello World!"
></my-web-component>

基于组件类的渲染

您可以使用 PHP 填充 Web 组件

tt_content.tx_myext_mycontentelement = WEBCOMPONENT
tt_content.tx_myext_mycontentelement.component = Acme\MyExt\Components\MyContentElement

<?php

namespace Acme\MyExt\Components;

use Sinso\Webcomponents\DataProviding\ComponentInterface;
use Sinso\Webcomponents\DataProviding\Traits\ContentObjectRendererTrait;
use Sinso\Webcomponents\Dto\ComponentRenderingData;

class MyContentElement implements ComponentInterface
{
    use ContentObjectRendererTrait;

    public function provide(ComponentRenderingData $componentRenderingData): WebcomponentRenderingData
    {
        $record = $componentRenderingData->getContentRecord();
        $properties = [
            'title' => $record['header'],
            'greeting' => 'Hello World!',
        ];

        $componentRenderingData->setTagName('my-web-component');
        $componentRenderingData->setTagProperties($properties);
    }
}

中止渲染

组件类可以使用 \Sinso\Webcomponents\DataProviding\Traits\Assert 特性来中止渲染，例如如果记录不可用

<?php

namespace Acme\MyExt\Components;

use Sinso\Webcomponents\DataProviding\ComponentInterface;
use Sinso\Webcomponents\DataProviding\Traits\Assert;
use Sinso\Webcomponents\DataProviding\Traits\ContentObjectRendererTrait;
use Sinso\Webcomponents\DataProviding\Traits\FileReferences;
use Sinso\Webcomponents\Dto\ComponentRenderingData;
use TYPO3\CMS\Core\Resource\FileReference;

class Image implements ComponentInterface
{
    use Assert;
    use ContentObjectRendererTrait;
    use FileReferences;

    public function provide(ComponentRenderingData $componentRenderingData): WebcomponentRenderingData
    {
        $record = $componentRenderingData->getContentRecord();
        $image = $this->loadFileReference($record, 'image');

        // rendering will stop here if no image is found
        $this->assert($image instanceof FileReference, 'No image found for record ' . $record['uid']);

        $componentRenderingData->setTagName('my-image');
        $componentRenderingData->setTagProperties(['imageUrl' => $image->getPublicUrl()]);
    }
}

在 Fluid 中渲染 Web 组件

<html
    xmlns:wc="http://typo3.org/ns/Sinso/Webcomponents/ViewHelpers"
    data-namespace-typo3-fluid="true"
>

<wc:render
    component="Acme\\MyExt\\Components\\LocationOverview"
    inputData="{'header': 'This is the header'}"
/>

</html>