如何向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標籤提供動態樣式

回答

相關問題