Dynamic Attributes

Dynamic Classes

The :class attribute dynamically adds classes.

Static classes should be added directly to attribute “class“.

Dynamic classes come from your component data or computed values and added to attribute “:class“, ie same as normal class but staring with “:“.

Example

com({
  name: 'my-app',
  data: {
    class1: 'tx-blue',
    class2: 'e-flame',
    class3: 'tx-blue e-flame',
  },
  tpl() {
    return html`
      <div class="fd-c g-1">
        <div :class="class1">Single dynamic class</div>
        <div :class="class1 class2">Chained classes(should be devided by space)</div>
        <div :class="class3">Multiple class</div>
        <div class="tx-blue" :class="class2">Mixed, static and dynamic</div>
      </div>
    `;
  },
});

Dynamic Inline Styles

The :style attribute dynamically applies styles.

You can use:

• CSS syntax (background-color) or
• camelCase syntax (backgroundColor) — recommended for consistency.

Jet supports:

• String styles
• Inline objects { backgroundColor: color; fontSize: size }
• Arrays of objects [ style1, style2 ]

Syntax note: Style should be as an object ie in curved braces, comma-separated model key:value.

Keys should be strong css names(css style or camelCase style);

Object using Note: Object keys should be named as css properties in camelCase

Wrong: font-size: ’24px’,

Correct: fontSize: ’24px’,

com({
  name: 'com-style',
  data: {
    bg: '#c8e6c9',
    col: '#00f',
    style_object: { 
        color: '#fff', 
        backgroundColor: '#1e87f0' 
    },
    style2: { fontSize: '24px' },
  },
  tpl() {
    return html`
      <div class="fd-c g-1">
        <div class="p-1" :style="{ background-color: bg; }">CSS-case(background-color) </div>
        <div class="p-1" :style="{ backgroundColor: bg; color: col }">camelCase(backgroundColor)</div>
        <div class="p-1" :style="style_object">Using Object as style </div>
        <div class="p-1" :style="[ style_object, style2 ]">Multiple style as array(not sure it will be useful, but let it be)</div>
      </div>
    `;
  },
});

Other Attributes

Rest of attributes adds the same adding : before attribute

Example

com({
  name: 'com-attr',
  data: {
    img: 'http://magicjet.org/wp-content/themes/jet-2500/img/logo.png',
    alt_text: 'Lorem Ipsum',
  },
  tpl: `<img :src="img" :alt="alt_text">`,
});