EXT:fluid_components_backend

Ready-to-use Fluid components for backend templates: tabs, collapsible panels, infoboxes and buttons as typed ViewHelper tags that automatically match the native backend look. Useful for content element previews and custom backend modules.

Components

Tabs

<fb:molecule.tabs>
    <f:fragment name="header">
        <fb:atom.tabHeader id="one" active="1" header="Tab #1" />
        <fb:atom.tabHeader id="two" header="Tab #2" />
    </f:fragment>
    <f:fragment name="content">
        <fb:atom.tabContent id="one" active="1" content="Lorem ipsum" />
        <fb:atom.tabContent id="two" content="Content #2" />
    </f:fragment>
</fb:molecule.tabs>

Panel

<fb:molecule.panel collapseIdentifier="c{item.uid}" title="My header">
    {content}
</fb:molecule.panel>

Infobox

<fb:molecule.infobox icon="actions-brand-typo3" title="Infobox">
    {content}
</fb:molecule.infobox>

Button

<fb:atom.button>{cta.label}</fb:atom.button>

Storybook Integration

Add the bundled stories to your main.ts for isolated component development:

'../vendor/georgringer/fluid-components-backend/.storybook/**/*.stories.ts'

Requirements

Package	Version
TYPO3 CMS Fluid	≥ 13