Menu
render Heading.new(as: :h1, size: "3xl") { "Heading" } render Heading.new(as: :h2, size: "2xl") { "Heading" } render Heading.new(as: :h3, size: "xl") { "Heading" } render Heading.new(as: :h4, size: "lg") { "Heading" } render Heading.new(as: :h5, size: "md") { "Heading" } render Heading.new(as: :h6, size: "sm") { "Heading" }
Add the component to your project
Run the following command in your terminal
bundle exec essence add heading
Copy and paste the following code into your project
class Components::Heading < Components::Essence
ALLOWED_TAGS = [ :h1, :h2, :h3, :h4, :h5, :h6 ]
BASE = "font-medium text-gray-900 leading-normal"
SIZES = {
"xs" => "text-base lg:text-lg",
"sm" => "text-lg lg:text-xl",
"md" => "text-xl lg:text-2xl",
"lg" => "text-2xl lg:text-3xl",
"xl" => "text-3xl lg:text-4xl",
"2xl" => "text-4xl lg:text-5xl",
"3xl" => "text-5xl lg:text-6xl"
}
attr_reader :as, :size
def initialize(as: :h2, size: :xs, **attributes)
@as = ALLOWED_TAGS.include?(as.to_sym) ? as.to_sym : :h1
@size = SIZES.keys.include?(size.to_s) ? size.to_s : "xs"
super(**attributes)
end
def view_template(&)
tag(as, **attributes, &)
end
private
def initialize_merged_classes = merge_classes([ BASE, SIZES[size], attributes[:class] ])
end
This is how you can use this component
Attribute
Description