Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<button type="button" class="btn" popovertarget="dropdown" aria-haspopup="true">
  Open
</button>
<div popover id="dropdown" class="popover popover--block-end-start" style="--popover-size: 8rem;" role="menu" aria-label="Menu">
  <div class="menu" data-controller="menu">
    <div class="menu__group" role="group" aria-labelledby="panel_position">
      <div class="menu__header" id="panel_position">Panel Position</div>
      <div class="btn menu__item">
        <label class="flex-item-grow text-sm" for="position_top">Top</label>
        <input type="radio" name="position" id="position_top" value="top" class="input" data-menu-target="item" role="menuitemradio" />
      </div>
      <div class="btn menu__item">
        <label class="flex-item-grow text-sm" for="position_bottom">Bottom</label>
        <input type="radio" name="position" id="position_bottom" value="bottom" class="input" data-menu-target="item" role="menuitemradio" checked="checked" />
      </div>
      <div class="btn menu__item">
        <label class="flex-item-grow text-sm" for="position_right">Right</label>
        <input type="radio" name="position" id="position_right" value="right" class="input" data-menu-target="item" role="menuitemradio" />
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<button type="button" class="btn" popovertarget="dropdown" aria-haspopup="true">
  Open
</button>
<div popover id="dropdown" class="popover popover--block-end-start" style="--popover-size: 8rem;" role="menu" aria-label="Menu">
  <div class="menu" data-controller="menu">
    <div class="menu__group" role="group" aria-labelledby="panel_position">
      <div class="menu__header" id="panel_position">Panel Position</div>
      <div class="btn menu__item">
        <%= label_tag :position_top, "Top", class: "flex-item-grow text-sm" %>
        <%= radio_button_tag :position, :top, false, class: "input", data: { menu_target: "item" }, role: "menuitemradio" %>
      </div>
      <div class="btn menu__item">
        <%= label_tag :position_bottom, "Bottom", class: "flex-item-grow text-sm" %>
        <%= radio_button_tag :position, :bottom, true, class: "input", data: { menu_target: "item" }, role: "menuitemradio" %>
      </div>
      <div class="btn menu__item">
        <%= label_tag :position_right, "Right", class: "flex-item-grow text-sm" %>
        <%= radio_button_tag :position, :right, false, class: "input", data: { menu_target: "item" }, role: "menuitemradio" %>
      </div>
    </div>
  </div>
</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.menu {
  background-color: var(--color-surface);
  display: flex;
  flex-direction: column;
  padding: var(--size-1);
  row-gap: var(--size-1);
}
.menu__header {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--size-1) var(--size-1_5);
}
.menu__group {
  display: flex;
  flex-direction: column;
  row-gap: 1px;
}
.menu__separator {
  margin-inline: -0.25rem;
}
.menu__item {
  --btn-border-color: transparent;
  --btn-box-shadow: none;
  --btn-font-weight: var(--font-normal);
  --btn-justify-content: start;
  --btn-outline-size: 0;
  --btn-padding: var(--size-1) var(--size-1_5);
  --btn-radius: var(--rounded-md);
  &:focus-visible {
    --btn-background: var(--color-border-light);
  }
}
.menu__item-key {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  margin-inline-start: auto;
}
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
import { Controller } from "@hotwired/stimulus"
import { rovingIndex } from "https://esm.sh/roving-ux@1.0.5?standalone"
export default class extends Controller {
  static targets = [ "item" ]
  #observer
  initialize() {
    this.#observer = new IntersectionObserver(this.#reset.bind(this))
  }
  connect() {
    this.#observer.observe(this.element)
  }
  disconnect() {
    this.#observer.disconnect()
  }
  #reset([ entry ]) {
    entry.isIntersecting && this.#start()
  }
  #start() {
    this.#rovingIndex()
    this.#focus()
  }
  #rovingIndex() {
    rovingIndex({ element: this.element, target: "[data-menu-target='item']" })
  }
  #focus() {
    this.itemTargets[0].focus()
  }
}

No notes provided.