投稿
  1. Web176教程首页
  2. Polymer教程

Polymer教程：Paper Elements

terry • • Polymer教程 • 阅读 681

Paper elements是用于实施Google的材料设计指南的有用的UI组件。下表显示了不同类型的paper elements。

 Paper Badge

paper-badge是表示状态或通知的圆形文本badge。它位于元素的右上角。通过添加icon属性可以包含一个图标。要获得目录中的paper-badge和图标，应在命令提示符下使用以下两个命令。

bower install --save PolymerElements/paper-badge  
bower install --save PolymerElements/iron-iconset

例子

下面的示例指定在Polymer.js中使用paper-badge元素。创建一个index.html文件，并在其中添加以下代码。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>
      <my-app></my-app>
   </body>
</html>

现在，打开my-app.html文件，并在其中包含以下代码。

<!doctype html>
<html>
   <link rel = 'import' href = 'bower_components/polymer/polymer.html'>
   <link rel = 'import' href = 'bower_components/paper-badge/paper-badge.html'>
   <link rel = 'import' href = 'bower_components/iron-iconset/iron-iconset.html'>
   <link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
   <link rel = "import" href = "bower_components/iron-icons/social-icons.html">
   <link rel = "import" href = "bower_components/iron-icons/communication-icons.html">

   <dom-module id = 'my-app'>
      <template>
         <div class = "container">
            <span >Messages</span>
            <paper-badge id = 'text' label = "4"></paper-badge>
         </div>
         
         <div class = "container" >
            <span id = 'text'>Thought </span>
            <paper-badge id = 'text' icon = "social:mood" label = "happy"></paper-badge>
         </div>
         
         <style is = "custom-style">
            .container {
               display: inline-block;
               margin-left: 30px;
               margin-right: 30px;
               padding-top: 30px;
            }
            /* Need to position the badge to look like a text superscript */
            .container > paper-badge {
               --paper-badge-margin-left: 20px;
               --paper-badge-margin-bottom: 0px;
            }
            #text {
               padding-top: 55px;
            }
         </style>
      </template>
      
      <script>
         Polymer ({
            is: 'my-app',
            ready: function() {
               this.async(function() {
               });
            }
         });
      </script>
   </dom-module>
</html>

输出

要运行该应用程序，请导航到创建的项目目录并运行以下命令。

polymer serve

Paper Button

paper-button是一个简单的按钮，从接触点起会产生波纹效果。要在目录中显示纸张按钮，应在命令提示符下使用以下命令。

bower install --save PolymerElements/paper-button

例子

以下示例指定在Polymer.js中使用paper-button元素。创建一个index.html文件，并在其中添加以下代码。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>
      <h2>Paper-Button Example</h2>
      <my-app></my-app>
   </body>
</html>

现在，打开my-app.html文件，并在其中包含以下代码。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">
<dom-module id = 'my-app'>
   <template>
      <div class = "container">
         <paper-button toggles raised class = "green">Active</paper-button>
         <paper-button disabled class = "disabled">Disabled</paper-button>
      </div>
      
      <div class = "container" ></div>
      <style is = "custom-style">
         #container {
            display: flex;
         }
         paper-button {
            font-family: 'Roboto', 'Noto', sans-serif;
            font-weight: normal;
            font-size: 14px;
            -webkit-font-smoothing: antialiased;
         }
         paper-button.green:hover {
            background-color: var(--paper-green-400);
         }
         paper-button.green {
            background-color: var(--paper-green-500);
            color: white;
         }
         paper-button.green[active] {
            background-color: var(--paper-red-500);
         }
         paper-button.disabled {
            color: black;
            background-color:#969696;
         }
      </style>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app',
         ready: function() {
            this.async(function() {
            });
         }
      });
   </script>
</dom-module>

输出

要运行该应用程序，请导航到创建的项目目录并运行以下命令：

polymer serve

Paper Card

paper-card是具有唯一相关数据的简单材料设计纸。要在您的目录中获得paper-card，应在命令提示符下使用以下命令。

bower install --save PolymerElements/paper-card

例子

以下示例指定在Polymer.js中使用纸卡元素。创建一个index.html文件，并在其中添加以下代码-

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>
      <h2>Paper-Card Example</h2>
      <my-app></my-app>
   </body>
</html>

现在，打开my-app.html文件，并在其中包含以下代码。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">
<link rel = "import" href = "bower_components/paper-card/paper-card.html">
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/iron-icons/communication-icons.html">

<dom-module id = 'my-app'>
   <template>
    
      <style is = "custom-style">
         body {
            display: flex;
            align-items: center;
            justify-content: center;
         }
         
         paper-card {
            max-width: 500px;
         }
         
         .cafe-header { @apply(--paper-font-headline); }
         .cafe-light { color: var(--paper-grey-600); }
         .cafe-location {
            float: right;
            font-size: 15px;
            vertical-align: middle;
         }
         
         .cafe-reserve { color: var(--google-blue-500); }
         iron-icon.star {
            --iron-icon-width: 16px;
            --iron-icon-height: 16px;
            color: var(--paper-amber-500);
         }
      </style>
      
      <paper-card >
         <div class = "card-content">
            <div class = "cafe-header">TutorialsPoint</div>
            <div class = "cafe-rating">
               <iron-icon class = "star" icon = "star"></iron-icon>
               <iron-icon class = "star" icon = "star"></iron-icon>
               <iron-icon class = "star" icon = "star"></iron-icon>
               <iron-icon class = "star" icon = "star"></iron-icon>
               <iron-icon class = "star" icon = "star"></iron-icon>
            </div>
         
            <p>Free Tutorials</p>
            <p class = "cafe-light">Enjoy theory and lab at the same time, right here
               online. An online Lab for IT Professionals</p>
         </div>
      </paper-card>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app',
         ready: function() {
            this.async(function() {
            });
         }
      });
   </script>
<dom-module>

输出

要运行该应用程序，请导航到创建的项目目录并运行以下命令。

polymer serve

Paper Checkbox

Paper Checkbox是用于选中或取消选中它的复选框。通常，复选框用于从集中选择多个选项。要在目录中找到纸质复选框，应在命令提示符下使用以下命令。

bower install --save PolymerElements/paper-checkbox

例子

以下示例指定在Polymer.js中使用paper-checkbox元素。创建一个index.html文件，并在其中添加以下代码。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>
      <h2>Paper-Card Example</h2>
      <my-app></my-app>
   </body>
</html>

现在，打开my-app.html文件，并在其中包含以下代码。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">
<link rel = "import" href = "bower_components/paper-card/paper-card.html">
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/iron-icons/communication-icons.html">
<link rel = "import" href = "bower_components/paper-checkbox/paper-checkbox.html">
<dom-module id = 'my-app'>
  
   <template>
      <style is = "custom-style">
         paper-checkbox {
            font-family: 'Roboto', sans-serif;
            margin: 24px;
         }
         paper-checkbox.styled {
            align-self: center;
            border: 1px solid var(--paper-green-200);
            padding: 8px 16px;
            --paper-checkbox-checked-color: var(--paper-green-500);
            --paper-checkbox-checked-ink-color: var(--paper-green-500);
            --paper-checkbox-unchecked-color: var(--paper-green-900);
            --paper-checkbox-unchecked-ink-color: var(--paper-green-900);
            --paper-checkbox-label-color: var(--paper-green-500);
            --paper-checkbox-label-spacing: 0;
            --paper-checkbox-margin: 8px 16px 8px 0;
            --paper-checkbox-vertical-align: top;
         }
      </style>
      
      <paper-checkbox class = "styled">
         Checkbox With a long label
      </paper-checkbox>
      <paper-checkbox disabled>Disabled</paper-checkbox>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app',
         ready: function() {
            this.async(function() {          
            });
         }
      });
   </script>
</dom-module>

输出

要运行该应用程序，请导航到创建的项目目录并运行以下命令。

polymer serve

Paper Drawer Panel

paper-drawer-panel是一个drawer panel，可向内/向外滑动以隐藏/露出主面板。抽屉的正常位置在主面板的左侧。drawer将以狭窄的布局堆叠在主面板的顶部。

要在您的目录中获得Paper-Drawer-Panel，您应该在命令提示符下使用以下命令。

bower install --save PolymerElements/paper-drawer-panel

例子

以下示例指定在Polymer.js中使用paper-drawer-panel元素。创建一个index.html文件，并在其中添加以下代码。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

现在，打开my-app.html文件，并在其中包含以下代码。

<link rel = 'import' href='bower_components/polymer/polymer.html'>
<link rel = "import" href="bower_components/paper-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">
<link rel = "import" href = "bower_components/paper-card/paper-card.html">
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/iron-icons/communication-icons.html">
<link rel = "import" href = "bower_components/paper-checkbox/paper-checkbox.html">
<link rel = "import" href = "bower_components/paper-drawer-panel/paper-drawer-panel.html">

<dom-module id = 'my-app'>
   <template>
      <style is = "custom-style">          
         paper-button {
            color: white;
            margin: 10px;
            background-color: green;
            white-space: nowrap;
         }
         button {
            display: block;
            line-height: 40px;
            background-color: transparent;
            border: none;
            font-size: 14px;
            margin: 20px;
         }
         #close { 
            color: white;
            margin: 10px;
            background-color: red;
            white-space: nowrap;
         }
      </style>
      
      <paper-drawer-panel id = "paperDrawerPanel" force-narrow>
         <div drawer>
            <button id = "close" tabindex = "0" paper-drawer-toggle raised>Close Drawer</button>
            <h3>Welcome to Tutorials point</h3>
         </div>
         
         <div main>
            <div>
               <paper-button paper-drawer-toggle raised>Open Drawer</paper-button>
            </div>
         </div>
      </paper-drawer-panel>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app',
         ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

输出

要运行该应用程序，请导航到创建的项目目录并运行以下命令。

polymer serve

Paper Dropdown Menu

paper-dropdown-menu是一个简单的下拉菜单，适用于可选内容。您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。

bower install --save PolymerElements/paper-dropdown-menu
bower install --save PolymerElements/paper-item
bower install --save PolymerElements/paper-listbox

例子

以下示例指定在Polymer.js中使用paper-dropdown-menu元素。创建一个index.html文件，并在其中添加以下代码。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

现在，打开my-app.html文件，并在其中包含以下代码。

<link rel = 'import' href='bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel = "import" href = "bower_components/paper-item/paper-item.html">
<link rel = "import" href = "bower_components/paper-listbox/paper-listbox.html">

<dom-module id = 'my-app'>
   <template>
      <style is = "custom-style">
         paper-dropdown-menu {
            width:250px;
         }
         paper-dropdown-menu {
            height: 200px;
            display: block;
         }
      </style>
      
      <h3>Paper-Dropdown-Menu Example </h3>
      <paper-dropdown-menu>
         <paper-listbox class = "dropdown-content" selected = "1">
            <paper-item>Java Tutorial</paper-item>
            <paper-item>C Tutorial</paper-item>
            <paper-item>PHP Tutorial</paper-item>
            <paper-item>C++ Tutorial</paper-item>
         </paper-listbox>
      </paper-dropdown-menu>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Paper Fab

Paper-fab是一个浮动动作按钮，当用户触摸该按钮时会产生波纹效果。此按钮可以将图像放置在中间。要在目录中获取paper-fab和ironicons，应在命令提示符下运行以下命令。

bower install --save PolymerElements/paper-fab

例子

以下示例指定在Polymer.js中使用paper-ripple元素。创建一个index.html文件，并在其中添加以下代码：

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

现在，打开my-app.html文件，并在其中包含以下代码。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/paper-fab/paper-fab.html">

<dom-module id = 'my-app'>
   <template>
      <style is = "custom-style">
         paper-fab {
            display: inline-block;
            margin: 8px;
         }
         paper-fab[mini] {
            --paper-fab-background: #FF5722;
         }
         paper-fab[label] {
            font-size: 20px;
            --paper-fab-background: #2196F3;
         }
      </style>

      <h3>Paper-Fab Example </h3>
      <paper-fab icon = "alarm-on"></paper-fab>
      <paper-fab mini icon = "android"></paper-fab>
      <paper-fab mini icon = "home"></paper-fab>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app',
         ready: function() {
            this.async(function() { 
            });
         }
      });
   </script>
</dom-module>

Paper Icon Button

纸形图标按钮是一个动作按钮，它代表诸如设置之类的特定动作。当用户触摸按钮时，它会产生连锁反应。您可以将这些按钮用作链接，也可以为按钮提供一些样式，如以下示例所示。要在目录中获取纸质图标按钮和铁质图标，应在工作状态下在命令提示符下运行以下命令。

bower install --save PolymerElements/paper-icon-button

例子

您的index.html文件应如下所示。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

您的my-app.html文件应如下所示。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/paper-icon-button/paper-icon-button.html">

<dom-module id = 'my-app'>
   <template>
      <h3>Paper-Icon-Button Example </h3>
      <paper-icon-button icon = "settings" ></paper-icon-button>settings
      <br>
      <paper-icon-button icon = "warning" style = "color: red;" ></paper-icon-button>warning
      <br>
      <paper-icon-button icon = "content-cut" ></paper-icon-button>content-cut
      <br>
      <paper-icon-button icon = "dashboard" ></paper-icon-button>dashboard
      <br>
      <paper-icon-button icon = "flight-takeoff" ></paper-icon-button>flight-takeoff
      <br>
   </template>

   <script>
      Polymer ({
         is: 'my-app',
         ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Paper Input

paper-input是结合样式的文本字段。要在工作状态下在目录中进行paper-input，应在命令提示符下运行以下命令。

bower install --save PolymerElements/paper-input

例子

您的index.html文件应如下所示。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

您的my-app.html文件应如下所示。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href="bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/paper-input/paper-input.html">

<dom-module id = 'my-app'>
   <template>
      <style>
         paper-input {
            max-width: 300px;    
         }
      </style>
      
      <h3>Paper-Input Example </h3>
      <paper-input label = "User Name">
         <iron-icon icon = "account-circle"  prefix></iron-icon>
      </paper-input>
      
      <paper-input label = "Password">
         <iron-icon icon = "lock-outline" prefix></iron-icon>
      </paper-input>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Paper Listbox

Paper-listbox是结合样式的易于使用的listbox控件。所选项目的文字为粗体。该元素具有多个选择选项和按键绑定，可在列表框中进行导航。要使目录中的paper-listbox处于工作状态，应在命令提示符下运行以下命令。

bower install --save PolymerElements/paper-listbox

例子

您的index.html文件应如下所示。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

您的my-app.html文件应如下所示。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-listbox/paper-listbox.html">
<link rel = "import" href = "bower_components/paper-item/paper-item.html">

<dom-module id = 'my-app'>
   <template>
      <style>
         paper-listbox {
            width: 200px;
            border: 1px dotted #ccc;
         }
         paper-item {
            cursor: pointer;
         }
      </style>
      
      <h3>Paper-Listbox Example </h3>
      <paper-listbox multi> 
         <paper-item>AngularJS Tutorial</paper-item>
         <paper-item disabled>C++ Tutorial</paper-item>
         <paper-item>C Tutorial</paper-item>
         <paper-item>Android Tutorial</paper-item>
      </paper-listbox>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Paper Material

Paper-material是一种具有抬高纸片效果的容器。要在工作状态下获取目录中的纸张材料，应在命令提示符下运行以下命令。

bower install --save PolymerElements/paper-material

例子

您的index.html文件应如下所示。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

您的my-app.html文件应如下所示。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-listbox/paper-listbox.html">
<link rel = "import" href = "bower_components/paper-material/paper-material.html">

<dom-module id = 'my-app'>
   <template>
      <style>
         paper-material {
            display: inline-block;
            background: white;
            box-sizing: border-box;
            margin: 7px;
            padding: 14px;
            border-radius: 3px;
         }
      </style>
      
      <h3>Paper-Material Example</h3>
      <paper-material elevation = "5">"Tutorialspoint"</paper-material>
      <paper-material elevation = "0">is</paper-material>
      <paper-material elevation = "5">Simply Easy Learning Online Tutorials</paper-material>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app',
         ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Paper Menu

Paper-menu是具有材料设计样式的简单易用菜单。所选项目的文字为粗体。该元素具有多个选择选项和按键绑定，可在列表框中进行导航。要使目录处于工作状态，请在命令提示符下运行以下命令。

bower install --save PolymerElements/paper-menu

例子

您的index.html文件应如下所示。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

您的my-app.html文件应如下所示。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-listbox/paper-listbox.html">
<link rel = "import" href = "bower_components/paper-menu/paper-menu.html">
<dom-module id = 'my-app'>
   <template>
      <style>
         .horizontal-section {
            padding: 15px;     
         }
         #paperitem {
            cursor: pointer;
            display: inline;      
            background: #ccc;
         }
      </style>
      
      <h3>Paper-Menu Example </h3>
      <div class = "horizontal-section">
         <paper-menu>
            <paper-item id = "paperitem">Home</paper-item>
            <paper-item id = "paperitem">About-Us</paper-item>
            <paper-item id = "paperitem">Contacts</paper-item>
            <paper-item id = "paperitem">Log-In</paper-item>
         </paper-menu>
      </div>        
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Paper Progress

进度条用于确定已完成任务的百分比。它向用户简要说明了需要多少时间才能完成任务。次要进度也可用于显示中间进度。要使目录在工作状态下处于纸张前进状态，应在命令提示符下运行以下命令。

bower install --save PolymerElements/paper-progress

例子

您的index.html文件应如下所示：

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

您的my-app.html文件应如下所示：

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-progress/paper-progress.html">

<dom-module id = 'my-app'>
   <template>
      <style>
         paper-progress {
            display: block;
            width: 30%;
            margin: 20px 0;
         }
      </style>
      
      <h3>Paper-Progress Example</h3>
      <p>70% completed</p>
      <paper-progress value = "70"></paper-progress>
      <p>45% completed</p>
      <paper-progress value = "45"></paper-progress>
      <p>20% completed</p>
      <paper-progress value = "20"></paper-progress>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Paper Radio Button

单选按钮是用于选中或取消选中的输入按钮。当单选按钮位于同一单选组中时，任何时候都只能检查该组中的一个单选按钮。要使目录中的单选按钮处于工作状态，应在命令提示符下运行以下命令。

bower install --save PolymerElements/paper-radio-button

例子

您的index.html文件应如下所示。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

您的my-app.html文件应如下所示。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-radio-button/paper-radio-button.html">
<dom-module id = 'my-app'>
   <template>
      <style>
         paper-progress {
            display: block;
            width: 30%;
            margin: 20px 0;
         }
      </style>
      
      <h3>Paper-Radio-Button Example</h3>
      <paper-radio-button>TutorialsPoint</paper-radio-button>     
      <paper-radio-button disabled>TutorialsPoint Disabled</paper-radio-button>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Paper Ripple

Paper-ripple是一种视觉上的波纹效果，当您单击按钮，图标或您选择的具有波纹效果的任何元素时都可以看到。该效果看起来像同心圆，从接触点开始运动。

您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。

bower install --save PolymerElements/paper-ripple

例子

以下示例指定在Polymer.js中使用paper-ripple元素。创建一个index.html文件，并在其中添加以下代码。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

现在，打开my-app.html文件，并在其中包含以下代码。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-ripple/paper-ripple.html">
<link rel = "import" href = "bower_components/paper-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">

<dom-module id = 'my-app'>
   <template>
      <style>
         .button {
            padding-left: -4px;
            background-color: #0f9d58;
            width: 150px;
            height: 42px;      
         }       
      </style>
    
      <h3>Paper-Ripple Example </h3>
      <div class = "button">
         <paper-button toggles raised>TutorialsPoint</paper-button>
         <paper-ripple></paper-ripple>
      </div>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Paper Slider

paper-slider使用户可以通过移动滑杆点从给定范围中选择一个值，并表示特定应用中音量或色彩饱和度的变化。

您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。

bower install --save PolymerElements/paper-slider

例子

以下示例指定在Polymer.js中使用paper-slider元素。创建一个index.html文件，并在其中添加以下代码。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

现在，打开my-app.html文件，并在其中包含以下代码。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-slider/paper-slider.html">

<dom-module id = 'my-app'>
   <template>
      <style>
         paper-slider.green {
            --paper-slider-knob-color: var(--paper-green-500);
            --paper-slider-active-color: var(--paper-green-500);
         }
      </style>
      
      <h3>Paper-Slider Example</h3>
      <div>Volume</div>
      <paper-slider class = "green"  max = "50" editable></paper-slider>
      <div>Brightness</div>
      <paper-slider class = "green"  max = "50" editable></paper-slider>
      <div>Color (Disabled)</div>
      <paper-slider class = "green" Disabled value = "11" max = "50" editable></paper-slider>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Paper Spinner

Paper-spinner是一个旋转器元素，它指示特定文件或具有多种颜色的图像的加载。

您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。

bower install --save PolymerElements/paper-spinner

例子

以下示例指定在Polymer.js中使用paper-spinner元素。创建一个index.html文件，并在其中添加以下代码。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

现在，打开my-app.html文件，并在其中包含以下代码。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-spinner/paper-spinner.html">
<link rel = "import" href = "bower_components/paper-spinner/paper-spinner-lite.html">

<dom-module id = 'my-app'>
   <template>
      <h3>Paper-Spinner Example</h3>
      <p>Tutorialspoint loading...
      <paper-spinner-lite active class = "orange"></paper-spinner-lite></p>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Paper Tabs

Paper-tabs有助于在不同的视图或页面之间导航。您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。

bower install --save PolymerElements/paper-tabs

例子

以下示例指定在Polymer.js中使用paper-tabs元素。创建一个index.html文件，并在其中添加以下代码。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

现在，打开my-app.html文件，并在其中包含以下代码。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-tabs/paper-tabs.html">
<link rel = "import" href = "bower_components/iron-pages/iron-pages.html">

<dom-module id = 'my-app'>
   <template>
      <style>
         paper-tabs {
            background-color: black;
            width: 50%;
            margin-bottom: 1px;
            color: #fff;
         }
      </style>
      
      <h3>Paper-Tabs Example</h3>
      <paper-tabs selected = "0">
      <paper-tab>Tab One</paper-tab>
      <paper-tab>Tab Two</paper-tab>
      </paper-tabs>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Paper Toast

Paper-toast提供警报通知，并且在特定时间仅允许一个通知。您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。

bower install --save PolymerElements/paper-toast

例子

以下示例指定在Polymer.js中使用paper-toast元素。创建一个index.html文件，并在其中添加以下代码。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

现在，打开my-app.html文件，并在其中包含以下代码。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-toast/paper-toast.html">
<link rel = "import" href = "bower_components/paper-button/paper-button.html">

<dom-module id = 'my-app'>
   <template>
      <style>
         #container {
            padding: 100px;
            border: 1px solid gray;
            width: 30%;
         }
      </style>
      
      <h3>Paper-Toast Example</h3>
      <div id = "container">
         <paper-button raised onclick = "toast.open()">Click Here</paper-button>
      </div>
      <paper-toast id = "toast" class = "fit-bottom" text = "Welcome to Tutorialspoint.">
      </paper-toast>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {
               toast.fitInto = container;      
            });
         }
      });
   </script>
</dom-module>

Paper Toggle Button

Paper-toggle是一个ON / OFF开关，用户可以通过单击或拖动该开关来切换状态。您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。

bower install --save PolymerElements/paper-toggle-button

例子

以下示例指定在Polymer.js中使用Paper-toggle元素。创建一个index.html文件，并在其中添加以下代码。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

现在，打开my-app.html文件，并在其中包含以下代码。

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-tabs/paper-tabs.html">
<link rel = "import" href = "bower_components/iron-pages/iron-pages.html">

<dom-module id = 'my-app'>
   <template>
      <style>
         paper-tabs {
            background-color: black;
            width: 50%;
            margin-bottom: 1px;
            color: #fff;
         }
      </style>
      
      <h3>Paper-Tabs Example</h3>
      <paper-tabs selected = "0">
         <paper-tab>Tab One</paper-tab>
         <paper-tab>Tab Two</paper-tab>
      </paper-tabs>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

作者：terry，如若转载，请注明出处：https://www.web176.com/polymer/2313.html

赞 (0)
打赏 支付宝 支付宝 微信 微信
terryterry
0 0
上一篇 2021年4月2日 下午5:43
下一篇 2021年4月6日 下午5:35

相关推荐

发表回复

登录后才能评论