Row

Left

Right

render Row.new do |row|
  row.item { "Left" }
  row.item { "Right" }
end

Installation

Add the component to your project

CLI

Run the following command in your terminal

bundle exec essence add row

Manually

Copy and paste the following code into your project

components/row.rb

# frozen_string_literal: true

class Components::Row < Components::Essence
  BASE = "flex gap-4"
  KINDS = {
    default: "flex-col md:flex-row md:items-center md:justify-between",
    center: "flex-col md:flex-row md:items-center md:justify-center",
    start: "flex-col md:flex-row md:items-center md:justify-start",
    end: "flex-col md:flex-row md:items-center md:justify-end"
  }

  attr_reader :kind

  def initialize(kind: :default, **attributes)
    @kind = kind
    super(**attributes)
  end

  def view_template(&)
    div(**attributes, &)
  end

  def item(**mattributes, &)
    mattributes[:class] = merge_classes([ "flex items-center gap-2 flex-wrap", mattributes[:class] ])
    div(**mattributes, &)
  end

  private

  def initialize_merged_classes = merge_classes([ BASE, KINDS[kind], attributes[:class] ])
end

Reference

This is how you can use this component

Attribute

Description

kind

Row kind. It positions its children horizontally

Available values —

defaultcenterstartend