LoopOS UI v1.1.30.0-feat.indentifier.editor.869c1hwb7.rc3

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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<div class="lui-action_bar">
  <div class="lui-breadcrumb_list">
    <div class="lui-breadcrumb_list__breadcrumb-container">
      <a class="lui-breadcrumb_list__breadcrumb" data-turbo-action="advance" href="#">Breadcrumbs link</a>
      <span class="lui-breadcrumb_list__breadcrumb-separator">/</span>
    </div>
    <div class="lui-breadcrumb_list__breadcrumb-container">
      <a class="lui-breadcrumb_list__breadcrumb" data-turbo-action="advance" href="#">Breadcrumbs link</a>
      <span class="lui-breadcrumb_list__breadcrumb-separator">/</span>
    </div>
    <div class="lui-breadcrumb_list__breadcrumb-container">
      <a class="lui-breadcrumb_list__breadcrumb" data-turbo-action="advance" href="#">Breadcrumbs link</a>
    </div>
  </div>
  <div class="lui-action_buttons">
    <div class="lui-action_buttons__button-group">
      <button class="lui-button lui-button--neutral--primary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button">
        <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">
            Primary action
          </div>
        </div>
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i></div>
        </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
          Text
        </span>          
        <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
          <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
            progress_activity
          </i>
        </div>
      </button>
      <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button">
        <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">
            Secondary action
          </div>
        </div>
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i></div>
        </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
          Text
        </span>          
        <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
          <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
            progress_activity
          </i>
        </div>
      </button>
      <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button">
        <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">
            Secondary action
          </div>
        </div>
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i></div>
        </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
          Text
        </span>          
        <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
          <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
            progress_activity
          </i>
        </div>
      </button>
    </div>
    <div class="lui-action_buttons__button-group">
      <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button">
        <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">
            Pause item
          </div>
        </div>
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-play-pause" data-lui--button-target="leadingIcon"></i></div>
        </div>
            
        <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
          <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
            progress_activity
          </i>
        </div>
      </button>
      <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button">
        <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">
            Favorite item
          </div>
        </div>
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-heart" data-lui--button-target="leadingIcon"></i></div>
        </div>
            
        <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
          <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
            progress_activity
          </i>
        </div>
      </button>
      <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button">
        <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">
            Copy item
          </div>
        </div>
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-copy" data-lui--button-target="leadingIcon"></i></div>
        </div>
            
        <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
          <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
            progress_activity
          </i>
        </div>
      </button>
      <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button">
        <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">
            Open settings
          </div>
        </div>
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-gear" data-lui--button-target="leadingIcon"></i></div>
        </div>
            
        <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
          <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
            progress_activity
          </i>
        </div>
      </button>
      <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button">
        <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">
            Delete item
          </div>
        </div>
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-trash" data-lui--button-target="leadingIcon"></i></div>
        </div>
            
        <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
          <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
            progress_activity
          </i>
        </div>
      </button>
    </div>
  </div>
</div>
<div class="border-1 border-general-global-gray-300 rounded-md p-2 mt-20">
  <p>❗Use only <span class="font-bold bg-general-global-gray-100 px-1 py-0.5 rounded-sm border border-general-global-gray-300">size="tiny"</span> buttons in the Action Bar</p>
  <p>❗<span class="underline">Always</span> add a tooltip to every Action Bar button. Build tooltips using the pattern Action + Entity. Examples: 
    <span class="bg-general-global-gray-100 px-1 py-0.5 rounded-sm border border-general-global-gray-300 italic">New User</span>,
    <span class="bg-general-global-gray-100 px-1 py-0.5 rounded-sm border border-general-global-gray-300 italic">Import Email Template</span>,
    <span class="bg-general-global-gray-100 px-1 py-0.5 rounded-sm border border-general-global-gray-300 italic">Duplicate Protocol</span>
  </p>
</div>

Action Bar

The ActionBar component is a combination of a list of breadcrumbs, and a group of action buttons.

-

Usage rules

  • ✅ Do

    • ❗Use only size="tiny" buttons in the Action Bar
    • Label buttons with clear action verbs Examples: New, Import, Duplicate.
    • Follow left-to-right button hierarchy:
      1. Primary action
      2. Secondary actions
      3. Icon-only actions
      4. Back button
    • ❗Always add a tooltip to every Action Bar button. Build tooltips using the pattern Action + Entity. Examples: New User, Import Email Template, Duplicate Protocol.

  • ❌ Don't

    • Don’t use button sizes other than tiny in the Action Bar.
    • Don’t break the button hierarchy order (e.g. placing secondary actions before the primary one).
    • Don’t mix different hierarchy levels randomly within the Action Bar.
    • Don’t omit tooltips, even for icon-only buttons.
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
<%= render LooposUi::ActionBar.new do |ab| %>
  <% ab.with_breadcrumbs_list do |breadcrumbs| %>
    <%= breadcrumbs.with_breadcrumb(href: "#") { "Breadcrumbs link"} %>
    <%= breadcrumbs.with_breadcrumb(href: "#") { "Breadcrumbs link"} %>
    <%= breadcrumbs.with_breadcrumb(href: "#") { "Breadcrumbs link"} %>
  <% end %>
  <% attrs = {size: :default, type: :secondary, kind: :neutral } %>
  <% ab.with_action_buttons do |buttons| %>
    <% buttons.with_button_group do |g| %>
      <% g.with_button(leading_icon: "fa-regular fa-plus-large", text: "Text", **attrs, type: :primary, size: :tiny, tooltip_text: "Primary action") %>
      <% g.with_button(leading_icon: "fa-regular fa-plus-large", text: "Text", **attrs, size: :tiny, tooltip_text: "Secondary action") %>
      <% g.with_button(leading_icon: "fa-regular fa-plus-large", text: "Text", **attrs, size: :tiny, tooltip_text: "Secondary action") %>
    <% end %>
    <% buttons.with_button_group do |g| %>
      <% g.with_button(leading_icon: "fa-regular fa-play-pause", **attrs, size: :tiny, tooltip_text: "Pause item") %>
      <% g.with_button(leading_icon: "fa-regular fa-heart", **attrs, size: :tiny, tooltip_text: "Favorite item") %>
      <% g.with_button(leading_icon: "fa-regular fa-copy", **attrs, size: :tiny, tooltip_text: "Copy item") %>
      <% g.with_button(leading_icon: "fa-regular fa-gear", **attrs, size: :tiny, tooltip_text: "Open settings") %>
      <% g.with_button(leading_icon: "fa-regular fa-trash", **attrs, size: :tiny, tooltip_text: "Delete item") %>
    <% end %>
  <% end %>
<% end %>
<div class="border-1 border-general-global-gray-300 rounded-md p-2 mt-20">
  <p>❗Use only <span class="font-bold bg-general-global-gray-100 px-1 py-0.5 rounded-sm border border-general-global-gray-300">size="tiny"</span> buttons in the Action Bar</p>
  <p>❗<span class="underline">Always</span> add a tooltip to every Action Bar button. Build tooltips using the pattern Action + Entity. Examples: 
    <span class="bg-general-global-gray-100 px-1 py-0.5 rounded-sm border border-general-global-gray-300 italic">New User</span>,
    <span class="bg-general-global-gray-100 px-1 py-0.5 rounded-sm border border-general-global-gray-300 italic">Import Email Template</span>,
    <span class="bg-general-global-gray-100 px-1 py-0.5 rounded-sm border border-general-global-gray-300 italic">Duplicate Protocol</span>
  </p>
</div>

No notes provided.

No params configured.

Description

The ActionBar component is a flexible container that provides a consistent layout for page-level navigation and actions. It combines breadcrumbs, item navigation controls, optional issue cards, and action buttons in a single, cohesive interface.

The ActionBar is typically used at the top of content pages to provide:

  • Navigation context through breadcrumbs
  • Item-level navigation for moving between related items
  • Important alerts through issue cards
  • Primary actions through action buttons

Properties

Name Type Default Description
current_action String/Symbol nil The name of the current action. Used to set the current action when infering from the request action name is not suitable (render ShowLayout from another controller, for example)

Slots

The ActionBar component accepts four slots:

Slot Name Type Description
action_buttons LooposUi::ActionButtons Container for action buttons and button groups
breadcrumbs_list LooposUi::BreadcrumbList Navigation breadcrumbs showing the current page hierarchy
item_navigation LooposUi::ActionBar::ItemNavigation Navigation controls for moving between items (previous/next)
issue_card String or ViewComponent Optional card component for displaying issues or alerts

Slot Details

action_buttons

The action_buttons slot accepts a LooposUi::ActionButtons component, which provides a structured way to organize action buttons. This slot is typically used for primary actions like "Save", "Edit", "Delete", etc.

Example:

<% action_bar.with_action_buttons do |buttons| %>
  <% buttons.with_button_group do |group| %>
    <% group.with_button(text: "Save", href: "/save") %>
    <% group.with_button(text: "Cancel", href: "/cancel", variant: :secondary) %>
  <% end %>
<% end %>

The breadcrumbs_list slot accepts a LooposUi::BreadcrumbList component for displaying navigation breadcrumbs. This helps users understand their current location within the application hierarchy.

Example:

<% action_bar.with_breadcrumbs_list do |list| %>
  <% list.with_breadcrumb(href: "/") { "Home" } %>
  <% list.with_breadcrumb(href: "/products") { "Products" } %>
  <% list.with_breadcrumb(href: "/products/123") { "Product Details" } %>
<% end %>

item_navigation

The item_navigation slot accepts a LooposUi::ActionBar::ItemNavigation component for navigating between related items. This is particularly useful in detail views where users need to move between items in a sequence.

Required Options:

  • title (String): The display title for the current item
  • next_path (String): URL for the next item
  • previous_path (String): URL for the previous item

Example:

<% action_bar.with_item_navigation(
  title: "Product 3 of 15",
  next_path: "/products/4",
  previous_path: "/products/2"
) %>

issue_card

The issue_card slot accepts any content (string or ViewComponent) for displaying important alerts, warnings, or notifications. This slot is optional and will only render when content is provided.

Example:

<% action_bar.with_issue_card do %>
  <div class="alert alert-warning">
    <strong>Warning:</strong> This product is out of stock.
  </div>
<% end %>

Auto Breadcrumbs

The ActionBar component includes automatic breadcrumb generation when LooposUi.config.auto_breadcrumbs is enabled. This feature automatically generates breadcrumbs based on:

  1. Current action (index, show, etc.)
  2. Request path analysis
  3. Sidebar configuration from LooposUi.config.sidebar.items