Styling Attributes

Dynamically control CSS classes and inline styles based on data

Styling attributes allow you to dynamically apply CSS classes and inline styles based on your data values. This enables data-driven visual changes without JavaScript.

dbind_class

Purpose: Dynamically add one or more CSS classes to an element based on data values.

Syntax:

<!-- Simple: class name from data -->
<element dbind_class="fieldName"></element>
 
<!-- Multiple classes from single field -->
<element dbind_class="classesField"></element>

Basic Usage

<!-- Add class based on status -->
<span dbind_class="statusClass" dbind_data="status"></span>
 
<!-- Badge with dynamic styling -->
<span class="badge" dbind_class="badgeType">Status</span>

Data:

{
  "status": "Active",
  "statusClass": "status-active",
  "badgeType": "badge-success"
}

Result:

<span class="status-active">Active</span>
<span class="badge badge-success">Status</span>

Multiple Classes

The field can contain multiple space-separated class names:

<div dbind_class="cardClasses">Content</div>

Data:

{
  "cardClasses": "card card-elevated card-hover animate-fade"
}

Result:

<div class="card card-elevated card-hover animate-fade">Content</div>

Combining Static and Dynamic Classes

DBindly adds dynamic classes to existing static classes:

<div class="product-card featured" dbind_class="categoryClass">
  ...
</div>

Data:

{
  "categoryClass": "category-electronics"
}

Result:

<div class="product-card featured category-electronics">...</div>

Use Cases

1. Status Indicators

<span class="status-badge" dbind_class="statusClass" dbind_data="status"></span>

Data with different statuses:

// Active
{ "status": "Active", "statusClass": "status-active" }
 
// Pending
{ "status": "Pending", "statusClass": "status-pending" }
 
// Inactive
{ "status": "Inactive", "statusClass": "status-inactive" }

CSS:

.status-badge { padding: 4px 12px; border-radius: 20px; }
.status-active { background: #22c55e; color: white; }
.status-pending { background: #f59e0b; color: white; }
.status-inactive { background: #ef4444; color: white; }

2. Priority Levels

<div class="task-card" dbind_class="priorityClass">
  <h4 dbind_data="title"></h4>
  <span class="priority-badge" dbind_data="priority"></span>
</div>

Data:

{
  "title": "Fix critical bug",
  "priority": "High",
  "priorityClass": "priority-high"
}

3. Category Styling

<article class="post-card" dbind_class="categoryClass">
  <span class="category" dbind_data="category"></span>
  <h3 dbind_data="title"></h3>
</article>

CSS:

.category-tech { border-left: 4px solid #3b82f6; }
.category-design { border-left: 4px solid #ec4899; }
.category-business { border-left: 4px solid #10b981; }

4. User Roles

<div class="user-badge" dbind_class="roleClass">
  <span dbind_data="role"></span>
</div>

Data:

{ "role": "Admin", "roleClass": "role-admin" }
{ "role": "Editor", "roleClass": "role-editor" }
{ "role": "Viewer", "roleClass": "role-viewer" }

5. Product Availability

<div class="product" dbind_class="availabilityClass">
  <h3 dbind_data="name"></h3>
  <span dbind_data="availabilityText"></span>
</div>

Data:

// In Stock
{
  "availabilityClass": "in-stock",
  "availabilityText": "In Stock"
}
 
// Low Stock
{
  "availabilityClass": "low-stock",
  "availabilityText": "Only 3 left"
}
 
// Out of Stock
{
  "availabilityClass": "out-of-stock",
  "availabilityText": "Out of Stock"
}

6. Conditional Appearance in Lists

<div dbind_repeat="products">
  <div class="product-card" dbind_class="productClasses">
    <span dbind_show="featured" class="featured-badge">Featured</span>
    <span dbind_show="onSale" class="sale-badge">Sale</span>
    <h3 dbind_data="name"></h3>
  </div>
</div>

Data:

{
  "products": [
    { "name": "Product A", "productClasses": "featured sale", "featured": true, "onSale": true },
    { "name": "Product B", "productClasses": "", "featured": false, "onSale": false }
  ]
}

Building Class Strings Server-Side

Prepare class strings in your data for complex conditions:

{
  "cardClasses": "card card-lg shadow-md hover:shadow-lg transition-shadow"
}

This approach works well when class logic is complex or depends on multiple conditions.

dbind_style

Purpose: Dynamically apply inline CSS styles to an element.

Syntax:

<element dbind_style="fieldName"></element>

Basic Usage

<div dbind_style="customStyles">Styled Content</div>

Data:

{
  "customStyles": "background-color: #3b82f6; color: white; padding: 20px;"
}

Result:

<div style="background-color: #3b82f6; color: white; padding: 20px;">Styled Content</div>

Use Cases

1. Dynamic Background Colors

<div class="category-header" dbind_style="headerStyle">
  <h2 dbind_data="categoryName"></h2>
</div>

Data:

{
  "categoryName": "Electronics",
  "headerStyle": "background-color: #1e40af;"
}

2. Custom Brand Colors

<div class="brand-card" dbind_style="brandColors">
  <img dbind_src="logo" dbind_alt="name">
  <span dbind_data="name"></span>
</div>

Data:

{
  "name": "TechCorp",
  "logo": "/logos/techcorp.png",
  "brandColors": "background-color: #0f172a; color: #22d3ee; border-color: #22d3ee;"
}

3. Progress Bars

<div class="progress-bar">
  <div class="progress-fill" dbind_style="progressStyle"></div>
</div>
<span dbind_data="progressText"></span>

Data:

{
  "progressStyle": "width: 75%;",
  "progressText": "75% Complete"
}

4. Dynamic Sizing

<div class="chart-bar" dbind_style="barStyle">
  <span dbind_data="value"></span>
</div>

Data:

{
  "value": "150 sales",
  "barStyle": "height: 150px; background-color: #22c55e;"
}

5. Custom Positioning

<div class="tooltip" dbind_style="tooltipPosition" dbind_data="tooltipText">
</div>

Data:

{
  "tooltipText": "Click here for help",
  "tooltipPosition": "top: 100px; left: 250px;"
}

6. Avatar Backgrounds (for initials)

<div class="avatar" dbind_style="avatarStyle">
  <span dbind_data="initials"></span>
</div>

Data:

{
  "initials": "JD",
  "avatarStyle": "background-color: #8b5cf6;"
}

Combining Static and Dynamic Styles

Dynamic styles are added to existing inline styles:

<div style="border-radius: 8px;" dbind_style="dynamicStyles">
  Content
</div>

Result (if dynamicStyles = "background: blue;"):

<div style="border-radius: 8px; background: blue;">Content</div>

CSS Custom Properties (Variables)

You can use CSS custom properties:

<div dbind_style="themeVars">
  <h2>Themed Section</h2>
</div>

Data:

{
  "themeVars": "--primary-color: #3b82f6; --text-color: #1f2937;"
}

CSS:

div {
  color: var(--text-color);
  border-color: var(--primary-color);
}

dbind_class vs dbind_style: When to Use Which

Use CaseRecommendationWhy
Status indicatorsdbind_classPredefined styles, semantic
Brand/theme colorsdbind_styleUser-customizable colors
Layout changesdbind_classMaintain CSS separation
Progress/percentagesdbind_styleDynamic numeric values
Hover/focus statesdbind_classCSS handles pseudo-classes
One-off custom colorsdbind_styleNo CSS needed

Best Practices

Prefer dbind_class for:

  • Predefined state variations (active, inactive, etc.)
  • Complex style combinations
  • Styles with pseudo-classes (:hover, :focus)
  • Responsive variations

Prefer dbind_style for:

  • Dynamic numeric values (widths, heights, positions)
  • User-customizable colors (brand colors, themes)
  • Unique one-off styling
  • CSS custom properties

Complete Example: Product Grid with Dynamic Styling

<div class="product-grid">
  <div dbind_repeat="products">
    <article
      class="product-card"
      dbind_class="productClasses"
      dbind_style="productAccent"
    >
      <!-- Status Badge -->
      <span
        class="status-badge"
        dbind_class="statusBadgeClass"
        dbind_data="status"
      ></span>
 
      <!-- Featured Ribbon -->
      <div
        class="ribbon"
        dbind_show="featured"
        dbind_style="ribbonStyle"
      >
        Featured
      </div>
 
      <!-- Product Image -->
      <div class="product-image" dbind_style="imageBorder">
        <img dbind_src="image" dbind_alt="name">
      </div>
 
      <!-- Product Info -->
      <div class="product-info">
        <span class="category" dbind_class="categoryClass" dbind_data="category"></span>
        <h3 dbind_data="name"></h3>
        <p dbind_data="description"></p>
 
        <!-- Price with conditional styling -->
        <div class="price-container">
          <span
            class="price"
            dbind_class="priceClass"
            dbind_data="price"
            dbind_format="currency:USD"
          ></span>
          <span
            class="original-price"
            dbind_show="onSale"
            dbind_data="originalPrice"
            dbind_format="currency:USD"
          ></span>
        </div>
      </div>
 
      <!-- Stock Indicator -->
      <div class="stock-bar" dbind_style="stockBarStyle"></div>
    </article>
  </div>
</div>

Sample Data:

{
  "products": [
    {
      "name": "Wireless Headphones",
      "description": "Premium audio experience",
      "category": "Electronics",
      "price": 149.99,
      "originalPrice": 199.99,
      "onSale": true,
      "featured": true,
      "status": "In Stock",
      "image": "/images/headphones.jpg",
      "productClasses": "featured on-sale",
      "productAccent": "border-left: 4px solid #22c55e;",
      "statusBadgeClass": "badge-success",
      "categoryClass": "category-electronics",
      "priceClass": "price-sale",
      "ribbonStyle": "background-color: #f59e0b;",
      "imageBorder": "border-color: #22c55e;",
      "stockBarStyle": "width: 80%; background-color: #22c55e;"
    },
    {
      "name": "Desk Lamp",
      "description": "Adjustable LED lighting",
      "category": "Home Office",
      "price": 79.99,
      "onSale": false,
      "featured": false,
      "status": "Low Stock",
      "image": "/images/lamp.jpg",
      "productClasses": "low-stock",
      "productAccent": "border-left: 4px solid #f59e0b;",
      "statusBadgeClass": "badge-warning",
      "categoryClass": "category-home",
      "priceClass": "",
      "ribbonStyle": "",
      "imageBorder": "",
      "stockBarStyle": "width: 20%; background-color: #f59e0b;"
    }
  ]
}

CSS:

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
 
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
 
.product-card.featured {
  border-width: 2px;
  border-style: solid;
}
 
.product-card.on-sale {
  background: linear-gradient(to bottom right, white, #fef3c7);
}
 
.badge-success { background: #22c55e; color: white; }
.badge-warning { background: #f59e0b; color: white; }
.badge-danger { background: #ef4444; color: white; }
 
.category-electronics { color: #3b82f6; }
.category-home { color: #8b5cf6; }
 
.price-sale { color: #ef4444; font-weight: bold; }
.original-price { text-decoration: line-through; color: #9ca3af; }
 
.stock-bar {
  height: 4px;
  border-radius: 2px;
  margin-top: auto;
}

Next Steps