Polímero - Diseño de la aplicación

Los elementos de diseño de la aplicación se componen de componentes como barras de herramientas, cajones y encabezados. Se utilizan para crear diseños receptivos de alta calidad solo con marcado. Algunos de los elementos se enumeran en la siguiente tabla.

No Señor.	Elementos y descripción
1	app-box Este elemento funciona como contenedor y tiene efectos de desplazamiento, efectos visuales basados en la posición del desplazamiento.
2	app-drawer Este es un cajón de navegación que se deslizará hacia adentro y hacia afuera de izquierda a derecha.
3	app-drawer-layout Esto colocará el cajón de aplicaciones y otros contenidos.
4	app-grid Esto se usa para crear diseños de cuadrícula fluidos y receptivos usando propiedades personalizadas.
5	app-header Este elemento funciona en la parte superior de la pantalla como un contenedor para las barras de herramientas de la aplicación y tiene efectos de desplazamiento, efectos visuales basados en la posición de desplazamiento.
6	app-header-layout Este elemento actúa como una cubierta que posiciona el encabezado de la aplicación y otros contenidos.
7	app-scrollpos-control Este elemento se utiliza para guardar y restaurar la posición de desplazamiento cuando varias páginas comparten el mismo desplazador de documentos.
8	app-toolbar Es una barra de herramientas horizontal que contiene elementos que se pueden usar para etiquetar, navegar, buscar y otras acciones.

Ejemplo

Para usar elementos de diseño de aplicaciones, debe moverse al directorio del proyecto usando el siguiente comando en el símbolo del sistema.

bower install PolymerElements/app-layout --save

El comando anterior instalará los elementos de diseño de la aplicación en bower_componentscarpeta. Luego, debe importar el archivo usando la etiqueta <link> en suindex.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>

Salida

Actualice el servidor Polymer y lo siguiente será el resultado.

↰ Previous page