chrome/browser/resources/md_settings/md_settings.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>Settings</title>
   6   <link rel="import" href="chrome://resources/polymer/paper-button/paper-button.html">
   7   <link rel="import" href="chrome://resources/polymer/paper-item/paper-item.html">
   8   <link rel="import" href="chrome://resources/polymer/core-menu/core-menu.html">
   9   <link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
  10   <link rel="import" href="chrome://resources/cr_elements/cr_collapse/cr_collapse.html">
  11   <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
  12   <link rel="import" href="chrome://resources/cr_elements/cr_toggle_button/cr_toggle_button.html">
  13   <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
  14   <link rel="import" href="chrome://resources/cr_elements/cr_dropdown_menu/cr_dropdown_menu.html">
  15   <link rel="stylesheet" href="md_settings.css">
  16 </head>
  17 <body>
  18   <header>
  19     <h1>Settings</h1>
  20   </header>
  21   <div class="main">
  22     <section>
  23       <h3>cr-toggle-button</h3>
  24       <cr-toggle-button></cr-toggle-button>
  25       <cr-toggle-button checked></cr-toggle-button>
  26     </section>
  27     <section>
  28       <h3>cr-checkbox</h3>
  29       <cr-checkbox></cr-checkbox>
  30       <cr-checkbox checked></cr-checkbox>
  31     </section>
  32     <section>
  33       <h3>cr-dropdown-menu</h3>
  34       <cr-dropdown-menu>
  35         <core-menu class="menu">
  36           <paper-item>Chrome</paper-item>
  37           <paper-item>IE</paper-item>
  38           <paper-item>Firefox</paper-item>
  39         </core-menu>
  40       </cr-dropdown-menu>
  41     </section>
  42     <section>
  43       <h3>cr-collapse</h3>
  44       <paper-button id="manage-button" raised onclick="toggleCollapse();">
  45         Toggle Collapse
  46       </paper-button>
  47       <cr-collapse id="collapse">
  48         <div>collapsed content</div>
  49       </cr-collapse>
  50     </section>
  51     <section>
  52       <h3>cr-button</h3>
  53       <cr-button>Flat button</cr-button>
  54       <cr-button raised>Raised Button</cr-button>
  55     </section>
  56     <section>
  57       <h3>cr-input</h3>
  58       <cr-input label="Enter Something!"></cr-input>
  59     </section>
  60   </div>
  61   <script>
  62     var collapse = document.getElementById('collapse');
  63     function toggleCollapse() {
  64       collapse.toggle();
  65     }
  66   </script>
  67 </body>
  68 </html>