summaryrefslogtreecommitdiffstats
path: root/docs/components/ui/Menu/DemoResult.jinja
blob: b62226cfb9959bcb4495bba8e0e272b161767aa2 (plain)
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
{#css ui/Menu/Menu.css #}

<div class="bg-cover"
  style="background-image:linear-gradient(to right, rgba(244,114,182, 0.9), rgba(219,39,119, 0.9))"
  data-md-skip
></div>

<div id="menu-demo" data-md-skip>
  <MenuButton id="menu-demo-btn" target="menu-demo-menu">
    Menu <i class="icon">keyboard_arrow_down</i>
  </MenuButton>

  <Menu id="menu-demo-menu" anchor="menu-demo-btn" anchor-to="bottom end">
    <div class="group">
      <MenuItem>
        <i class="icon">tab</i>
        <a>New tab</a>
        <kbd>Ctrl+T</kbd>
      </MenuItem>
      <MenuItem>
        <i class="icon">new_window</i>
        <a>New window</a>
        <kbd>Ctrl+N</kbd>
      </MenuItem>
      <MenuItem disabled>
        <i class="icon">fingerprint_off</i>
        <a>Disabled item</a>
        <kbd>Ctrl+Shift+N</kbd>
      </MenuItem>
    </div>
    <div class="group">
      <MenuItem>
        <i class="icon">download</i>
        <a>Downloads</a>
        <kbd>Ctrl+J</kbd>
      </MenuItem>
      <MenuItemSub id="bookmarks-item">
        <i class="icon">bookmarks</i>
        <a>Bookmarks and lists</a>
        <span class="icon arrow">keyboard_arrow_right</span>

        <Menu anchor="bookmarks-item" anchor_to="right start">
          <div class="group">
            <MenuItem>
              <i class="icon">bookmark_add</i>
              <a>Bookmark this tab...</a>
              <kbd>Ctrl+D</kbd>
            </MenuItem>
            <MenuItem>
              <i class="icon">bookmarks</i>
              <a>Bookmark all tabs...</a>
              <kbd>Ctrl+Shift+D</kbd>
            </MenuItem>
          </div>
          <div class="group">
            <MenuItem>
              <i class="icon">toolbar</i>
              <a>Hide bookmarks bar</a>
              <kbd>Ctrl+Shift+B</kbd>
            </MenuItem>
            <MenuItem>
              <i class="icon">bookmarks</i>
              <a>Show all bookmarks</a>
            </MenuItem>
            <MenuItem>
              <i class="icon">bookmark_manager</i>
              <a>Bookmark manager</a>
              <kbd>Ctrl+Shift+O</kbd>
            </MenuItem>
          </div>
        </Menu>
      </MenuItemSub>
    </div>
    <div class="group">
      <MenuItem>
        <i class="icon">print</i>
        <a>Print...</a>
        <kbd>Ctrl+P</kbd>
      </MenuItem>
      <MenuItem>
        <i class="icon">help</i>
        <a>Help</a>
      </MenuItem>
      <MenuItem>
        <i class="icon">settings</i>
        <a>Settings</a>
      </MenuItem>
      <MenuItem>
        <i class="icon">exit_to_app</i>
        <a>Exit</a>
      </MenuItem>
    </div>
  </Menu>
</div>