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
<div class="lui-flex_layout">
  <div class="grow basis-6/12 ">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      1
    </div>
  </div>
</div>
<div class="text-center mt-8">
  Current size:
  <p class="sm:hidden">less than SM</p>
  <p class="hidden sm:block md:hidden">SM</p>
  <p class="hidden md:block lg:hidden">MD</p>
  <p class="hidden lg:block xl:hidden">LG</p>
  <p class="hidden xl:block xxl:hidden">XL</p>
  <p class="hidden xxl:block">XXL</p>
</div>

FlexLayout

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
<%
    size = params["size"]&.to_i || 6
    n_sections = params["n_sections"]&.to_i || 1
    grow = params.key?(:grow) ? params[:grow] : true
%>
<%= render LooposUi::FlexLayout.new(size: size, grow: grow) do |layout| %>
  <% n_sections.times do |i| %>
    <% layout.with_section do %>
      <%= render LooposUi::DummySlot.new(text: i + 1) %>
    <% end %>
  <% end %>
<% end %>
<%# Div that changes text depending on the media query size %>
<div class="text-center mt-8">
  Current size:
  <p class="sm:hidden">less than SM</p>
  <p class="hidden sm:block md:hidden">SM</p>
  <p class="hidden md:block lg:hidden">MD</p>
  <p class="hidden lg:block xl:hidden">LG</p>
  <p class="hidden xl:block xxl:hidden">XL</p>
  <p class="hidden xxl:block">XXL</p>
</div>

No notes provided.

Param Description Input

Default size

Number of sections

—

Description

The FlexLayout component is a responsive layout system that uses a 12-column grid approach. It provides a flexible way to create responsive layouts with configurable column widths at different breakpoints. Note, it uses sane defaults (p.ex, small size will default to full width, unless overridden), and the base width will be half the available space. It's implemented using the flex-basis helper of tailwind.

Arguments

Property Default Description
size 6 Default column size (1-12, :full or :half (6) ), representing width in a 12-column grid. Will be the default to all sections.
grow true Defines if the items will grow or not. Will be the default to all sections.

Section arguments

Each section (with_section) within a FlexLayout can have the following properties:

Property Default Description
size 6 Base column size (1-12 or :full)
grow true Sets the item grow property to 1
sm nil Size at small breakpoint
md nil Size at medium breakpoint
lg nil Size at large breakpoint
xl nil Size at extra large breakpoint
xxl nil Size at extra extra large breakpoint

Size values can be:

  • Integers from 1-12 (representing columns in a 12-column grid)
  • :full (full width)
  • :half (width of 6)

By default, sections will be full width (:full) on small screens.

Usage

Basic usage with default section sizes:

<%= render LooposUi::FlexLayout.new do |layout| %>
  <% layout.with_section do %>
    Content here
  <% end %>
<% end %>

Creating responsive layouts with different widths at different breakpoints:

<%= render LooposUi::FlexLayout.new do |layout| %>
  <% layout.with_section(sm: :full, md: 6, lg: 4, xl: 3) do %>
    Content here
  <% end %>
<% end %>

Combining sections with different sizes:

<%= render LooposUi::FlexLayout.new do |layout| %>
  <% layout.with_section(size: 3) do %>
    One quarter width
  <% end %>
  <% layout.with_section(size: 9) do %>
    Three quarters width
  <% end %>
<% end %>

Three column layout:

<%= render LooposUi::FlexLayout.new do |layout| %>
  <% layout.with_section do %>
    A third
  <% end %>
  <% layout.with_section do %>
    A third
  <% end %>
  <% layout.with_section do %>
    A third
  <% end %>
  <% layout.with_section do %>
    I will overflow to the next column, growing to full size if default grow true
  <% end %>
<% end %>