Styling Attributes

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 Case	Recommendation	Why
Status indicators	dbind_class	Predefined styles, semantic
Brand/theme colors	dbind_style	User-customizable colors
Layout changes	dbind_class	Maintain CSS separation
Progress/percentages	dbind_style	Dynamic numeric values
Hover/focus states	dbind_class	CSS handles pseudo-classes
One-off custom colors	dbind_style	No 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

• Visibility - Show/hide elements conditionally
• Lists - Repeat elements for arrays
• Core Binding - Text content binding