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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="chrome://resources/cr_elements/v1_0/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/v1_0/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/cr_elements/v1_0/cr_collapse/cr_collapse.html">
<link rel="import" href="chrome://resources/cr_elements/v1_0/cr_expand_button/cr_expand_button.html">
<link rel="import" href="chrome://resources/cr_elements/v1_0/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/v1_0/cr_network_icon/cr_network_icon.html">
<link rel="import" href="chrome://resources/cr_elements/v1_0/cr_toggle_button/cr_toggle_button.html">

<dom-module id="cr-demo-element">
  <link rel="import" type="css" href="demo_element.css">
  <template>
    <h3>cr-button</h3>
    <div class="layout vertical">
      <div class="layout horizontal">
        <cr-button>Button1</cr-button>
        <cr-button>Button2</cr-button>
        <cr-button>Button3</cr-button>
      </div>
      <cr-button raised>Raised Button</cr-button>
      <div class="layout horizontal">
        <cr-button toggles>Toggle Button1</cr-button>
        <cr-button toggles>Toggle Button2</cr-button>
      </div>
    </div>

    <h3>cr-checkbox</h3>
    <div class="layout vertical">
      <div class="layout horizontal">
        <cr-checkbox checked="{{checkboxChecked1}}">Checkbox1</cr-checkbox>
        <cr-checkbox checked="{{checkboxChecked2}}">Checkbox2</cr-checkbox>
      </div>
      <cr-checkbox checked="{{checkboxChecked}}">Checkbox Linked</cr-checkbox>
      <cr-checkbox checked="{{checkboxChecked}}">
        <span>[[checkboxLabel]]</span>&nbsp;
        <span>[[subLabel]]</span>
      </cr-checkbox>
    </div>

    <h3>cr-input</h3>
    <div class="layout vertical">
      <div class="layout horizontal">
        <cr-input label="CrInput1" value="{{inputValues.1}}"></cr-input>
        <span>InputValue.1=</span>
        <span>[[inputValues.1]]</span>
      </div>
      <div class="layout horizontal">
        <cr-input label="CrInput2" value="{{inputValues.2}}"></cr-input>
        <cr-input label="CrInput3" value="{{inputValues.3}}"></cr-input>
      </div>
      <cr-input no-label-float label="CrInput4" value="{{inputValues.4}}">
      </cr-input>
      <cr-input no-label-float label="CrInput5" value="{{inputValues.5}}">
      </cr-input>
    </div>

    <h3>cr-toggle-button</h3>
    <div class="layout vertical">
      <cr-toggle-button checked="{{toggleButtonChecked}}">
        Toggle Button
      </cr-toggle-button>
      <cr-checkbox checked="{{toggleButtonChecked}}">
        Bound Checkbox
      </cr-checkbox>
      <div class="layout horizontal">
        <cr-toggle-button checked="{{toggleButtonChecked2}}">
          Toggle Button 2
        </cr-toggle-button>
        <cr-toggle-button checked="{{toggleButtonChecked3}}">
          Toggle Button 3
        </cr-toggle-button>
      </div>
    </div>

    <h3>cr-collapse</h3>
    <div class="layout vertical">
      <cr-expand-button expanded="{{collapseOpened}}">
        Collapse 1
      </cr-expand-button>
      <cr-collapse opened="[[collapseOpened]]">
        <div class="layout vertical">
          <span>Collapsable Section 1</span>
          <cr-checkbox>Advanced option 1</cr-checkbox>
          <cr-checkbox>Advanced option 2</cr-checkbox>
        </div>
      </cr-collapse>
      <cr-button toggles active="{{collapseOpened2}}">
        Collapse 2
      </cr-button>
      <cr-collapse opened="[[collapseOpened2]]">
        <div class="layout vertical">
          <span>Collapsable Section 2</span>
        </div>
      </cr-collapse>
    </div>

    <cr-expand-button toggles expanded="{{networkOpened}}">
      <span class="heading">cr-network-*</span>
    </cr-expand-button>
    <cr-collapse opened="[[networkOpened]]">
      <div class="layout vertical">
        <h3>cr-network-icon</h3>
        <div class="layout vertical">
          <div class="layout horizontal center">
            <cr-network-icon id="ethernet" network-type="Ethernet">
            </cr-network-icon>
            <span>Ethernet</span>
          </div>
          <div class="layout horizontal center">
            <cr-network-icon id="wifi" network-type="WiFi"></cr-network-icon>
            <span>WiFi (32px)</span>
          </div>
          <div class="layout horizontal center">
            <cr-network-icon id="cellular" network-type="Cellular">
            </cr-network-icon>
            <span>Cellular (16px)</span>
          </div>
        </div>
      </div>
    </cr-collapse>

  </template>
  <script src="demo_element.js"></script>
</dom-module>