Separator
Visually or semantically separates content.
Usage
Example
RubyUI
An open-source UI component library.
Blog
Docs
Source
div do div(class: "space-y-1") do h4(class: "text-sm font-medium leading-none") { "RubyUI" } p(class: "text-sm text-muted-foreground") { "An open-source UI component library." } end Separator(class: "my-4") div(class: "flex h-5 items-center space-x-4 text-sm") do div { "Blog" } Separator(as: :hr, orientation: :vertical) div { "Docs" } Separator(orientation: :vertical) div { "Source" } end end
Copied!
Copy failed!
Installation
Using RubyUI CLI
Run the install command
rails g ruby_ui:component Separator
Copied!
Copy failed!
Manual installation
1
Add RubyUI::Separator to app/components/ruby_ui/separator/separator.rb
# frozen_string_literal: true module RubyUI class Separator < Base ORIENTATIONS = %i[horizontal vertical].freeze def initialize(as: :div, orientation: :horizontal, decorative: true, **attrs) raise ArgumentError, "Invalid orientation: #{orientation}" unless ORIENTATIONS.include?(orientation.to_sym) @as = as.to_sym @orientation = orientation.to_sym @decorative = decorative super(**attrs) end def view_template(&) tag(@as, **attrs, &) end private def default_attrs { role: (@decorative ? "none" : "separator"), class: [ "shrink-0 bg-border", orientation_classes ] } end def orientation_classes return "h-[1px] w-full" if @orientation == :horizontal "h-full w-[1px]" end end end
Copied!
Copy failed!
Components
| Component | Built using | Source |
|---|---|---|
Separator | Phlex |