Polymer-molecules-elements
提供:Dev Guides
ポリマー-分子要素
分子は、他の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/ に移動します。 出力は次のようになります。