Component Preview
Specifications
Properties
Property | Type | Description | Required | Default |
---|---|---|---|---|
component | object | Set of component data, including confluence link, version added etc. | Yes | - |
slug | string | used as HTML id for main div as well as color picker controls | Yes | - |
title | string | Main heading text | Yes | - |
description | string | Short explanation of what this preview demonstrates | No | - |
colors | array | List of theme colors to use in color picker. If no colors are provided color picker will not be included | No | - |
└ item | object | Keys are the color names, values are hex codes | - | - |
└ [additionalProperties] | string | - | - | - |
color_target | string | Where the color picker should swap color classes. The supplied component data may also have a color_target property which will be checked if an override is not provided. If false will apply to view div Allowed Values: null , "component" | No | - |
preview | string | Rendered HTML of the component | Yes | - |
code | string | Twig representation of the component. Should be HTML escaped. | No | - |
meta | boolean | Show footer with component name, confluence link, and version information | No | false |
Styling
Modifiers
Name | Class | Description |
---|---|---|
Full | .tux-c-component-preview--full | Removes constrained width to allow components to fill all available space |
Changelog
1.32.0 (2022-04-26)
- fix: use data-preview instead of data-component (37a9a01)
1.15.0
- component-preview added
Related
Contains
Other core components embedded within this template.
Examples
Default
Default component preview with all options shown
Preview Content
<x-component-preview :component="component" slug="default" title="Default" :colors="theme_colors" :meta="true" description="Default component preview with all options shown" > <x-slot name="preview"> <div class="tux-c-placeholder"><em>Preview Content</em></div> </x-slot> <x-slot name="code"> ... </x-slot> </x-component-preview>
Minimal
Preview Content