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/polymer/v1_0/paper-checkbox/paper-checkbox.html">
   4 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_button/cr_button.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-input</h3>
  29     <div class="layout vertical">
  30       <div class="layout horizontal">
  31         <cr-input label="CrInput1" value="{{inputValues.1}}"></cr-input>
  32         <span>InputValue.1=</span>
  33         <span>[[inputValues.1]]</span>
  34       </div>
  35       <div class="layout horizontal">
  36         <cr-input label="CrInput2" value="{{inputValues.2}}"></cr-input>
  37         <cr-input label="CrInput3" value="{{inputValues.3}}"></cr-input>
  38       </div>
  39       <cr-input no-label-float label="CrInput4" value="{{inputValues.4}}">
  40       </cr-input>
  41       <cr-input no-label-float label="CrInput5" value="{{inputValues.5}}">
  42       </cr-input>
  43     </div>
  44
  45     <h3>cr-toggle-button</h3>
  46     <div class="layout vertical">
  47       <cr-toggle-button checked="{{toggleButtonChecked}}">
  48         Toggle Button
  49       </cr-toggle-button>
  50       <paper-checkbox checked="{{toggleButtonChecked}}">
  51         Bound Checkbox
  52       </paper-checkbox>
  53       <div class="layout horizontal">
  54         <cr-toggle-button checked="{{toggleButtonChecked2}}">
  55           Toggle Button 2
  56         </cr-toggle-button>
  57         <cr-toggle-button checked="{{toggleButtonChecked3}}">
  58           Toggle Button 3
  59         </cr-toggle-button>
  60       </div>
  61     </div>
  62
  63     <h3>cr-collapse</h3>
  64     <div class="layout vertical">
  65       <cr-expand-button expanded="{{collapseOpened}}">
  66         Collapse 1
  67       </cr-expand-button>
  68       <cr-collapse opened="[[collapseOpened]]">
  69         <div class="layout vertical">
  70           <span>Collapsable Section 1</span>
  71           <paper-checkbox>Advanced option 1</paper-checkbox>
  72           <paper-checkbox>Advanced option 2</paper-checkbox>
  73         </div>
  74       </cr-collapse>
  75       <cr-button toggles active="{{collapseOpened2}}">
  76         Collapse 2
  77       </cr-button>
  78       <cr-collapse opened="[[collapseOpened2]]">
  79         <div class="layout vertical">
  80           <span>Collapsable Section 2</span>
  81         </div>
  82       </cr-collapse>
  83     </div>
  84
  85     <cr-expand-button toggles expanded="{{networkOpened}}">
  86       <span class="heading">cr-network-*</span>
  87     </cr-expand-button>
  88     <cr-collapse opened="[[networkOpened]]">
  89       <div class="layout vertical">
  90         <h3>cr-network-icon</h3>
  91         <div class="layout vertical">
  92           <div class="layout horizontal center">
  93             <cr-network-icon id="ethernet" network-type="Ethernet">
  94             </cr-network-icon>
  95             <span>Ethernet</span>
  96           </div>
  97           <div class="layout horizontal center">
  98             <cr-network-icon id="wifi" network-type="WiFi"></cr-network-icon>
  99             <span>WiFi (32px)</span>
 100           </div>
 101           <div class="layout horizontal center">
 102             <cr-network-icon id="cellular" network-type="Cellular">
 103             </cr-network-icon>
 104             <span>Cellular (16px)</span>
 105           </div>
 106         </div>
 107       </div>
 108     </cr-collapse>
 109
 110   </template>
 111   <script src="demo_element.js"></script>
 112 </dom-module>