Polymer教程:Molecules Elements

分子是其他JavaScript库所涵盖的元素,可帮助轻松开发应用程序,并用于将一组插件连接到Polymer应用程序。

分子包含一个称为标记元素的元素,该元素用于包装标记库。

语法

<marked-element markdown = "text here">
   <div class = "markdown-html"></div>
</marked-element>

<marked-element>元素包含markdown值,并将该值显示给具有markdown-html类的子元素。通过运行以下命令,可以在应用程序中使用标记元素,将其安装在项目目录中。

bower install --save PolymerElements/marked-element

此命令将在bower_components文件夹下安装marked-element的所有相关元素。

例子

以下示例指定在Polymer.js中使用标记元素。创建一个index.html文件,并在其中添加以下代码。

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "bower_components/paper-styles/demo-pages.html">
      <link rel = "import" href = "bower_components/marked-element/marked-element.html">
      <link rel = "import" href = "mark-elemnt.html">
   </head>
   
   <body>
      <mark-elemnt></mark-elemnt>
   </body>
</html>

现在创建另一个名为mark-element.html的文件,并包含以下代码。

<link rel = "import" href = "bower_components/polymer/polymer/element.html">
<link rel = "import" href = "bower_components/marked-element/marked-element.html">
<link rel = "import" href = "bower_components/paper-styles/demo-pages.html">

//it specifies the start of an element's local DOM
<dom-module id = "mark-elemnt">
   <template>
      <style>      
         h3 {
            color: orange;
            margin-left: 30px;
         }
         marked-element {
            display: block;
            background-color: grey;
            padding: 10px 30px;
            margin-bottom: 10px;
            width:250px;
         }
      </style>
  
      <h2>Marked Element Example</h2>
      <section>
         <marked-element>
            <div slot = "markdown-html"></div>
            <script type = "text/markdown">
               ## Welcome to web176
               
            </script>
         </marked-element>
      </section>
    
      <section>
         <h3>Text via Attribute</h3>
         <marked-element markdown = "***Hello World!!!***">
            <div slot = "markdown-html"></div>
         </marked-element>
      </section>
      
   </template>
   
   <script>
      Polymer ({
         is: 'mark-elemnt'
      });
   </script>
</dom-module>

输出

要运行该应用程序,请导航到创建的项目目录并运行以下命令。

polymer serve

现在打开浏览器并导航到http://127.0.0.1:8000/

作者:terry,如若转载,请注明出处:https://www.web176.com/polymer/2339.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月7日 上午11:35
下一篇 2021年4月7日 上午11:42

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注