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
<turbo-frame data-turbo-action="advance" id="lui-main-layout" data-turbo-frame="lui-main-layout" class="min-h-0 " style="">
  <div class="lui-layout-loading" style="display: none;">
    <div class="lui-action_bar">
      <div class="lui-action_bar__left w-1/4">
        <div class="lui-skeleton__bar"></div>
      </div>
      <div class="lui-action_bar__right w-1/4">
        <div class="lui-skeleton__bar"></div>
      </div>
    </div>
    <div class="lui-show-layout">
      <div class="lui-skeleton ">
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__footer">
          <div class="lui-skeleton__bar--footer"></div>
          <div class="lui-skeleton__bar--footer lui-skeleton__bar--footer--invisible"></div>
        </div>
      </div>
      <div class="lui-skeleton lui-skeleton--full">
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__footer">
          <div class="lui-skeleton__bar--footer"></div>
          <div class="lui-skeleton__bar--footer lui-skeleton__bar--footer--invisible"></div>
        </div>
      </div>
      <div class="lui-skeleton lui-skeleton--full">
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__footer">
          <div class="lui-skeleton__bar--footer"></div>
          <div class="lui-skeleton__bar--footer lui-skeleton__bar--footer--invisible"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="lui-main_layout__content" data-skeleton-loading="true">
  </div>
</turbo-frame>
<turbo-frame id="lui-main-layout-actions">
</turbo-frame>
<turbo-cable-stream-source channel="Turbo::StreamsChannel" signed-stream-name="InRvYXN0ZXJzIg==--7c1405336eb46a24b1b64d0d30019fb9fce53bc08bd9a1c5f30369d28862a109"></turbo-cable-stream-source>
<div id="lui-toasters" popover="manual" data-controller="toasters" data-toasters-new-toaster-url-value="">
</div>

No Usage documentation to display.

1
render(LooposUi::MainLayout.new)

No notes provided.

No params configured.

Description

The MainLayout component is a core layout component that provides the main structure for application pages. It serves as a wrapper for other layout components like ShowLayout and IndexLayout, handling loading states and background styling.

Arguments

Property Default Description
background nil When true, displays the provided background image source

Also handles skeleton loadings, can be disabled via LooposUi.config.enable_loading_skeletons by setting it to false.

Can also manage the background image. You have the following options:

  • background: argument: A path to an image file to use as the background image. nil will fallback to the app type background image.
  • config.infer_background_from_app_type: When true, the background image will be inferred from the app type
  • config.enable_main_layout_background: Disables background image altogether