Class: UI::Separator

Inherits:
Phlex::HTML
  • Object
show all
Includes:
SeparatorBehavior
Defined in:
app/components/ui/separator.rb

Overview

Separator - Phlex implementation

Visually or semantically separates content. Uses SeparatorBehavior module for shared styling logic.

Based on shadcn/ui Separator: https://ui.shadcn.com/docs/components/separator Based on Radix UI Separator: https://www.radix-ui.com/primitives/docs/components/separator

Examples:

Horizontal separator (default)

render UI::Separator.new

Vertical separator

render UI::Separator.new(orientation: :vertical)

Semantic separator (for screen readers)

render UI::Separator.new(decorative: false)

With custom classes

render UI::Separator.new(classes: "my-4")

Direct Known Subclasses

ButtonGroupSeparator

Instance Method Summary collapse

Methods included from SeparatorBehavior

#separator_classes, #separator_html_attributes

Constructor Details

#initialize(orientation: :horizontal, decorative: true, classes: "", **attributes) ⇒ Separator

Returns a new instance of Separator.

Parameters:

  • orientation (Symbol, String) (defaults to: :horizontal) —

    Direction of the separator (:horizontal, :vertical)

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

    Whether the separator is purely decorative (true) or has semantic meaning (false)

  • classes (String) (defaults to: "") —

    Additional CSS classes to merge

  • attributes (Hash) —

    Additional HTML attributes



29
30
31
32
33
34
 
# File 'app/components/ui/separator.rb', line 29

def initialize(orientation: :horizontal, decorative: true, classes: "", **attributes)
  @orientation = orientation
  @decorative = decorative
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#view_template ⇒ Object 



36
37
38
 
# File 'app/components/ui/separator.rb', line 36

def view_template
  div(**separator_html_attributes.deep_merge(@attributes))
end