third_party/polymer/components-chromium/core-menu/demo.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <html>
  11 <head>
  12
  13   <title>core-menu</title>
  14
  15   <script src="../webcomponentsjs/webcomponents.js"></script>
  16
  17   <link rel="import" href="../core-icons/core-icons.html">
  18   <link rel="import" href="core-menu.html">
  19   <link rel="import" href="core-submenu.html">
  20   <link rel="import" href="../core-item/core-item.html">
  21
  22   <style>
  23
  24     body {
  25       font-family: sans-serif;
  26       margin: 20px;
  27     }
  28
  29     section {
  30       width: 300px;
  31     }
  32
  33     .dark {
  34       background-color: #333;
  35     }
  36
  37     .dark core-item {
  38       color: #fafafa;
  39       fill: #fafafa;
  40     }
  41
  42   </style>
  43
  44 </head>
  45 <body>
  46
  47   <h2>simple menu:</h2>
  48
  49   <section>
  50
  51     <core-menu selected="0">
  52
  53       <core-item icon="settings" label="Settings"></core-item>
  54       <core-item icon="favorite" label="Favorite"></core-item>
  55       <core-item icon="account-box" label="Account"></core-item>
  56
  57     </core-menu>
  58
  59   </section>
  60
  61   <h2>simple menu:</h2>
  62
  63   <section class="dark">
  64
  65     <core-menu selected="0">
  66
  67       <core-item icon="settings" label="Settings"></core-item>
  68       <core-item icon="favorite" label="Favorite"></core-item>
  69       <core-item icon="account-box" label="Account"></core-item>
  70
  71     </core-menu>
  72
  73   </section>
  74
  75   <h2>submenu:</h2>
  76
  77   <section>
  78
  79     <core-menu selected="0">
  80
  81       <core-submenu icon="settings" label="Topics">
  82
  83         <core-item label="Topic 1"></core-item>
  84         <core-item label="Topic 2"></core-item>
  85
  86       </core-submenu>
  87
  88       <core-submenu icon="settings" label="Favorites">
  89
  90         <core-item label="Favorite 1"></core-item>
  91         <core-item label="Favorite 2"></core-item>
  92         <core-item label="Favorite 3"></core-item>
  93
  94       </core-submenu>
  95
  96     </core-menu>
  97
  98   </section>
  99
 100 </body>
 101 </html>