Polymer教程:Iron Elements

与“ Developer Preview”版本匹配时,Iron Elements用于创建应用程序,也称为核心元素。

Iron A11y Keys

所述<Iron A11y Keys>元素用于使用跨浏览接口的过程键盘命令。

属性指示哪些键的组合的事件将被触发。它接受修饰键,例如Shift,Control,Alt,Meta和一些常见的键盘键,例如az,0-9,F1-F12,Page Up,Page Down,向左箭头,向右箭头,Home,End,Escape,Space, Tab,然后按Enter。

所有键都应缩短并且应小写。例如,向右箭头表示向右,向上翻页用于向上翻页,控制用于ctrl,转义用于esc,F5用于f5,依此类推。

例子

要使用iron-a11y-keys元素,请在命令提示符下导航到您的项目文件夹,然后使用以下命令。

bower install PolymerElements/iron-a11y-keys --save

上面的命令将iron-a11y-keys元素安装在bower_components文件夹中。接下来,使用以下命令将iron-a11y-keys文件导入index.html中。

<link rel = "import" href = "/bower_components/iron-a11y-keys/iron-a11y-keys.html">

下面的示例演示了iron-a11y-keys元素的用法。

<!DOCTYPE html>
<html>
   <head>
      <base href = "http://polygit.org/components/">
      <meta name = "viewport" content = "width = device-width">
      <title>iron-a11y-keys</title>
      <link rel = "import" href = "polymer/polymer.html">
      <link rel = "import" href = "iron-a11y-keys/iron-a11y-keys.html">
      <link rel = "import" href = "paper-input/paper-input.html">
   </head>
    
   <body>
      <demo-keys></demo-keys>
      <dom-module id = "demo-keys">
        
         <template>
            <iron-a11y-keys target = "[[_target]]"
               keys = "shift+enter enter esc pageup pagedown up down left right space" 
               on-keys-pressed = "_onKeyPress"></iron-a11y-keys>
             
            <h4>Press any of the below keys and check console.</h4>
            <p>shift + enter, enter, esc, pageup, pagedown, up, down, left, right,
               space.</p>
               
            <paper-input type = "text" value = "{{_value::input}}" id = "input" />
         </template>
           
         <script>
            Polymer ({
               is: 'demo-keys', properties: {
                  _value: {
                     type: String
                  },
                  _target: {
                     value: function() {
                        return this.$.input;
                     }
                  }
               },
               _onKeyPress: function(e) {
                  e.detail.keyboardEvent.preventDefault();
                  console.log(e.detail.combo);
               }         
            });
         </script>
      </dom-module>
   </body>
</html>   

输出

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

polymer serve

现在,打开浏览器并导航到http://127.0.0.1:8081/。以下将是输出:

Polymer教程:Iron Elements

Iron Ajax

<iron-ajax>元素在进行ajax调用时很有用。

<iron-ajax
   auto url = "https://www.googleapis.com/youtube/v3/search"
   params = '{"part":"snippet", "q":"polymer", "key": "YOUTUBE_API_KEY", "type": "video"}'
   handle-as = "json"
   on-response = "handleResponse"
   debounce-duration = "500">
</iron-ajax>

如果将auto设置为true,则当元素的属性url,paramsbody更改时,将由该元素发出请求。如您所见,该组件具有多个可用属性-

  • url-将URL放置到API端点的属性。
  • params-一个属性,您可以在其中传递带有请求参数的JSON。
  • handle- as-指定必须在响应属性中存储哪些数据。默认情况下,数据以json格式存储。
  • on-response-可以通过哪种方法告诉响应来告诉Iron-ajax组件的属性。

顺序更改多个属性会导致自动生成的请求被反跳。

您可以在元素上调用generateRequest以显式触发请求。

例子

在下面的示例中,我们具有CDN中使用的iron-ajaxpaper-input组件的链接。

<!DOCTYPE html>
<html>
   <head>
      <title>iron-ajax</title>
      <link rel = "import"
         href = "https://cdn.rawgit.com/download/polymer/cdn/1.0.1/lib/paper-input/paper-input.html">
      <link rel = "import"
         href = "https://cdn.rawgit.com/download/polymer/cdn/1.0.1/lib/iron-ajax/iron-ajax.html">
   </head>
	  
   <body>
      <dom-module id = "data-bind">

         <template>
            <paper-input label = "Write something..." id = "input" value = "{{q::input}}"
               autofocus>
            </paper-input>
            <p>You typed: <b>{{q}}</b></p>
            <p>Echo: <b>{{echo}}</b></p>
           
            <iron-ajax auto
               url = "http://dict.leo.org/dictQuery/m-query/conf/ende/query.conf/strlist.json"
               params = "{'q': q}" handle-as = "json" on-response = "_handleResponse"
               debounce-duration = "500">
            </iron-ajax>
         </template>
       
         <script>
            (function () {
               Polymer ({
                  is: 'data-bind', properties: {
                     echo: {
                        type: String, value: 'waiting ...', reflectToAttribute: true
                     }
                  },
                  _handleResponse: function(event, request) {
                     var response = request.response;
                     this.echo = JSON.stringify(response);
                  }
               });
            })();
         </script>
      </dom-module>
    
      <data-bind></data-bind>
   </body>
</html>

输出

要运行该应用程序,请导航到您的项目目录并运行以下命令:

polymer serve

现在打开浏览器并导航到http://127.0.0.1:8081/。以下将是输出:

Polymer教程:Iron Elements

Iron Collapse

<iron-collapse>元素用于折叠内容。要显示或隐藏内容,请使用open或toggle()。

可折叠元素的最大高度/最大宽度由铁折叠元素自动调整。

用于样式的定制属性和mixin如下-

  • –iron-collapse-transition-duration-这是动画过渡的持续时间。默认值为300ms。

例子

要实现iron-collapse元素,请在命令提示符下导航到您的项目文件夹,然后使用以下命令:

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

上面的命令将两个元素都安装在bower_components文件夹中。然后,您必须将两个文件都导入index.html文件中,如下所示:

<link rel = "import" href = "iron-collapse/iron-collapse.html">
<link rel = "import" href = "paper-toggle-button/paper-toggle-button.html">

以下示例演示了iron-collapse元素的使用:

<!DOCTYPE html>
<html>
   <head>
      <title>iron-collapse</title>
      <base href = "http://polygit.org/polymer+:master/components/">
      <link rel = "import" href = "polymer/polymer.html">
      <link rel = "import" href = "paper-toggle-button/paper-toggle-button.html">
      <link rel = "import" href = "iron-collapse/iron-collapse.html">

      <style>
         #coll {
            display: flex;
            width: 500px;
         }
         demo-collapse{
            border: 2px solid LightGrey;
            width: 50%;
         }
      </style>
   </head>

   <body>
      <h3>Iron Collapse Example</h3>
      <dom-module id = "demo-collapse">
         <template>
            <paper-toggle-button checked = "{{opened}}">Collapse this</paper-toggle-button>
            <iron-collapse opened = "[[opened]]">
               <div><p>This is polymerjs iron-collapse.</p></div>
            </iron-collapse>
         </template>
      </dom-module>

      <script>
         Polymer ({
            is: 'demo-collapse',
         });
      </script>

      <div id = "coll">
         <demo-collapse></demo-collapse>
      </div>
   </body>
</html>

输出

要运行该应用程序,请导航到您的项目目录并使用以下命令运行:

polymer serve

现在打开浏览器并导航到http://127.0.0.1:8081/。以下将是输出:

Polymer教程:Iron Elements

当您单击切换按钮时,将显示以下内容:

Polymer教程:Iron Elements

Iron Image

<iron-image>是图像显示元素。图像会显示有用的大小调整和预加载选项。

上浆选择或者crops (cover)或letterboxes (contain)中的图像,从得到呈现适合其指定的大小,而加载选项块内的图像。同时,您可以使用元素的CSS背景颜色作为占位符,也可以使用data-URI。在淡出选项淡出占位符的图像/显色后的图像。

<iron-image>元素与<img scr =“ ….”>类似,如以下代码片段所示-

<iron-image src = "http://lorempixel.com/600/600"></iron-image>

例子

要使用iron-image元素,请使用bower安装iron-image元素,并将其导入到index.html文件中。以下代码显示一个普通图像:

<!DOCTYPE html>
<html>
   <head>
      <title>iron-image</title>
      <base href = "https://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "iron-image/iron-image.html">
   </head>
  
   <body>
      <h1>Iron-Image Example</h1>
      <iron-image src = "http://www.tcgreenmedia.com/wp-content/uploads/2014/07/google-developers-v01-510x380.png" 
         alt = "iron-image" ></iron-image>
   </body>
</html>   

您将获得输出,如以下屏幕截图所示。

Polymer教程:Iron Elements

使用选项sizing =“ cover”

<!DOCTYPE html>
<html>
   <head>
      <title>iron-image</title>
      <base href = "https://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "iron-image/iron-image.html">
  
      <style>
         #sizing-cover {
            width: 140px;
            height: 140px;
            background: LightGrey;
            margin-left: 20px;
         }
      </style>
   </head>
  
   <body>
      <h1>Example using sizing = "cover"</h1>
      <iron-image src = "http://www.tcgreenmedia.com/wp-content/uploads/2014/07/google-developers-v01-510x380.png"
         sizing = "cover" id = "sizing-cover" alt = "iron-image" ></iron-image>
   </body>
</html>     

您将获得输出,如以下屏幕截图所示。

Polymer教程:Iron Elements

使用选项sizing =“ contain”

<!DOCTYPE html>
<html>
   <head>
      <title>iron-image</title>
      <base href = "https://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "iron-image/iron-image.html">
  
      <style>
         #sizing-contain {
            width: 140px;
            height: 140px;
            background: #ddd;
            margin-left: 20px;
         }
      </style>
   </head>
  
   <body>
      <h1>Example using sizing = "contain"</h1>
      <iron-image src = "http://www.tcgreenmedia.com/wp-content/uploads/2014/07/google-developers-v01-510x380.png"
         sizing = "contain" id = "sizing-contain" alt = "iron-image" ></iron-image>
   </body>
</html>    

您将获得输出,如以下屏幕截图所示。

Polymer教程:Iron Elements

下面的代码显示灰色背景以及以base-64编码的占位符,直到加载图像为止。

<iron-image style = "width:800px; height:600px; background-color: grey;"
   placeholder = "data:image/jpeg;base64,..."
   sizing = "cover" preload src = "http://lorempixel.com/600/600"></iron-image>

渲染图像后,以下代码淡出图像。

<iron-image style = "width:800px; height:600px; background-color: grey;"
   sizing = "cover" preload fade src = "http://lorempixel.com/600/600"></iron-image>

下表显示了<iron-image>元素的自定义属性。

序号自定义属性和说明默认
1–iron-image-placeholder:
它是用于#placeholder样式的mixin。
{}
2–iron-image-width:
使用此属性可以设置铁图像包裹的图像的宽度。
auto
3–iron-image-height:
使用此属性可以设置图像的高度,并由ironimage包裹。
auto

Iron Dropdown

<iron-dropdown>元素用于显示隐藏的下拉菜单内容-.dropdown-content。使用铁下拉菜单的元素的实现可能包括组合框,菜单按钮,选择等。

<iron-dropdown>元素显示相对于.dropdown-content的位置配置的.dropdown-trigger的属性。

例子

要实现iron-dropdown元素,请在命令提示符下导航到您的项目文件夹,然后使用以下命令。

bower install PolymerElements/iron-dropdown --save 

以下示例演示了铁下拉元素的用法-

<!DOCTYPE html>
<html>
   <head>
      <title>iron-dropdown</title>
      <base href = "http://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "iron-dropdown/demo/x-select.html">
      <link rel = "import" href = "paper-input/paper-input.html">
      <link rel = "import" href = "paper-button/paper-button.html">
  
      <style>
         .dropdown-trigger{
            background-color: DarkCyan ;
            border-radius: 4px;
            color: white;
         }
         .dropdown-content {
            background-color: white;
            line-height: 15px;
            border-radius: 5px;
            box-shadow: 0px 2px 5px #ccc;
            padding: 20px;
         }
      </style>
   </head>
  
   <body>
      <h3>Iron-dropdown Example</h3>
      <x-select>
         <paper-button class = "dropdown-trigger">Click Me !</paper-button>
         <div class = "dropdown-content">
            <p>Hello !!! <br/>
            <p>This is an iron-dropdown <br/> example of Polymerjs.</p>
         </div>
      </x-select>
   </body>
</html>

如示例所示,名为.dropdown-content的类将被隐藏,直到您在元素上调用open方法为止。

输出

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

polymer serve

现在打开浏览器并导航到http://127.0.0.1:8081/。当您单击“CLICK ME”按钮时,将显示一个下拉列表。

Polymer教程:Iron Elements

Iron Flex Layout

<iron-flex-layout>元素可用于提供CSS灵活框布局,也称为flexbox

flexbox可以两种不同的方式使用:

  • 布局类-这是一个样式表,提供基于类的flexbox的某些规则,其中布局属性直接在标记中定义。
  • 自定义CSS混合-这是一个包含自定义CSS混合的样式表,我们可以在@apply函数的帮助下将其应用到CSS规则中。

例子

要使用iron-flex-layout元素,请在命令提示符下导航到您的项目文件夹,然后使用以下命令:

bower install PolymerElements/iron-flex-layout --save

上面的命令将iron-flex-layout元素安装在bower_components文件夹中。接下来,使用以下命令将iron-flex-layout文件导入index.html中。

<link rel = "import" href = "/bower_components/iron-flex-layout/iron-flex-layout.html">

下面的示例演示了Iron-flex-layout元素的用法:

<!DOCTYPE html>
<html>
   <head>
      <title>iron-flex-layout</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import"
         href = "bower_components/iron-flex-layout/classes/iron-flex-layout.html">
    
      <style>
         body {
            font-weight: 300;
         }
         div {
            border: 2px solid DarkCyan ;
            background-color: white;
         }
         .layout {
            margin-bottom: 25px;
            background-color: DarkCyan ;
         }
         p {
            margin: 10px;
         }
      </style>
   </head>
   
   <body>
      <h2>Iron-Flex-Layout</h2>
      <div class = "horizontal layout">
         <div><p>Delta</p></div>
         <div><p>Epsilon (flex)</p></div>
         <div><p>Zeta</p></div>
      </div>
   </body>
</html>

输出

要运行该应用程序,请导航到您的项目目录并运行以下命令-

polymer serve

现在打开浏览器并导航到http://127.0.0.1:8081/。以下将是输出。

Polymer教程:Iron Elements

Iron Form

<iron-form>是一个HTML <form>元素,用于验证和提交任何自定义元素和本机元素。同时支持get和post方法,并且使用ironajax元素将数据提交到操作URL。

默认情况下,本机button元素提交以下形式-

<form is = "iron-form" id = "form" method = "post" action = "/form/handler">
   <paper-input name = "password" label = "Password"></paper-input>
   <input name = "address">
   ...
</form>

如果要从自定义元素的单击处理程序提交表单,则显式调用该表单的Submit方法,如以下命令所示。

<paper-button raised onclick = "submitForm()">Submit</paper-button>

function submitForm() {
   document.getElementById('form').submit();
}	

以下代码显示了要自定义发送到服务器的请求时可以监听的iron-form-presubmit事件。

form.addEventListener('iron-form-presubmit', function() {
   this.request.method = 'put';
   this.request.params = someCustomParams;
});

例子

要实现Iron-form元素,请安装必要的元素并将其导入到index.html文件中。

以下示例演示了铁型元素的使用-

<!DOCTYPE html>
<html>
   <head>
      <title>iron-form</title>
      <base href = "https://polygit.org/polymer+1.5.0/components/">
      <script src = "webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "polymer/polymer.html">
      <link rel = "import" href = "iron-form/iron-form.html">
      <link rel = "import" href = "paper-input/paper-input.html">
      <link rel = "import" href = "paper-button/paper-button.html">
      <link rel = "import" href = "paper-dropdown-menu/paper-dropdown-menu.html">
      <link rel = "import" href = "paper-menu/paper-menu.html">
      <link rel = "import" href = "paper-item/paper-item.html">
  
      <style>
         .paperbtn {
            background: #4682B4;
            color: white;
         }
         .paperinput{
            width: 25%;
         }
         .menu{
            width:25%;
         }
      </style>
   </head>
  
   <body>
      <form is = "iron-form" method = "get" action = "/" id = "basic">
         <paper-input class = "paperinput" name = "name" label = "Enter your name" required<
         </paper-input>
         <br>
         <input type = "checkbox" name = "vehicle" value = "bike"> I have a bike
         <br>
         <input type = "checkbox" name = "vehicle" value = "car"> I have a car
         <br>
     
         <paper-dropdown-menu class = "menu" label = "Icecream Flavours" name = "Flavours">
            <paper-menu class = "dropdown-content">
               <paper-item value = "vanilla">Vanilla</paper-item>
               <paper-item value = "strawberry">Strawberry</paper-item>
               <paper-item value = "caramel">Caramel</paper-item>
            </paper-menu>
         </paper-dropdown-menu><br>
       
         <paper-button class = "paperbtn" raised onclick = "_submit(event)">Submit</paper-button>
         <paper-button class = "paperbtn" raised onclick = "_reset(event)">Reset</paper-button>
         <h4>You entered the details:</h4>
         <div class = "output"></div>
      </form>
   
      <script>
         function _submit(event) {
            Polymer.dom(event).localTarget.parentElement.submit();
         }
         function _reset(event) {
            var form  =  Polymer.dom(event).localTarget.parentElement
            form.reset();
            form.querySelector('.output').innerHTML  =  '';
         }
         basic.addEventListener('iron-form-submit', function(event) {
            this.querySelector('.output').innerHTML  =  JSON.stringify(event.detail);
         });
      </script>
   </body>
</html>

输出

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

polymer serve

现在打开浏览器并导航到http://127.0.0.1:8081/。以下将是输出:

Polymer教程:Iron Elements

Iron Icon

<iron-icon>元素用于显示单个图标。默认图标大小为24px正方形。

可以使用src显示图标,如下所示:

<iron-icon src = "icon.png"></iron-icon>

以下代码显示了如何设置图标的大小。

<iron-icon class = "big" src = "big_icon.png"></iron-icon>
<style is = "custom-style">
   .big {
      --iron-icon-height: 20px;
      --iron-icon-width: 20px;
   }
</style>

铁元素中有各种图标集。对于默认的图标集,您需要在索引文件中导入iron-icons.html文件,并使用icon属性定义图标,如以下命令所示。

<link rel = "import" href = "/components/iron-icons/iron-icons.html">

<iron-icon icon = "android"></iron-icon>

您还可以通过导入iron-icons / <iconset> icons.html文件并将图标定义为<iconset>:<icon>来使用不同的内置图标集。

例如,您要使用一个通讯图标,那么代码将为:

<link rel = "import" href = "/components/iron-icons/communication-icons.html">

<iron-icon icon = "communication:email"></iron-icon>

您还可以通过创建自定义图标集来使用图标,如下所示:

<iron-icon icon = "fruit:berry"></iron-icon>

下表显示了用于样式设置的自定义属性-

序号物业名称和描述
1–iron-icon
这是一个应用于图标的mixin。默认值为{}
2–iron-icon-width
它指定图标的宽度。默认值为24px。
3–iron-icon-height
它指定图标的高度。默认值为24px。
4–iron-icon-fill-color
用于填充SVG图标颜色的属性。默认值为currentcolor。
5–iron-icon-stroke-color
用于填充SVG图标的笔触颜色的属性。

例子

要使用iron-icon元素,请在命令提示符下导航到您的项目文件夹,然后使用以下命令:

bower install PolymerElements/iron-icon --save

以下示例演示了铁图标元素的使用:

<!DOCTYPE html>
<html>
   <head>
      <title>iron-icon</title>
      <base href = "https://user-content-dot-custom-elements.appspot.com/PolymerElements/iron-icon/v1.0.13/iron-icon/">
      <script src = "../webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "../iron-icons/iron-icons.html">
      <link rel = "import" href = "iron-icon.html">
   </head>

   <body>
      <h2>Iron-Icon Example</h2>
      <iron-icon icon = "android"></iron-icon>
   </body>
</html>

输出

要运行该应用程序,请导航到您的项目目录并运行以下命令:

polymer serve

现在打开浏览器并导航到http://127.0.0.1:8081/。以下将是输出。

Polymer教程:Iron Elements

Iron Swipable Container

<iron-swipeable-container>是一个交换其嵌套子代(即自定义或本机元素)的容器。默认过渡是水平或曲线,但是您可以修改过渡的持续时间和属性。

您可以使用-禁用刷卡-

  • disable-swipe class-可用于禁用单个孩子的刷卡。
  • disable-swipe属性-可用于禁用整个容器的滑动。

例子

要实现iron-swipeable-container元素,请在命令提示符下导航到您的项目文件夹,然后使用以下命令:

bower install PolymerElements/iron-swipable-container --save

上面的命令在bower_components文件夹中安装iron-swipeable-container元素。然后,您必须将其导入到index.html文件中,如以下命令所示:

<link rel = "import" href = "iron-swipable-container/iron-swipable-container.html">

以下示例演示了可铁擦拭容器元素的使用:

<!DOCTYPE html>
<html>
   <head>
      <title>iron-swipable-container</title>
      <base href = https://polygit.org/polymer+1.4.0/components/">
      <script src = webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = import" href = polymer/polymer.html">
      <link rel = import" href = iron-swipeable-container/iron-swipeable-container.html">

      <style>
         .content {
            background-color: LightGrey;
            width: 16%;
            padding: 10px 10px 10px 10px; 
         }
      </style>
   </head>

   <body>
      <h2>Iron-Swipable-Container Example</h2>
      <iron-swipeable-container>
         <div class = content">Swipe me left or right</div>
      </iron-swipeable-container>
   </body>
</html>

输出

要运行该应用程序,请导航到您的项目目录并运行以下命令:

polymer serve

现在打开浏览器并导航到http://127.0.0.1:8081/。以下将是输出:

Polymer教程:Iron Elements

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

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

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注