如何向riotjs标签提供动态样式

我想创建一个riotjs标签，可以将某些样式或css类直接添加到HTML页面中。我也可以从标签脚本中动态设置一些样式属性;如何向riotjs标签提供动态样式

对于实施例;

<my-tag class="some class" attr1="" attr2="" /> 

<my-tag> 
    <script> 
    if(opts.attr1) //set some style to my-tag 
    </script> 
</my-tag>

我可以通过创建与动态特性的HTML代码字符串实现它，并插入作为HTML根。但我不想为样式添加额外的子标签。

来源

2016-12-25 Amit Gupta

这样的事情呢。您将一些选项传递给标记，然后动态更改样式类。检查例子http://plnkr.co/edit/ZuPMFFBIuDPSeawsEkPX?p=preview

<my-tag color="green"></my-tag> 
<my-tag color="red"></my-tag> 


<my-tag> 
    <h1 class="{opts.color}">{ message }</h1> 

    <script> 
    this.message = 'hello there' 
    </script> 
    <style> 
    .red { 
     color: red; 
    } 
    .green { 
     color: green; 
    } 
    </style> 
</my-tag>

来源

2016-12-27 17:23:08 vitomd

谢谢。我创建了一个[示例]（http://plnkr.co/edit/tKwQNdJO3nSUMi20f8vr?p=preview）我正在寻找的东西。我想动态设置CSS属性，但是由于样式标签的内容仅在标头标签中插入一次，所以似乎并不合适 –

您可以选择包括类到您的元素使用下面的语法。

<my-tag> 
    <div class="some-class another-class { my-class: attr1 }"></div> 

<script> 
    this.attr1 = this.opts.attr1; 
</script> 

</my-tag>

然后在HTML中使用标签。

<my-tag attr1="whatever"></my-tag>

所以，如果this.opts.attr1设置，这将类my-class添加到<div>元素。

来源

2017-01-17 19:20:27

如何向riotjs标签提供动态样式

回答

相关问题