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
<div class="lui-action_bar">
  <div class="lui-breadcrumb_list">
    <a class="lui-breadcrumb_list__breadcrumb" data-turbo-action="advance" href="#">Breadcrumbs link</a>
    <a class="lui-breadcrumb_list__breadcrumb" data-turbo-action="advance" href="#">Breadcrumbs link</a>
    <a class="lui-breadcrumb_list__breadcrumb" data-turbo-action="advance" href="#">Breadcrumbs link</a>
  </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" data-controller="lui--button">
        <i class="lui-button__icon lui-button__icon--default fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i>
        <span class="lui-button__text" data-lui--button-target="text">
          Text
        </span>
      </button>
      <button class="lui-button lui-button--neutral--primary lui-button--size-default w-fit w-fit" data-controller="lui--button">
        <i class="lui-button__icon lui-button__icon--default fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i>
        <span class="lui-button__text" data-lui--button-target="text">
          Text
        </span>
      </button>
      <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
        <i class="lui-button__icon lui-button__icon--default fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i>
        <span class="lui-button__text" data-lui--button-target="text">
          Text
        </span>
      </button>
      <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
        <i class="lui-button__icon lui-button__icon--default fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i>
        <span class="lui-button__text" data-lui--button-target="text">
          Text
        </span>
      </button>
    </div>
    <div class="lui-action_buttons__button-group">
      <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
        <i class="lui-button__icon lui-button__icon--default fa-regular fa-play-pause" data-lui--button-target="leadingIcon"></i>
      </button>
      <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
        <i class="lui-button__icon lui-button__icon--default fa-regular fa-heart" data-lui--button-target="leadingIcon"></i>
      </button>
      <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
        <i class="lui-button__icon lui-button__icon--default fa-regular fa-copy" data-lui--button-target="leadingIcon"></i>
      </button>
      <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
        <i class="lui-button__icon lui-button__icon--default fa-regular fa-gear" data-lui--button-target="leadingIcon"></i>
      </button>
      <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
        <i class="lui-button__icon lui-button__icon--default fa-regular fa-trash" data-lui--button-target="leadingIcon"></i>
      </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 container for breadcrumbs and buttons that can be used to trigger actions or navigate to different parts of the application.

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 only two slots: action_buttons and breadcrumbs_list.