Skip to content

Component Preview

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
componentobject Set of component data, including confluence link, version added etc.Yes-
slugstring used as HTML id for main div as well as color picker controlsYes-
titlestring Main heading textYes-
descriptionstring Short explanation of what this preview demonstratesNo-
colorsarray List of theme colors to use in color picker. If no colors are provided color picker will not be includedNo-
└ itemobject Keys are the color names, values are hex codes--
└ [additionalProperties]string ---
color_targetstring 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-
previewstring Rendered HTML of the componentYes-
codestring Twig representation of the component. Should be HTML escaped.No-
metaboolean Show footer with component name, confluence link, and version informationNofalse

Styling

Modifiers

NameClassDescription
Full.tux-c-component-preview--fullRemoves 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

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