Question

我想创建一个riotjs标签，可以在HTML页面中直接添加一些样式或css类。我还可以从标记脚本中动态设置一些样式属性;

例如;

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

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

我可以通过创建具有动态属性的HTML标记字符串并将其作为HTML插入到root来实现。但我不想仅为样式添加额外的子标记。

Answer 1

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

  <phone style="
    display:block;
    position:relative; 
    margin:auto; 
    width:300px; 
    height:500px;
    background:silver;
    overflow:hidden">
    <navigation-or-something style="
      display:block;
      position:absolute;
      height:100px; 
      width:100%;
      background:skyblue">
      known height. don't overlap
    </navigation-or-something>
    <component style="
      display:flex;
      flex-direction: column;
      position: absolute; 
      right:0;
      bottom:0;
      left:0; 
      max-height: calc(100% - 100px);">
      <header style="background:yellow">
        multiline variable text height. multiline variable text height
      </header>
      <container style="
        display:block; 
        background: pink; 
        overflow: auto;">
        <content>
          some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. 
        </content>
      </container>
    </component>
  </phone>

Answer 2

您可以选择使用以下语法在您的元素中包含类。

<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>元素。

如何为riotjs标签

2 个答案: