Separator

Renders a separator element

div(class: "w-72") do
  render Heading.new(as: :h3, size: "xs") { "Menu" }
  render Separator.new(class: "my-2")
  div(class: "flex items-center gap-2 h-8") do
    render Button.new(kind: :ghost, size: :sm) { "File" }
    render Separator.new(kind: :vertical)
    render Button.new(kind: :ghost, size: :sm) { "Edit" }
    render Separator.new(kind: :vertical)
    render Button.new(kind: :ghost, size: :sm) { "View" }
    render Separator.new(kind: :vertical)
    render Button.new(kind: :ghost, size: :sm) { "Tools" }
  end
end

Installation

Add the component to your project

Manually

Copy and paste the following code into your project

# frozen_string_literal: true

class Components::Separator < Components::Essence
  BASE = "border-gray-950/5"

  KINDS = {
    horizontal: "border-t",
    vertical: "border-l h-full"
  }

  attr_reader :kind, :attributes

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

  def view_template
    tag((kind.to_sym == :horizontal ? :hr : :div), **attributes)
  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

Separator kind

Available values —

horizontalvertical