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
<div class="lui-tabs_content"> <div class="row"> <div class="column "> <div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div> </div> <div class="column "> <div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div> </div> <div class="column "> <div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div> </div> </div> <div class="row"> <div class="column "> <div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div> </div> <div class="column "> <div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div> </div> </div> <div class="row"> <div class="column "> <div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div> </div> </div> <div class="row"> <div class="column column--half"> <div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div> </div> </div></div>TabsContent
Description
Related components
| 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
<%= render LooposUi::TabsContent.new do |tabs| %> <% tabs.with_row do |row| %> <% row.with_column do %><div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div><% end %> <% row.with_column do %><div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div><% end %> <% row.with_column do %><div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div><% end %> <% end %> <% tabs.with_row do |row| %> <% row.with_column do %><div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div><% end %> <% row.with_column do %><div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div><% end %> <% end %> <% tabs.with_row do |row| %> <% row.with_column do %><div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div><% end %> <% end %> <% tabs.with_row do |row| %> <% row.with_column(half: true) do %><div class="bg-gray-500 w-full h-full flex items-center justify-center">column</div><% end %> <% end %><% end %>No notes provided.
No params configured.
TabsContent Component
Description
The TabsContent component, part of the LooposUi module, is a layout component designed to render content within tabbed interfaces. It organizes content into rows and columns, making it ideal for structured, grid-like content presentation within tabs.
Arguments
The TabsContent component does not accept direct arguments but organizes its content through slots for rows and columns, as detailed below.
Slots
rows
Defines rows within the TabsContent component. Each row renders as a RowLayout component, containing columns that can be customized individually.
cols
Defines cols within the TabsContent component. Each row renders as a ColsLayout component, containing columns that can be customized individually.
| Property | Default | Description |
|---|---|---|
half |
false |
defines if a single col is 50% |
Usage
<%= render LooposUi::TabsContent.new do |tabs| %> <% tabs.with_row do |row| %> <%# this is a 3 cols row %> <% row.with_column do %>-->Place Your Content where<--<% end %> <% row.with_column do %>-->Place Your Content where<--<% end %> <% row.with_column do %>-->Place Your Content where<--<% end %> <% end %> <% tabs.with_row do |row| %> <%# this is a 2 cols row %> <% row.with_column do %>-->Place Your Content where<--<% end %> <% row.with_column do %>-->Place Your Content where<--<% end %> <% end %> <% tabs.with_row do |row| %> <%# this is a full width cols row %> <% row.with_column do %>-->Place Your Content where<--<% end %> <% end %> % tabs.with_row do |row| %> <%# this is a 50% width cols row %> <% row.with_column(half: true) do %>-->Place Your Content where<--<% end %> <% end %><% end %>