Menu

Separator

Menu


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

CLI

Run the following command in your terminal

bundle exec essence add separator
Manually

Copy and paste the following code into your project

components/separator.rb
# 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