Polymère - Éléments de molécules

Les molécules sont des éléments qui sont couverts par d'autres bibliothèques JavaScript, qui aident à développer facilement une application et sont utilisés pour connecter un groupe de plugins à l'application Polymer.

Molecules comprend un élément appelé marked-element qui est utilisé pour envelopper la bibliothèque marquée.

Syntaxe

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

L'élément <marked-element> contient la valeur de démarque et affiche cette valeur dans un élément enfant avec la classe markdown-html. Vous pouvez utiliser l'élément marqué dans votre application, en exécutant la commande suivante pour l'installer dans le répertoire de votre projet.

bower install --save PolymerElements/marked-element

Cette commande installera tous les éléments liés de mark-element sous le dossier bower_components.

Exemple

L'exemple suivant spécifie l'utilisation de l'élément marqué dans Polymer.js. Créez un fichier index.html et ajoutez-y le code suivant.

<!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>

Créez maintenant un autre fichier appelé mark-element.html et incluez le code suivant.

<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>

Production

Pour exécuter l'application, accédez au répertoire de projet créé et exécutez la commande suivante.

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8000/. Voici la sortie.