1

I've made a header component with riot.js that should have different styling on some pages. I'd like to set the classes when mounting the tag in the html document, but can't figure out how. The tag looks like this:

<o-header>
    <header class={ opts.structure, opts.overflow, opts.color }>
    ...
    </header>
</o-header>

And here is the mounting:

riot.mount('o-header',
{
    structure: 'o-header',
    overflow: 's-overflow--hidden',
    color: 'm-header--navy',
})

Is it a syntax error or am I misusing the opts feature here?

Lorant
  • 15
  • 5

1 Answers1

1

This is an interesting use case for options.

The format for providing multiple dynamic classes is the following,

<o-header>
  <header class="{opts.structure} {opts.overflow} {opts.color}">
  ...
  </header>
</o-header>

To take it a step further, you could apply this syntax to conditional classes,

<o-header>
  <header class="{true ? opts.structure: ''} {true ? opts.color : ''}">
  ...
  </header>
</o-header>

References:

JSFiddle: https://jsfiddle.net/31bokmyx/

RiotJS Issue: https://github.com/riot/riot/issues/2073

Conditional Dynamic Classes JSFiddle: https://jsfiddle.net/31bokmyx/19/

JetJet13
  • 151
  • 1
  • 7