Skip to content

Component Preview

Table of Contents

  1. Specifications
    1. Properties
    2. Styling
      1. Modifiers
      2. Colors
  2. Changelog
  3. Related
    1. Contains
  4. Examples

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 controls Yes-
titlestring Main heading text Yes-
descriptionstring Short explanation of what this preview demonstrates No-
colorsarray List of theme colors to use in color picker. If no colors are provided color picker will not be included No-
└ 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 component Yes-
codestring Twig representation of the component. Should be HTML escaped. No-
metaboolean Show footer with component name, confluence link, and version information Nofalse

Styling

Modifiers

NameClassDescription
Full.tux-c-component-preview--fullRemoves constrained width to allow components to fill all available space

Colors

NameApplicationCustom PropertyRolesDefault OpacityDescription
bg-color-surface--
text-color-on-surface--
code-bg-color-on-background--
code-text-color-background--

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