Учебники

RIOT.JS — Стайлинг

Июль 19, 2018

Теги RIOT js могут иметь свой собственный стиль, и мы можем определять стили внутри тегов, которые будут влиять только на содержимое внутри тега. Мы также можем установить класс стиля, используя скрипты внутри тега. Ниже приводится синтаксис, как добиться стилизации тегов RIOT.

custom1Tag.tag 

<custom1Tag>
   <h1>{title}</h1>
   <h2 class = "subTitleClass">{subTitle}</h2>
   <style>
   h1 {
      color: red;
   }
   .subHeader {
      color: green;
   }
   </style>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
      this.subTitle = "Learning RIOT JS";
      this.subTitleClass = "subHeader";
   </script>
</custom1Tag>

index.htm 

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <h1>Non RIOT Heading</h1>
      <custom1Tag></custom1Tag>
      <script src = "custom1Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom1Tag");
      </script>
   </body>
</html>

Это даст следующий результат —

42
Share: