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="menuitemradio">
        <input type="radio" name="setting" id="setting_recents" value="recents" class="checkbox" />
        <span class="text-sm">Recents</span>
      </label>
      <label class="btn menu__item" role="menuitemradio">
        <input type="radio" name="setting" id="setting_home" value="home" class="checkbox" />
        <span class="text-sm">Home</span>
      </label>
      <label class="btn menu__item" role="menuitemradio">
        <input type="radio" name="setting" id="setting_applications" value="applications" class="checkbox" />
        <span class="text-sm">Applications</span>
      </label>
      <label class="btn menu__item" role="menuitemradio">
        <input type="radio" name="setting" id="setting_desktop" value="desktop" 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="menuitemradio">
        <%= radio_button_tag :setting, :recents, class: "checkbox" %>
        <span class="text-sm">Recents</span>
      </label>
      <label class="btn menu__item" role="menuitemradio">
        <%= radio_button_tag :setting, :home, class: "checkbox" %>
        <span class="text-sm">Home</span>
      </label>
      <label class="btn menu__item" role="menuitemradio">
        <%= radio_button_tag :setting, :applications, class: "checkbox" %>
        <span class="text-sm">Applications</span>
      </label>
      <label class="btn menu__item" role="menuitemradio">
        <%= radio_button_tag :setting, :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.