LoopOS UI v1.1.23.2-release.2025.product.q3.rc28

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
<div class="flex items-center w-full h-full absolute pl-10">
  <button class="lui-button lui-button--size-default lui-button--core--primary w-fit w-fit" data-controller="lui--button" onclick="toggleDrawerBar()">
    <span class="lui-button__text" data-lui--button-target="text">
      Toggle Drawer
    </span>
  </button>
</div>
<turbo-frame class="lui-show-layout__drawer_wrapper" id="lui-main-layout-drawer_bar" data-controller="drawer-bar">
  <div
    class="lui-drawer_bar lui-drawer_bar--open"
    data-drawer-bar-target="component"
    >
    <div class="lui-drawer_bar__close_button" data-drawer-bar-target="closeButton" >
      <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-action="click->drawer-bar#handleCloseButtonClick">
        <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-close" data-lui--button-target="leadingIcon"></i>
      </button>
    </div>
    <div class="lui-drawer_bar__drawer" data-drawer-bar-target="drawer" data-close-on-outside-click="true">
      <div class="lui-drawer_bar__drawer__top">
        <div class="px-4 pb-4">
          <div class="lui-title_description lui-title_description--normal">
            <span class="lui-title_description__title">
              My title #1
            </span>
            <span class="lui-title_description__description">
              It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
            </span></div>
        </div>
        <div class="flex justify-between border-b border-t border-solid border-gray-300 py-[16px] px-[24px]">
          <div class="lui-title_description lui-title_description--small">
            <span class="lui-title_description__title">
              This is a title
            </span>
            <span class="lui-title_description__description">
              This is a description
            </span></div>
          Some content
        </div>
      </div>
      <div class="lui-drawer_bar__drawer__body">
        <div class="lui-tabs_layout" data-controller="tabs" data-tabs-keep-tab-in-url-value="false">
          <div class="lui-tabs_layout__tab_list" data-tabs-target="tabList" data-controller="lui--blurred-scroll">
            <span data-action="click->tabs#changeTab" data-tabs-target="tab" data-tab-id="0" data-tab-title="Tab 1" class="lui-tabs_layout__tab_entry text-general-global-black lui-tabs_layout__tab_entry--active">
              <i class="fa-regular fa-smile"></i>
              Tab 1
            </span>        <span data-action="click->tabs#changeTab" data-tabs-target="tab" data-tab-id="1" data-tab-title="Tab 2" class="lui-tabs_layout__tab_entry text-general-global-black false">
              <i class="fa-regular fa-smile"></i>
              Tab 2
            </span>        <span data-action="click->tabs#changeTab" data-tabs-target="tab" data-tab-id="2" data-tab-title="Tab 3" class="lui-tabs_layout__tab_entry text-general-global-black false">
              <i class="fa-regular fa-smile"></i>
              Tab 3
            </span>  </div>
          <div class="lui-tabs_layout__main">
            <turbo-frame class="lui-tabs_layout__tab" data-tabs-target="panel" data-tab-id="0" hidden="hidden" id="lui-tab-Tab 1">
              Some content
            </turbo-frame>
            <turbo-frame class="lui-tabs_layout__tab" data-tabs-target="panel" data-tab-id="1" hidden="hidden" id="lui-tab-Tab 2">
              Some other content
            </turbo-frame>
            <turbo-frame class="lui-tabs_layout__tab" data-tabs-target="panel" data-tab-id="2" hidden="hidden" id="lui-tab-Tab 3">
              Last tab
            </turbo-frame>
          </div>
        </div>
      </div>
    </div>
  </div>
</turbo-frame>
<script>
  const drawerBar = document.getElementById("lui-main-layout-drawer_bar");
  function toggleDrawerBar() {
    drawerBar.dispatchEvent(new CustomEvent("toggle"));
  }
</script>

DrawerBar

Description

Used Components Components where is Used
Label

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="flex items-center w-full h-full absolute pl-10">
  <%= render LooposUi::Button.new(text: "Toggle Drawer", tag_options: { onclick: "toggleDrawerBar()" })%>
</div>
<turbo-frame class="lui-show-layout__drawer_wrapper" id="lui-main-layout-drawer_bar" data-controller="drawer-bar">
  <%= render LooposUi::DrawerBar.new(
    default_open: true,
    close_on_outside_click: params[:close_on_outside_click]
    ) do |db| %>
    <% db.with_header do %>
      <div class="px-4 pb-4">
        <%= render LooposUi::TitleDescription.new(
              title: "My title #1",
              description: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
          )%>
      </div>
    <% end %>
    <% db.with_header do %>
      <%= render LooposUi::DrawerBar::ContentSection.new(
              title: "This is a title",
              description: "This is a description"
          ) do %>
        Some content
      <% end %>
    <% end %>
    <%= render LooposUi::TabsLayout.new(keep_tab_in_url: false) do |layout| %>
      <% layout.with_tab(title: "Tab 1", icon: :smile) do %>
        Some content
      <% end %>
      <% layout.with_tab(title: "Tab 2", icon: :smile) do %>
        Some other content
      <% end %>
      <% layout.with_tab(title: "Tab 3", icon: :smile) do %>
        Last tab
      <% end %>
    <% end %>
  <% end %>
</turbo-frame>
<script>
  const drawerBar = document.getElementById("lui-main-layout-drawer_bar");
  function toggleDrawerBar() {
    drawerBar.dispatchEvent(new CustomEvent("toggle"));
  }
</script>

No notes provided.

Param Description Input

—

Description

Component that displays a drawer bar on the screen.

All index and show pages already have a turbo frame with the ID lui-main-layout-drawer_bar. To display a drawer bar, you need to change the contents of this frame. This is detailed in the "How to use" section.

Arguments

Property Default Description
close_on_outside_click true Determines whether clicking outside the drawer bar will close it.

Slots

  • headers: Use this slot to add content to the header of the drawer bar. These slots are not typed, and you can pass-in whatever you want. But some common components are provided, as described in section Provided Components.
  • body (implicit): This slot is used to add the main content of the drawer bar. Commonly, this is where you would put a Layout component, like TabsLayout for example.
  • footer: Use this slot to add content to the footer of the drawer bar. Currently not implemented.

Internal Behavior

This component utilizes a permanent wrapper element and a Stimulus controller to manage its behavior. The wrapper element is a turbo-frame with the ID lui-main-layout-drawer_bar and the data-controller="drawer-bar" attribute, and is present on all show and index pages. You only need to update the contents of this frame, do not remove or replace it.

How to use

If your drawer bar has a lot of content, you may want to create a separate component to render it. This is the case for the protocol elements, for example. If this is not the case, you can also just render the drawer bar directly in the view, and fill it with content.

How to open the DrawerBar

You can open the drawer bar by changing the contents of the drawer bar wrapper frame. The wrapper controller will detect this change and open the drawer bar. In practice, this means changing the src attribute of wrapper turbo frame, making a turbo request that renders this frame, or dispatching a turbo stream event that updates this frame.

Changing the source with JS:

const drawerBarWrapper = document.querySelector('turbo-frame#lui-main-layout-drawer_bar')
drawerBarWrapper.src = `/some/url`

Changing the source with a link_to:

<%= link_to some_path , data: { turbo_frame: 'lui-main-layout-drawer_bar' } do %>
    ...
<% end %>

The response should contain a turbo frame with a DrawerBar, for example:

<%# Example for protocol elements %>
<%= turbo_frame_tag "lui-main-layout-drawer_bar" do %>
  <%= render LooposUi::ProtocolElement::DrawerBar.new(...) %>
<% end %>

Changing the drawer bar with a Turbo Stream:

<%= turbo_stream.update 'lui-main-layout-drawer_bar' do %>
    <%= LooposUi::ProtocolElement::DrawerBar.new(...) %>
<% end %>

Note that when you should use the turbo-stream update, not replace method, to open the drawer bar.

JS Events

Sometimes you may need to close or open the sidebar programmatically. You can do this by dispatching a custom event on the wrapper element:

drawerWrapper.dispatchEvent(new CustomEvent('close'))
drawerWrapper.dispatchEvent(new CustomEvent('open'))
drawerWrapper.dispatchEvent(new CustomEvent('toggle'))

Provided Components

Some common components are provided to be used in the header slot. Note that these are namespaced to LooposUi::DrawerBar. These components are:

  • Header
  • IconDisplay
  • Entity
  • Identity
  • ContentSection

Check the source code of these components for more information on how to use them.

Note that these components are not mandatory, and may be subject to change in the future. If you want to use them, you can, and if they are changed, your DrawerBar will be updated.

⚠️ Important: Only use these components if you create a separate component to render the drawer bar in the UI repository, and notify the UI team if you are using them. Otherwise, if the component is changed, your drawer bar may break.