![Logo](/_astro/logo.DNC1PCTe_Z1abT04.webp)
Enter a search term above to see results...
Enter a search term above to see results...
CSS helpers provide utilities for working with CSS classes and styles in templates.
Joins CSS classes, optionally adding a space after the final class name.
<div class="{classes classNamesArray true}">Content</div>
Name | Type | Default | Description |
---|---|---|---|
classNames | array | Array of class names | |
spaceAfter | boolean | true | Whether to add a space after the final class name |
string
- Joined class names.
<button class="{classes ['primary', size, color] true}"> {buttonText}</button>
Conditionally applies a CSS class.
<button class="{classIf isActive 'active' 'inactive'}">Click me</button>
Name | Type | Default | Description |
---|---|---|---|
expr | boolean | Condition to evaluate | |
trueClass | string | ” | Class to apply if condition is true |
falseClass | string | ” | Class to apply if condition is false |
string
- The resulting class name with a trailing space.
<li class="item {classIf isSelected 'selected' ''}"> {itemName}</li>
Applies multiple CSS classes based on conditions.
<div class="{classMap { active: isActive disabled: isDisabled} }">Content</div>
Name | Type | Description |
---|---|---|
classObj | object | Object with class names as keys and conditions as values |
string
- Resulting class names with a trailing space.
<form class="{classMap (object 'form': true, 'loading': isLoading, 'error': hasErrors, 'success': isSubmitted)}"> <!-- Form content --></form>
Adds ‘active’ class if expression is truthy.
<li class="{activeIf isCurrentPage}">Menu Item</li>
Name | Type | Description |
---|---|---|
expr | boolean | Condition to evaluate |
string
- ‘active ’ if condition is true, otherwise an empty string.
<nav> {#each menuItems} <a href="{this.path}" class="{activeIf this.path === currentPath}">{this.name}</a> {/each}</nav>
Adds ‘selected’ class if expression is truthy.
<option {selectedIf isOptionSelected}>Option</option>
Name | Type | Description |
---|---|---|
expr | boolean | Condition to evaluate |
string
- ‘selected ’ if condition is true, otherwise an empty string.
<select> {#each options} <option value="{value}" {selectedIf value === selectedValue}>{label}</option> {/each}</select>
Adds ‘disabled’ class if expression is truthy.
<button class="{disabledIf isButtonDisabled}">Submit</button>
Name | Type | Description |
---|---|---|
expr | boolean | Condition to evaluate |
string
- ‘disabled ’ if condition is true, otherwise an empty string.
<div class="{disabledIf !isEditable}"> <input type="text" value="{inputValue}"></div>
Adds ‘checked’ class if expression is truthy.
<div class="checkbox {checkedIf isOptionChecked}"> <input type="checkbox" name="example"> <label>Check me</label></div>
Name | Type | Description |
---|---|---|
expr | boolean | Condition to evaluate |
string
- ‘checked ’ if condition is true, otherwise an empty string.
{#each preferences} <div class="checkbox {checkedIf this.enabled}"> <input type="checkbox" name="{this.name}"> <label>{this.label}</label> </div>{/each}