LoopOS UI v1.1.26.2

Previews

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
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!-- add a div with modal controller and form submit controller if models or forms are used  -->
<div class="flex flex-row w-full items-center justify-center" data-controller="modal">
  <div
  data-controller="action-menu"
  data-action="modal:open@window->action-menu#disableTippy modal:close@window->action-menu#enableTippy"
    class="lui-action-menu">
    <div data-action-menu-target="trigger">
      <button class="lui-button lui-button--size-default lui-button--core--primary w-fit w-fit" data-controller="lui--button">
        <span class="lui-button__text" data-lui--button-target="text">
          Open Menu
        </span>
        <i class="lui-button__icon lui-button__icon--default fa-regular fa-chevron-down"></i>
      </button>
    </div>
    <div data-action-menu-target="menu" class="hidden lui-action-menu__wrapper" data-controller="modal form-submit pubsub">
      <div class="lui-action-menu__options" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
        <a class="lui-action-menu__option" href="#" >
          <div class="lui-action-menu__option-text">
            <i class="fa-regular fa-house"></i>
            <span>Home</span>
          </div>
        </a>
        <div class="lui-action-menu__option " data-id="settings">
          <div class="lui-action-menu__option-text cursor-default">
            <i class="fa-regular fa-house"></i>
            <span>Settings</span>
          </div>
          <div class="flex items-center gap-2 flex-row" data-controller="toggle">
            <label class="lui-toggle  relative">
              <input name=""
      
      type="checkbox"
      data-toggle-target="input"
      data-action=" "
      data-method="patch"
      data-turbo_frame=""
      >
              <span class="lui-slider" style="">
                <span class="lui-toggle__spinner"
        data-toggle-target="spinner">
                  <i class="absolute origin-center animate-spin text-[9px] top-px left-px fa-solid fa-spinner"></i>
                </span>
              </span>
            </label>
          </div>
        </div>
        <a class="lui-action-menu__option" href="/profile" data-id="profile">
          <div class="lui-action-menu__option-text">
            <span>Profile</span>
            <span class="lui-icon_tooltip">
              <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
                <div class="lui-tooltip__title">
                  example tooltip
                </div>
              </div>
              <div class="lui-icon h-[12px] w-[12px]">
                <i class="fa-regular fa-circle-info lui-icon__icon" style="font-size: 12px; color: black;"></i>
              </div>
            </span>
          </div>
        </a>
        <div class="lui-action-menu__option " >
          <div class="lui-action-menu__option-text cursor-default">
            <span>Notifications</span>
          </div>
          <div class="flex items-center gap-2 flex-row" data-controller="toggle">
            <label class="lui-toggle  relative">
              <input name="notifications-toggle"
      
      type="checkbox"
      data-toggle-target="input"
      data-action=" "
      data-method="patch"
      data-turbo_frame=""
      checked>
              <span class="lui-slider" style="">
                <span class="lui-toggle__spinner"
        data-toggle-target="spinner">
                  <i class="absolute origin-center animate-spin text-[9px] top-px left-px fa-solid fa-spinner"></i>
                </span>
              </span>
            </label>
          </div>
        </div>
        <div class="lui-action-menu__option cursor-pointer" data-action="click->modal#open" data-modal-id="modal1">
          <div class="lui-action-menu__option-text cursor-pointer">
            <span>Modal example 1</span>
            <span class="lui-icon_tooltip">
              <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
                <div class="lui-tooltip__title">
                  example tooltip
                </div>
              </div>
              <div class="lui-icon h-[12px] w-[12px]">
                <i class="fa-regular fa-circle-info lui-icon__icon" style="font-size: 12px; color: black;"></i>
              </div>
            </span>
          </div>
        </div>
        <div class="lui-action-menu__option cursor-pointer" data-action="click->modal#open" data-modal-id="modal2">
          <div class="lui-action-menu__option-text cursor-pointer">
            <span>Modal example 2 </span>
            <span class="lui-icon_tooltip">
              <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
                <div class="lui-tooltip__title">
                  example tooltip
                </div>
              </div>
              <div class="lui-icon h-[12px] w-[12px]">
                <i class="fa-regular fa-circle-info lui-icon__icon" style="font-size: 12px; color: black;"></i>
              </div>
            </span>
          </div>
        </div>
        <div class="lui-action-menu__option cursor-pointer" data-action="click->form-submit#submitForm" data-form-id="test1">
          <div class="lui-action-menu__option-text cursor-pointer">
            <i class="fa-regular fa-paper-plane"></i>
            <span>Form example 1</span>
          </div>
        </div>
        <div class="lui-action-menu__option cursor-pointer" data-action="click->form-submit#submitForm" data-form-id="test2">
          <div class="lui-action-menu__option-text cursor-pointer">
            <i class="fa-regular fa-paper-plane"></i>
            <span>Form example 2</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- modal example, use the same id as the action menu option-->
  <dialog data-modal-target="modal" id=modal1 class="loopui-modal loopui-modal--hfull ">
    <div class="loopui-modal__wrapper">
      <div class="loopui-modal__text-wrapper">
        <div class="loopui-modal__title-wrapper">
          <div class="loopui-modal__title text-primary-lg-medium">
            modal 1
          </div>
          <button class="loopui-modal__close fa-regular fa-times" data-modal-id=modal1 data-action="modal#close"></button>
        </div>
        exemplo custom modal 1
      </div>
    </div>
  </dialog>
  <dialog data-modal-target="modal" id=modal2 class="loopui-modal loopui-modal--hfull ">
    <div class="loopui-modal__wrapper">
      <div class="loopui-modal__text-wrapper">
        <div class="loopui-modal__title-wrapper">
          <div class="loopui-modal__title text-primary-lg-medium">
            modal 2
          </div>
          <button class="loopui-modal__close fa-regular fa-times" data-modal-id=modal2 data-action="modal#close"></button>
        </div>
        exemplo custom modal 2
      </div>
    </div>
  </dialog>
  <!-- form submit example, hide the forms and use the same id as the action menu option-->
  <div class="hidden">
    <form id="test1" data-form-submit-target="form" action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="VAAxlmAavxD7OyIfj3ypYPnd1NJrg-iYSgd_Ce5rXG-Bvfy-meY0IE-O02AIXBfSCLCzsh1oV58_LlXZ5r30vA" autocomplete="off" />
      <input label="Name" value="form 1" type="text" name="name" id="name" />
    </form>
    <form id="test2" data-form-submit-target="form" action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="PPajrOs92h5LfDngArWmdAAfJ2hUoTaGTKHFZ1XwkIzpS26EEsFRLv_JyJ-FlRjG8XJACCJKiYE5iO-3XSY4Xw" autocomplete="off" />
      <input label="Name" value="form 2" type="text" name="name" id="name" />
    </form>
  </div>
</div>

ActionMenu

The Menu component is a combination of a button and a dropdown used to present a list of actions or navigation options.

Used Components Components where is Used
Label

Usage rules

  • ✅ Do use for grouping related actions or navigation options

  • ❌ Don't Don’t overload the dropdown with too many options:

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
<!-- add a div with modal controller and form submit controller if models or forms are used  -->
<div class="flex flex-row w-full items-center justify-center" data-controller="modal">
    <%= render LooposUi::ActionMenu.new(
    options: [
      # url example
      { text: "Home", url: "#", icon: "house" },
      # icon and toggle example
      { text: "Settings", toggle: true, icon: "house", attributes: { "data-id": "settings" } },
      # tooltip example with url
      { text: "Profile", url: "/profile", tooltip: "example tooltip", attributes: { "data-id": "profile" } },
      # toggle example
      { text: "Notifications", toggle: true, toggle_attributes: { checked: "true", name: "notifications-toggle" } },
      # modal example
      { text: "Modal example 1", tooltip: "example tooltip", attributes: { "data-action": "click->modal#open", "data-modal-id": "modal1" } },
      { text: "Modal example 2 ", tooltip: "example tooltip", attributes: { "data-action": "click->modal#open", "data-modal-id": "modal2" } },
      # form submit example
      { text: "Form example 1", icon: "paper-plane", attributes: { "data-action": "click->form-submit#submitForm", "data-form-id": "test1" } },
      { text: "Form example 2", icon: "paper-plane", attributes: { "data-action": "click->form-submit#submitForm", "data-form-id": "test2" } }
    ]
  ) do |menu| %>
    <% menu.with_trigger do %>
      <% render(LooposUi::Button.new(
        type: :primary,
        size: :default,
        text: "Open Menu",
        trailing_icon: "fa-regular fa-chevron-down",
      )) %>
    <% end %>
  <% end %>
  <!-- modal example, use the same id as the action menu option-->
  <%= render LooposUi::ModalComponent.new(id: "modal1", title: "modal 1") do |modal| %>
    <% modal.with_custom_content do %>
      exemplo custom modal 1
    <% end %>
  <% end %>
  <%= render LooposUi::ModalComponent.new(id: "modal2", title: "modal 2") do |modal| %>
    <% modal.with_custom_content do %>
      exemplo custom modal 2
    <% end %>
  <% end %>
  <!-- form submit example, hide the forms and use the same id as the action menu option-->
  <div class="hidden">
    <%= form_with url: "/", method: :post, id: "test1", data: { form_submit_target: "form" } do |form| %>
      <%= form.text_field :name, label: "Name", value: "form 1" %>
    <% end %>
    <%= form_with url: "/", method: :post, id: "test2", data: { form_submit_target: "form" } do |form| %>
      <%= form.text_field :name, label: "Name", value: "form 2" %>
    <% end %>
  </div>
</div>

No notes provided.

No params configured.

Description

The LooposUi::ActionMenu component is part of the LooposUi module. It provides a flexible dropdown menu with customizable options. Each menu option can be configured with a URL, toggle button, icon, and custom HTML attributes. The component allows for an ActionMenu trigger button and supports a variety of option types, making it suitable for multi-functional dropdowns. The component also allows the use of extra data controllers.

Arguments

Property Default Description
options nil An array of menu items, each defined with text, URL (optional), icon, toggle, and custom attributes. This array configures the items within the dropdown menu.
portal_data_attributes [] An array of strings, each a data controller that the ActionMenu can use. ⚠️ Be careful ⚠️ that the component already includes the "modal", "form-submit", and "pubsub"

Slots

  • trigger: slot for the actions menu trigger element (should be a looposUi Button).

Options Configuration

Each option in the options array can support the following properties:

Property Default Description
text nil The display text for the option.
url nil The URL for a link option. When present, the option is rendered as a clickable link.
icon nil A Font Awesome icon class string to display an icon beside the text.
tooltip nil text for the info icon tooltip
toggle false When true, the option includes a toggle button (useful for settings or notifications).
attributes {} Custom HTML attributes for the option, passed as a hash (e.g., data attributes) for giving the wrapping option functionality.
toggle_attributes {} Custom HTML attributes specifically for the toggle button, such as checked, name, etc. (check toggle component to check the available toggle props)

Styling

  • Icons: Supports Font Awesome icons by passing the icon class string to the icon option.
  • Custom Attributes: Allows data and ARIA attributes through attributes and toggle_attributes hashes.
  • Toggle Button Styling: Uses LooposUi::Toggle for toggle options, and styles are customizable with additional attributes.

Usage Example

To use the LooposUi::ActionMenu in a view, provide the options array and define the trigger button. This example includes links, toggle buttons, and icons.

<div class="flex flex-row w-full items-center justify-center">
  <%= render LooposUi::ActionMenu.new(
    options: [
      { text: "Home", url: "/home", icon: "fa-regular fa-house" },
      { text: "Settings", toggle: true, icon: "fa-regular fa-house", attributes: { "data-id": "settings" } },
      { text: "Profile", url: "/profile", attributes: { "data-id": "profile" } },
      { text: "Notifications", toggle: true, toggle_attributes: { checked: "true", name: "notifications-toggle" } }
    ]
  ) do |menu| %>
    <% menu.with_trigger do %>
      <%= render(LooposUi::Button.new(
        type: :primary,
        size: :default,
        text: "Open Menu",
        trailing_icon: "fa-regular fa-arrow-up-right-from-square",
      )) %>
    <% end %>
  <% end %>
</div>