ポリマー-分子要素

分子は、他のJavaScriptライブラリで覆われている要素であり、アプリケーションの開発を容易にし、プラグインのグループをPolymerアプリケーションに接続するために使用されます。

Moleculesには、マークされたライブラリのラッピングに使用される marked-element という要素が含まれています。

構文

<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でのmarked-elementの使用を指定しています。 indexlファイルを作成し、その中に次のコードを追加します。

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

   <body>
      <mark-elemnt></mark-elemnt>
   </body>
</html>

次に、mark-elementlという名前の別のファイルを作成し、次のコードを含めます。

<link rel = "import" href = "bower_components/polymer/polymer-elementl">
<link rel = "import" href = "bower_components/marked-element/marked-elementl">
<link rel = "import" href = "bower_components/paper-styles/demo-pagesl">

//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 finddevguides
               _finddevguides_
            </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/ に移動します。出力は次のようになります。

ポリマーでマークされた要素

Polymer-molecules-elements

ポリマー-分子要素

構文

例

出力

目次