Conditional Classes

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
Other Frameworks

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

<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
Other Frameworks

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

<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
Other Frameworks

// 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}" />

<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.

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.

Concepts

Approaches

Recipes & Troubleshooting

Components: Async Collaboration

Components: Realtime Collaboration

Reference

Conditional Classes

Syntax

Example

Multiple classes and the shorthand form

​Syntax

​Example

​Multiple classes and the shorthand form

​Related

Syntax

Example

Multiple classes and the shorthand form

Related