Class: BetterUi::ContainerComponent

Inherits:
ApplicationComponent show all
Defined in:
app/components/better_ui/container_component.rb

Overview

A responsive container component for constraining content width.

This component provides a simple wrapper div with configurable max-width, horizontal padding, and centering. It is ideal for wrapping page content to maintain readable line lengths and consistent layout across breakpoints.

Examples:

Basic container (default: lg, padded, centered)

<%= render BetterUi::ContainerComponent.new do %>
  Page content here
<% end %>

Extra-large container

<%= render BetterUi::ContainerComponent.new(size: :xl) do %>
  Wide content area
<% end %>

Full-width container without padding

<%= render BetterUi::ContainerComponent.new(size: :full, padding: false) do %>
  Edge-to-edge content
<% end %>

Non-centered container

<%= render BetterUi::ContainerComponent.new(centered: false) do %>
  Left-aligned content
<% end %>

Constant Summary collapse

SIZES =
Note:

Classes must be hardcoded strings for Tailwind JIT detection.

Available container sizes mapped to Tailwind max-width classes.

{
  sm: "max-w-screen-sm",
  md: "max-w-screen-md",
  lg: "max-w-screen-lg",
  xl: "max-w-screen-xl",
  full: "max-w-full"
}.freeze

Constants inherited from ApplicationComponent

ApplicationComponent::SHADOWS, ApplicationComponent::VARIANTS, ApplicationComponent::VARIANT_BODY_DIVIDE, ApplicationComponent::VARIANT_DIVIDE, ApplicationComponent::VARIANT_HEADER_BG, ApplicationComponent::VARIANT_HEADER_TEXT, ApplicationComponent::VARIANT_HIGHLIGHTED, ApplicationComponent::VARIANT_HOVERABLE, ApplicationComponent::VARIANT_RING, ApplicationComponent::VARIANT_SORT_ICON, ApplicationComponent::VARIANT_STRIPED

Instance Method Summary collapse

Constructor Details

#initialize(size: :lg, padding: true, centered: true, container_classes: nil, **options) ⇒ ContainerComponent

Initializes a new container component.

Examples:

With all options

<%= render BetterUi::ContainerComponent.new(
  size: :xl,
  padding: true,
  centered: true,
  container_classes: "my-8",
  id: "main-content",
  data: { controller: "page" }
) do %>
  Content here
<% end %>

Parameters:

  • size (Symbol) (defaults to: :lg) —

    the max-width size (:sm, :md, :lg, :xl, :full), defaults to :lg

  • padding (Boolean) (defaults to: true) —

    whether to apply horizontal padding, defaults to true

  • centered (Boolean) (defaults to: true) —

    whether to center the container with mx-auto, defaults to true

  • container_classes (String, nil) (defaults to: nil) —

    additional CSS classes for the container

  • options (Hash) —

    additional HTML attributes passed to the container div

Raises:

  • (ArgumentError) —

    if size is not one of the allowed values



62
63
64
65
66
67
68
69
70
71
72
73
74
 
# File 'app/components/better_ui/container_component.rb', line 62

def initialize(
  size: :lg,
  padding: true,
  centered: true,
  container_classes: nil,
  **options
)
  @size = validate_size(size)
  @padding = padding
  @centered = centered
  @container_classes = container_classes
  @options = options
end