Polimero - Molecole Elementi
Le molecole sono elementi che sono coperti da altre librerie JavaScript, che aiutano a sviluppare facilmente un'applicazione e vengono utilizzate per connettere un gruppo di plugin all'applicazione Polymer.
Molecules include un elemento chiamato marked-element che viene utilizzato per avvolgere la libreria contrassegnata.
Sintassi
<marked-element markdown = "text here">
<div class = "markdown-html"></div>
</marked-element>
L'elemento <marked-element> contiene il valore markdown e mostra quel valore a un elemento figlio con la classe markdown-html. È possibile utilizzare l'elemento contrassegnato nella propria applicazione eseguendo il comando seguente per installarlo nella directory del progetto.
bower install --save PolymerElements/marked-element
Questo comando installerà tutti gli elementi correlati dell'elemento contrassegnato nella cartella bower_components.
Esempio
L'esempio seguente specifica l'uso dell'elemento contrassegnato in Polymer.js. Crea un file index.html e aggiungi il seguente codice al suo interno.
<!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>
Ora crea un altro file chiamato mark-element.html e includi il codice seguente.
<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 Tutorialspoint
_Tutorialspoint_
</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>
Produzione
Per eseguire l'applicazione, accedere alla directory del progetto creato ed eseguire il comando seguente.
polymer serve
Ora apri il browser e vai a http://127.0.0.1:8000/. Di seguito sarà l'output.