Tabs Component

Tabbed content is one of those patterns that is tedious to assemble from generic components: a button row, a set of panels, and the wiring that shows one panel at a time. This plugin adds the whole thing as a single block.

Components

The block expands into five component types, each reachable from the Layer Manager and styleable on its own:

• tabs — the wrapper holding the whole widget.
• tab-container — the row that holds the individual tab buttons.
• tab — a single tab button.
• tab-contents — the wrapper around all panels.
• tab-content — one panel's content, droppable like any other container.

Because the parts are separate components rather than one opaque element, adding a fourth tab or restyling only the active state happens in the editor rather than in code.

Requirements

GrapesJS v0.13.8 or higher. Install as grapesjs-tabs; the full option list lives in the package's src/options.js. BSD-3-Clause.