data-style

ภาพรวม

data-style เชื่อมค่าข้อมูลกับ inline CSS styles รองรับทั้ง object และ string syntax

ใช้เมื่อ:

• กำหนด dynamic inline styles
• ใช้ computed styles จากข้อมูล
• ควบคุม style properties แบบ reactive

ทำไมต้องใช้:

• ✅ รองรับ Object และ string syntax
• ✅ มี sanitization ในตัวเพื่อความปลอดภัย
• ✅ อัพเดทแบบ reactive เมื่อข้อมูลเปลี่ยน
• ✅ รองรับ CSS property interpolation

การใช้งานพื้นฐาน

String Syntax

<div data-style="color:textColor; font-size:fontSize"></div>

กับข้อมูล:

{
  textColor: "red",
  fontSize: "16px"
}

ผลลัพธ์:

<div style="color: red; font-size: 16px;"></div>

Object Syntax

<div data-style="{ color: textColor, fontSize: fontSize }"></div>

Syntax

String Syntax

<element data-style="cssProperty:expression; cssProperty2:expression2">

Object Syntax

<element data-style="{ cssProperty: expression, cssProperty2: expression2 }">

กับ Interpolation

<element data-style="width: {{ width }}px; height: {{ height }}px">

ฟีเจอร์

1. Style Binding อย่างง่าย

<div data-style="background-color:bgColor"></div>

กับข้อมูล:

{ bgColor: "#3498db" }

2. หลาย Styles

<div data-style="
  color: textColor;
  background: bgColor;
  padding: padding;
  border-radius: borderRadius
"></div>

3. Object Syntax

<div data-style="{
  backgroundColor: cardBg,
  boxShadow: hasShadow ? '0 2px 8px rgba(0,0,0,0.1)' : 'none'
}"></div>

4. Template Interpolation

<div data-style="
  width: {{ progress }}%;
  transform: translateX({{ offset }}px)
"></div>

5. Computed Values

<div data-style="{
  width: width + 'px',
  opacity: isVisible ? 1 : 0
}"></div>

ตัวอย่างขั้นสูง

Progress Bar

<div class="progress-bar">
  <div class="progress-fill"
       data-style="width: {{ progress }}%; background-color: {{ progressColor }}">
  </div>
</div>

<style>
.progress-bar { width: 100%; background: #eee; height: 20px; }
.progress-fill { height: 100%; transition: width 0.3s; }
</style>

กับข้อมูล:

{
  progress: 75,
  progressColor: "#27ae60"
}

Dynamic Positioning

<div class="tooltip"
     data-style="{
       top: position.y + 'px',
       left: position.x + 'px',
       opacity: isVisible ? 1 : 0
     }">
  <span data-text="tooltipText"></span>
</div>

Avatar กับขนาด

<img class="avatar"
     data-attr="src:user.avatar"
     data-style="width: {{ avatarSize }}px; height: {{ avatarSize }}px">

Grid Layout

<div class="grid"
     data-style="
       grid-template-columns: repeat({{ columns }}, 1fr);
       gap: {{ gap }}px
     ">
  <div data-for="item in items">
    <template>
      <div class="grid-item" data-text="item.name"></div>
    </template>
  </div>
</div>

Theme Colors

<div class="card"
     data-style="{
       backgroundColor: theme.cardBg,
       color: theme.textColor,
       borderColor: theme.borderColor
     }">
  <h3 data-text="title"></h3>
</div>

API อ้างอิง

CSS Properties ที่รองรับ

รองรับ CSS properties มาตรฐานทั้งหมด ใช้ได้ทั้ง:

• kebab-case: background-color, font-size
• camelCase (ใน object syntax): backgroundColor, fontSize

Security Sanitization

ค่าที่อันตรายจะถูก sanitize:

URL Protocols ที่อนุญาต

ข้อควรระวัง

⚠️ 1. ขาดหน่วย

<!-- ❌ ผิด - ขาดหน่วย -->
<div data-style="width: {{ width }}"></div>  <!-- width = 100 -->

<!-- ✅ ถูก - ใส่หน่วย -->
<div data-style="width: {{ width }}px"></div>
<div data-style="width: {{ width }}%"></div>

⚠️ 2. ชื่อ Property ไม่ถูกต้อง

<!-- ❌ ผิดใน object syntax -->
<div data-style="{ font-size: size }"></div>

<!-- ✅ ถูก - ใช้ camelCase -->
<div data-style="{ fontSize: size }"></div>

<!-- ✅ หรือใช้ string syntax -->
<div data-style="font-size: {{ size }}"></div>

⚠️ 3. Security Blocks

// ❌ จะถูกบล็อก
{ bgUrl: "javascript:alert('xss')" }

// ✅ ใช้ URLs ที่ปลอดภัย
{ bgUrl: "/images/background.jpg" }

⚠️ 4. ใช้ Inline Styles มากเกินไป

<!-- ❌ inline styles มากเกินไป - ดูแลยาก -->
<div data-style="
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 10px;
  background: white;
"></div>

<!-- ✅ ใช้ CSS classes สำหรับ static styles -->
<div class="centered-card" data-style="background: {{ dynamicBg }}"></div>

เปรียบเทียบ: data-style vs CSS Classes

Directives ที่เกี่ยวข้อง

• data-class - สำหรับสลับ CSS classes
• data-attr - สำหรับกำหนด attributes