prima/demo/priv/code_examples/dropdown/positioned.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<div class="flex space-x-8 justify-center">
  <!-- Top-start placement -->
  <.dropdown id="top-dropdown">
    <.dropdown_trigger
      id="top-dropdown-trigger"
      class="inline-flex justify-center rounded-lg bg-zinc-900 gap-x-1.5 px-3 py-2 text-sm font-semibold text-white hover:bg-zinc-700 active:text-white/80"
    >
      Top Menu
      <svg
        class="-mr-1 h-5 w-5 rotate-180"
        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="top-dropdown-menu"
      placement="top-start"
      class="w-48 py-1rounded-md bg-white shadow-xs ring-1 ring-gray-300 focus:outline-none"
      transition_enter={
        {"ease-out duration-100", "transform opacity-0 scale-95",
         "transform opacity-100 scale-100"}
      }
      transition_leave={
        {"transition ease-in duration-75", "transform opacity-100 scale-100",
         "transform opacity-0 scale-95"}
      }
    >
      <.dropdown_item
        id="top-dropdown-item-0"
        class="text-gray-700 data-focus:bg-blue-100 data-focus:text-blue-900 block px-4 py-2 text-sm"
      >
        Option A
      </.dropdown_item>
      <.dropdown_item
        id="top-dropdown-item-1"
        class="text-gray-700 data-focus:bg-blue-100 data-focus:text-blue-900 block px-4 py-2 text-sm"
      >
        Option B
      </.dropdown_item>
    </.dropdown_menu>
  </.dropdown>

<!-- Right-start placement -->
  <.dropdown id="right-dropdown">
    <.dropdown_trigger
      id="right-dropdown-trigger"
      class="inline-flex justify-center rounded-lg bg-zinc-900 gap-x-1.5 px-3 py-2 text-sm font-semibold text-white hover:bg-zinc-700 active:text-white/80"
    >
      Right Menu
      <svg class="-mr-1 h-5 w-5" 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="right-dropdown-menu"
      placement="right-start"
      class="w-48 py-1rounded-md bg-white shadow-xs ring-1 ring-gray-300 focus:outline-none"
      transition_enter={
        {"ease-out duration-100", "transform opacity-0 scale-95",
         "transform opacity-100 scale-100"}
      }
      transition_leave={
        {"transition ease-in duration-75", "transform opacity-100 scale-100",
         "transform opacity-0 scale-95"}
      }
    >
      <.dropdown_item
        id="right-dropdown-item-0"
        class="text-gray-700 data-focus:bg-green-100 data-focus:text-green-900 block px-4 py-2 text-sm"
      >
        Option X
      </.dropdown_item>
      <.dropdown_item
        id="right-dropdown-item-1"
        class="text-gray-700 data-focus:bg-green-100 data-focus:text-green-900 block px-4 py-2 text-sm"
      >
        Option Y
      </.dropdown_item>
    </.dropdown_menu>
  </.dropdown>

<!-- Bottom-end placement with larger offset -->
  <.dropdown id="bottom-dropdown">
    <.dropdown_trigger
      id="bottom-dropdown-trigger"
      class="inline-flex justify-center rounded-lg bg-zinc-900 gap-x-1.5 px-3 py-2 text-sm font-semibold text-white hover:bg-zinc-700 active:text-white/80"
    >
      Bottom Menu
      <svg class="-mr-1 h-5 w-5" 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="bottom-dropdown-menu"
      placement="bottom-end"
      class="w-48 py-1 rounded-md bg-white shadow-xs ring-1 ring-gray-300 focus:outline-none"
      transition_enter={
        {"ease-out duration-100", "transform opacity-0 scale-95",
         "transform opacity-100 scale-100"}
      }
      transition_leave={
        {"transition ease-in duration-75", "transform opacity-100 scale-100",
         "transform opacity-0 scale-95"}
      }
    >
      <.dropdown_item
        id="bottom-dropdown-item-0"
        class="text-gray-700 data-focus:bg-purple-100 data-focus:text-purple-900 block px-4 py-2 text-sm"
      >
        Option 1
      </.dropdown_item>
      <.dropdown_item
        id="bottom-dropdown-item-1"
        class="text-gray-700 data-focus:bg-purple-100 data-focus:text-purple-900 block px-4 py-2 text-sm"
      >
        Option 2
      </.dropdown_item>
    </.dropdown_menu>
  </.dropdown>
</div>