LoopOS UI v1.1.29.1

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
<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-default w-fit w-fit relative" data-controller="lui--button">
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default 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: 16px;">
            progress_activity
          </i>
        </div>
      </button>
      <button class="lui-button lui-button--neutral--primary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default 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: 16px;">
            progress_activity
          </i>
        </div>
      </button>
      <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default 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: 16px;">
            progress_activity
          </i>
        </div>
      </button>
      <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default 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: 16px;">
            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-default w-fit w-fit relative" data-controller="lui--button">
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default 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: 16px;">
            progress_activity
          </i>
        </div>
      </button>
      <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default 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: 16px;">
            progress_activity
          </i>
        </div>
      </button>
      <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default 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: 16px;">
            progress_activity
          </i>
        </div>
      </button>
      <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default 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: 16px;">
            progress_activity
          </i>
        </div>
      </button>
      <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default 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: 16px;">
            progress_activity
          </i>
        </div>
      </button>
    </div>
  </div>
</div>

Action Bar

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

-

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%= 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) %>
            <% g.with_button(leading_icon: "fa-regular fa-plus-large", text: "Text", **attrs, type: :primary) %>
            <% g.with_button(leading_icon: "fa-regular fa-plus-large", text: "Text", **attrs) %>
            <% g.with_button(leading_icon: "fa-regular fa-plus-large", text: "Text", **attrs) %>
        <% end %>
        <% buttons.with_button_group do |g| %>
            <% g.with_button(leading_icon: "fa-regular fa-play-pause", **attrs) %>
            <% g.with_button(leading_icon: "fa-regular fa-heart", **attrs) %>
            <% g.with_button(leading_icon: "fa-regular fa-copy", **attrs) %>
            <% g.with_button(leading_icon: "fa-regular fa-gear", **attrs) %>
            <% g.with_button(leading_icon: "fa-regular fa-trash", **attrs) %>
        <% end %>
    <% end %>
<% end %>

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