Polymère - Mise en page de l'application

Les éléments de mise en page de l'application sont composés de composants tels que des barres d'outils, des tiroirs et des en-têtes. Ceux-ci sont utilisés pour créer des mises en page réactives de haute qualité simplement avec un balisage. Certains des éléments sont répertoriés dans le tableau suivant.

N ° Sr.	Éléments et description
1	app-box Cet élément fonctionne comme un conteneur et a des effets de défilement, des effets visuels basés sur la position de défilement.
2	app-drawer Il s'agit d'un tiroir de navigation qui glissera dans et hors de gauche ou de droite.
3	app-drawer-layout Cela positionnera le tiroir d'applications et d'autres contenus.
4	app-grid Ceci est utilisé pour créer des mises en page de grille réactives et fluides à l'aide de propriétés personnalisées.
5	app-header Cet élément fonctionne en haut de l'écran comme un conteneur pour les barres d'outils d'application et a des effets de défilement, des effets visuels basés sur la position de défilement.
6	app-header-layout Cet élément agit comme une couverture qui positionne l'en-tête de l'application et d'autres contenus.
sept	app-scrollpos-control Cet élément est utilisé pour enregistrer et restaurer la position de défilement lorsque plusieurs pages partagent le même défilement de documents.
8	app-toolbar Il s'agit d'une barre d'outils horizontale qui contient des éléments pouvant être utilisés pour l'étiquetage, la navigation, la recherche et d'autres actions.

Exemple

Pour utiliser des éléments de mise en page d'application, vous devez vous déplacer dans le répertoire du projet à l'aide de la commande suivante dans l'invite de commande.

bower install PolymerElements/app-layout --save

La commande ci-dessus installera les éléments de mise en page de l'application dans bower_componentsdossier. Ensuite, vous devez importer le fichier en utilisant la balise <link> dans votreindex.htmlfile.

<link rel = "import" href = "/bower_components/app-layout/app-layout.html">
<base href = "https://user-content-dot-custom-elements.appspot.com/PolymerElements/app-layout/v1.0.1/app-layout/">
<script src = "../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel = "import" href = "app-header/app-header.html">
<link rel = "import" href = "app-toolbar/app-toolbar.html">
<link rel = "import" href = "app-box/app-box.html">
<link rel = "import" href = "demo/sample-content.html">
<link rel = "import" href = "../iron-icons/iron-icons.html">

<style is = "custom-style">
   html, body {
      margin: 0;
      font-family: 'Roboto', 'Noto', sans-serif;
      -webkit-font-smoothing: antialiased;
      background: #f1f1f1;
      max-height: 368px;
   }
   app-toolbar {
      background-color: #4285f4;
      color: #fff;
   } 
   paper-icon-button + [main-title] {
      margin-left: 24px;
   }
   paper-progress {
      display: block;
      width: 100%;
      --paper-progress-active-color: rgba(255, 255, 255, 0.5);
      --paper-progress-container-color: transparent;
   }
   app-header {
      @apply(--layout-fixed-top);
      color: #fff;
      --app-header-background-rear-layer: {
         background-color: green;
      };
   }
   sample-content {
      padding-top: 64px;
   }
</style>

<app-header reveals>
   <app-toolbar>    
      <div main-title>First App</div>    
   </app-toolbar>
</app-header>

<sample-content></sample-content><br>
<app-box style = "height: 100px;border-style: groove;">
   <div main-title>Welcome to Tutorialspoint</div>
</app-box>

Production

Actualisez le serveur Polymer et ce qui suit sera la sortie.