ui/webui/resources/cr_elements/v1_0/demo_element.html

   1 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
   2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
   3 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_button/cr_button.html">
   4 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_checkbox/cr_checkbox.html">
   5 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_collapse/cr_collapse.html">
   6 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_expand_button/cr_expand_button.html">
   7 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_input/cr_input.html">
   8 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_toggle_button/cr_toggle_button.html">
   9 <link rel="import" href="chrome://resources/cr_elements/v1_0/network/cr_network_icon.html">
  10
  11 <dom-module id="cr-demo-element">
  12   <link rel="import" type="css" href="demo_element.css">
  13   <template>
  14     <h3>cr-button</h3>
  15     <div class="layout vertical">
  16       <div class="layout horizontal">
  17         <cr-button>Button1</cr-button>
  18         <cr-button>Button2</cr-button>
  19         <cr-button>Button3</cr-button>
  20       </div>
  21       <cr-button raised>Raised Button</cr-button>
  22       <div class="layout horizontal">
  23         <cr-button toggles>Toggle Button1</cr-button>
  24         <cr-button toggles>Toggle Button2</cr-button>
  25       </div>
  26     </div>
  27
  28     <h3>cr-checkbox</h3>
  29     <div class="layout vertical">
  30       <div class="layout horizontal">
  31         <cr-checkbox checked="{{checkboxChecked1}}">Checkbox1</cr-checkbox>
  32         <cr-checkbox checked="{{checkboxChecked2}}">Checkbox2</cr-checkbox>
  33       </div>
  34       <cr-checkbox checked="{{checkboxChecked}}">Checkbox Linked</cr-checkbox>
  35       <cr-checkbox checked="{{checkboxChecked}}">
  36         <span>[[checkboxLabel]]</span>&nbsp;
  37         <span>[[subLabel]]</span>
  38       </cr-checkbox>
  39     </div>
  40
  41     <h3>cr-input</h3>
  42     <div class="layout vertical">
  43       <div class="layout horizontal">
  44         <cr-input label="CrInput1" value="{{inputValues.1}}"></cr-input>
  45         <span>InputValue.1=</span>
  46         <span>[[inputValues.1]]</span>
  47       </div>
  48       <div class="layout horizontal">
  49         <cr-input label="CrInput2" value="{{inputValues.2}}"></cr-input>
  50         <cr-input label="CrInput3" value="{{inputValues.3}}"></cr-input>
  51       </div>
  52       <cr-input no-label-float label="CrInput4" value="{{inputValues.4}}">
  53       </cr-input>
  54       <cr-input no-label-float label="CrInput5" value="{{inputValues.5}}">
  55       </cr-input>
  56     </div>
  57
  58     <h3>cr-toggle-button</h3>
  59     <div class="layout vertical">
  60       <cr-toggle-button checked="{{toggleButtonChecked}}">
  61         Toggle Button
  62       </cr-toggle-button>
  63       <cr-checkbox checked="{{toggleButtonChecked}}">
  64         Bound Checkbox
  65       </cr-checkbox>
  66       <div class="layout horizontal">
  67         <cr-toggle-button checked="{{toggleButtonChecked2}}">
  68           Toggle Button 2
  69         </cr-toggle-button>
  70         <cr-toggle-button checked="{{toggleButtonChecked3}}">
  71           Toggle Button 3
  72         </cr-toggle-button>
  73       </div>
  74     </div>
  75
  76     <h3>cr-collapse</h3>
  77     <div class="layout vertical">
  78       <cr-expand-button expanded="{{collapseOpened}}">
  79         Collapse 1
  80       </cr-expand-button>
  81       <cr-collapse opened="[[collapseOpened]]">
  82         <div class="layout vertical">
  83           <span>Collapsable Section 1</span>
  84           <cr-checkbox>Advanced option 1</cr-checkbox>
  85           <cr-checkbox>Advanced option 2</cr-checkbox>
  86         </div>
  87       </cr-collapse>
  88       <cr-button toggles active="{{collapseOpened2}}">
  89         Collapse 2
  90       </cr-button>
  91       <cr-collapse opened="[[collapseOpened2]]">
  92         <div class="layout vertical">
  93           <span>Collapsable Section 2</span>
  94         </div>
  95       </cr-collapse>
  96     </div>
  97
  98     <cr-expand-button toggles expanded="{{networkOpened}}">
  99       <span class="heading">cr-network-*</span>
 100     </cr-expand-button>
 101     <cr-collapse opened="[[networkOpened]]">
 102       <div class="layout vertical">
 103         <h3>cr-network-icon</h3>
 104         <div class="layout vertical">
 105           <div class="layout horizontal center">
 106             <cr-network-icon id="ethernet" network-type="Ethernet">
 107             </cr-network-icon>
 108             <span>Ethernet</span>
 109           </div>
 110           <div class="layout horizontal center">
 111             <cr-network-icon id="wifi" network-type="WiFi"></cr-network-icon>
 112             <span>WiFi (32px)</span>
 113           </div>
 114           <div class="layout horizontal center">
 115             <cr-network-icon id="cellular" network-type="Cellular">
 116             </cr-network-icon>
 117             <span>Cellular (16px)</span>
 118           </div>
 119         </div>
 120       </div>
 121     </cr-collapse>
 122
 123   </template>
 124   <script src="demo_element.js"></script>
 125 </dom-module>