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/。以下将是输出：

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，params或body更改时，将由该元素发出请求。如您所见，该组件具有多个可用属性-

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

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

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

例子

在下面的示例中，我们具有CDN中使用的iron-ajax和paper-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/。以下将是输出：

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/。以下将是输出：

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

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>

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

使用选项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>

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

使用选项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>

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

下面的代码显示灰色背景以及以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”按钮时，将显示一个下拉列表。

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/。以下将是输出。

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/。以下将是输出：

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/。以下将是输出。

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/。以下将是输出：

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

Polymer教程：Iron Elements

Iron A11y Keys

例子

输出

Iron Ajax

例子

输出

Iron Collapse

例子

输出

Iron Image

例子

Iron Dropdown

例子

输出

Iron Flex Layout

例子

输出

Iron Form

例子

输出

Iron Icon

例子

输出

Iron Swipable Container

例子

输出

相关推荐

发表回复