prima/demo/priv/code_examples/dropdown/disabled.html.heex at 51872b8b4539f46e93dc31b9f3871faac2ce829b · plausible/prima · GitHub

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
45
46
47
<.dropdown id="disabled-demo-dropdown">
  <.dropdown_trigger id="disabled-demo-trigger" as={&button/1}>
    Open Dropdown
    <svg
      class="-mr-1 h-5 w-5 text-whites"
      viewBox="0 0 20 20"
      fill="currentColor"
      aria-hidden="true"
    >
      <path
        fill-rule="evenodd"
        d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
        clip-rule="evenodd"
      />
    </svg>
  </.dropdown_trigger>
  <.dropdown_menu
    id="disabled-demo-menu"
    class="w-56 py-1 rounded-md bg-white shadow-xs ring-1 ring-gray-300 focus:outline-none"
  >
    <.dropdown_item
      id="disabled-demo-item-0"
      class="text-gray-700 data-focus:bg-gray-100 data-focus:text-gray-900 block px-4 py-2 text-sm"
    >
      Edit Profile
    </.dropdown_item>
    <.dropdown_item
      id="disabled-demo-item-1"
      disabled={true}
      class="text-gray-400 data-disabled:opacity-50 block px-4 py-2 text-sm"
    >
      Archive (disabled)
    </.dropdown_item>
    <.dropdown_item
      id="disabled-demo-item-2"
      class="text-gray-700 data-focus:bg-gray-100 data-focus:text-gray-900 block px-4 py-2 text-sm"
    >
      Settings
    </.dropdown_item>
    <.dropdown_item
      id="disabled-demo-item-3"
      class="text-red-700 data-focus:bg-red-100 data-focus:text-red-900 block px-4 py-2 text-sm"
    >
      Sign Out
    </.dropdown_item>
  </.dropdown_menu>
</.dropdown>