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
28
29
<main class="centered-layout">
  <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>
</main>
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
<main class="centered-layout">
  <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>
</main>
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.