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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div contents data-controller="context-menu">
  <div class="card text-sm flex items-center justify-center" style="block-size: 150px;" data-action="contextmenu->context-menu#show:prevent click@document->context-menu#hide">
    Right click here
  </div>
  <div popover="manual" class="popover" style="--popover-size: 14rem;" data-context-menu-target="content" role="menu" aria-label="Context Menu">
    <div class="menu">
      <div class="menu__header">Menu</div>
      <hr class="menu__separator" role="separator"/>
      <div class="menu__group" role="group">
        <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">
          <span class="icon icon--calendar" aria-hidden="true"></span>
          <span>Calendar</span>
        </a>  
        <form contents="true" role="menuitem" class="button_to" method="post" action=""><button class="btn menu__item" data-menu-target="item" type="submit">
            <span class="icon icon--smile" aria-hidden="true"></span>
            <span>Seach Emoji</span>
          </button><input type="hidden" name="authenticity_token" value="cpBh6sjpXQ07aRVHFxVv2pSsLBZ4PQYPax-8z0bLLjBgfbe_6ikmLdFf17F1jAUe9OiwVXK0NMdA7VgS6T7J-g" autocomplete="off" /></form>
  <a class="btn menu__item" role="menuitem" tabindex="-1" aria-disabled="true">
          <span class="icon icon--calculator" aria-hidden="true"></span>
          <span>Calculator</span>
        </a></div>
      <hr class="menu__separator" role="separator"/>
      <div class="menu__group" role="group">
        <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">
          <span class="icon icon--user" aria-hidden="true"></span>
          <span>Profile</span>
          <span class="menu__item-key">⌘P</span>
        </a>  <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">
          <span class="icon icon--credit-card" aria-hidden="true"></span>
          <span>Billing</span>
          <span class="menu__item-key">⌘B</span>
        </a>  <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">
          <span class="icon icon--settings" aria-hidden="true"></span>
          <span>Settings</span>
          <span class="menu__item-key">⌘P</span>
        </a></div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
<div contents data-controller="context-menu">
  <div class="card text-sm flex items-center justify-center" style="block-size: 150px;" data-action="contextmenu->context-menu#show:prevent click@document->context-menu#hide">
    Right click here
  </div>
  <div popover="manual" class="popover" style="--popover-size: 14rem;" data-context-menu-target="content" role="menu" aria-label="Context Menu">
    <div class="menu"><%= render partial: "menu_items" %></div>
  </div>
</div>
CSS is not required or multiple files are needed, check the notes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  static targets = [ "content" ]
  show({ clientX, clientY }) {
    this.contentTarget.style.insetInlineStart = `${clientX}px`
    this.contentTarget.style.insetBlockStart  = `${clientY}px`
    this.contentTarget.showPopover()
  }
  hide({ target }) {
    !this.contentTarget.contains(target) && this.contentTarget.hidePopover()
  }
}

No notes provided.