Add horizontal layout option for fieldset component
This commit is contained in:
parent
7f77ad5528
commit
6848bd739c
@ -1,4 +1,5 @@
|
|||||||
<%= tag.public_send(@tag, class: "mb-6 last:mb-0") do %>
|
<%= tag.public_send(@tag, class: "mb-6 last:mb-0") do %>
|
||||||
|
<% if @positioning == :vertical %>
|
||||||
<label class="block">
|
<label class="block">
|
||||||
<p class="font-bold <%= @descripton.present? ? "mb-1" : "mb-2" %>">
|
<p class="font-bold <%= @descripton.present? ? "mb-1" : "mb-2" %>">
|
||||||
<%= @title %>
|
<%= @title %>
|
||||||
@ -10,4 +11,19 @@
|
|||||||
<% end %>
|
<% end %>
|
||||||
<%= content %>
|
<%= content %>
|
||||||
</label>
|
</label>
|
||||||
|
<% elsif @positioning == :horizontal %>
|
||||||
|
<label class="block flex items-center justify-between">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<label class="font-bold mb-1"><%= @title %></label>
|
||||||
|
<% if @descripton.present? %>
|
||||||
|
<p class="text-gray-500"><%= @descripton %></p>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
|
<div class="relative ml-4 inline-flex flex-shrink-0">
|
||||||
|
<%= content %>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<% else %>
|
||||||
|
<p>Invalid <code>positioning<code> argument for <code>FieldsetComponent</code>.</p>
|
||||||
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
@ -2,8 +2,9 @@
|
|||||||
|
|
||||||
module FormElements
|
module FormElements
|
||||||
class FieldsetComponent < ViewComponent::Base
|
class FieldsetComponent < ViewComponent::Base
|
||||||
def initialize(tag: "li", title:, description: nil)
|
def initialize(tag: "li", positioning: :vertical, title:, description: nil)
|
||||||
@tag = tag
|
@tag = tag
|
||||||
|
@positioning = positioning
|
||||||
@title = title
|
@title = title
|
||||||
@descripton = description
|
@descripton = description
|
||||||
end
|
end
|
||||||
|
Loading…
x
Reference in New Issue
Block a user