Conditional Classes

Apply CSS classes to Velt wireframe elements conditionally with velt-class.

Apply a CSS class only when a condition is true, using the same data as Template Variables. Use it to style state (resolved, dark mode, unread, …) without writing a new wireframe.

Syntax

React / Next.js

<SomeVeltWireframe veltClass="<evaluation-string>" />

Other Frameworks

<some-velt-wireframe velt-class="<evaluation-string>"></some-velt-wireframe>

<evaluation-string>: 'class-name': {template-variable} <operator> 'value'

• class-name: the class to apply, in single quotes.
• template-variable: the variable to evaluate, in curly braces.
• operator: ===, !==, >, >=, <, <=; combine conditions with && and ||.
• value: what to compare against, in single quotes for strings.

A boolean variable needs no operator: 'is-dark': {darkMode}.

Example

React / Next.js

<VeltWireframe>
  <VeltCommentDialogWireframe.Header veltClass="'bg-yellow-500': {annotation.status.id} === 'IN_PROGRESS'" />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comment-dialog-header-wireframe velt-class="'bg-yellow-500': {annotation.status.id} === 'IN_PROGRESS'"></velt-comment-dialog-header-wireframe>
</velt-wireframe>

Multiple classes and the shorthand form

Separate several classes with commas. For a single class driven by one boolean, velt-class-<name> is shorter.

React / Next.js

// On your own markup inside a wireframe, the literal attribute passes through JSX
<div velt-class="'is-dark': {darkMode}, 'is-resolved': {resolved}" />

// Shorthand: applies the class "active" when {showReplies} is true
<div velt-class-active="{showReplies}" />

Other Frameworks

<div velt-class="'is-dark': {darkMode}, 'is-resolved': {resolved}"></div>

<!-- Shorthand: applies the class "active" when {showReplies} is true -->
<div velt-class-active="{showReplies}"></div>

Your classes land on the element alongside Velt’s own. Velt’s runtime styles are high-specificity, so a rule that overrides Velt’s styling still needs !important: see Override classes.

Related

• Many states already have a Velt class you can target directly, no directive needed: CSS classes.
• Hide the element entirely instead of restyling it: Conditional Templates.