Css Zero Showcase
x
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
<div class="relative" data-controller="popover" data-popover-flip-class="popover--flip">
  <button id="menu_button" class="btn" data-popover-target="button" data-action="popover#toggle" aria-haspopup="menu" aria-controls="menu">
    Open dropdown
  </button>
  <dialog class="popover" style="--popover-size: 14rem;" data-popover-target="menu" data-action="click@document->popover#closeOnClickOutside keydown.esc->popover#close">
    <div id="menu" class="menu" role="menu" aria-labelledby="menu_button">
      <div class="menu__header">Settings</div>
      <hr class="menu__separator" role="separator"/>
      <label class="btn menu__item" role="menuitemcheckbox">
        <input type="checkbox" name="check_recents" id="check_recents" value="1" class="checkbox" />
        <span class="text-sm">Recents</span>
      </label>
      <label class="btn menu__item" role="menuitemcheckbox">
        <input type="checkbox" name="check_home" id="check_home" value="1" class="checkbox" />
        <span class="text-sm">Home</span>
      </label>
      <label class="btn menu__item" role="menuitemcheckbox">
        <input type="checkbox" name="check_applications" id="check_applications" value="1" class="checkbox" />
        <span class="text-sm">Applications</span>
      </label>
      <label class="btn menu__item" role="menuitemcheckbox">
        <input type="checkbox" name="check_desktop" id="check_desktop" value="1" class="checkbox" />
        <span class="text-sm">Desktop</span>
      </label>
    </div>
  </dialog>
</div>
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
<div class="relative" data-controller="popover" data-popover-flip-class="popover--flip">
  <button id="menu_button" class="btn" data-popover-target="button" data-action="popover#toggle" aria-haspopup="menu" aria-controls="menu">
    Open dropdown
  </button>
  <dialog class="popover" style="--popover-size: 14rem;" data-popover-target="menu" data-action="click@document->popover#closeOnClickOutside keydown.esc->popover#close">
    <div id="menu" class="menu" role="menu" aria-labelledby="menu_button">
      <div class="menu__header">Settings</div>
      <hr class="menu__separator" role="separator"/>
      <label class="btn menu__item" role="menuitemcheckbox">
        <%= check_box_tag :check_recents, class: "checkbox" %>
        <span class="text-sm">Recents</span>
      </label>
      <label class="btn menu__item" role="menuitemcheckbox">
        <%= check_box_tag :check_home, class: "checkbox" %>
        <span class="text-sm">Home</span>
      </label>
      <label class="btn menu__item" role="menuitemcheckbox">
        <%= check_box_tag :check_applications, class: "checkbox" %>
        <span class="text-sm">Applications</span>
      </label>
      <label class="btn menu__item" role="menuitemcheckbox">
        <%= check_box_tag :check_desktop, class: "checkbox" %>
        <span class="text-sm">Desktop</span>
      </label>
    </div>
  </dialog>
</div>
CSS is not required or multiple files are needed, check the notes.
Java Script is not required or multiple files are needed, check the notes.