HTML Tags

Phlex::HTML comes with methods that correspond to the most common HTML tags. You’ve seen the h1 tag in the previous section.

Content

You pass content as a block to a tag method. If the return value of the block is a String, Symbol, Integer or Float and no output methods were used, the return value will be output as text.

class Hello < Phlex::HTML
	def template
		h1 { "👋 Hello World!" }
	end
end

<h1>👋 Hello World!</h1>

Attributes

You can add attributes to HTML elements by passing keyword arguments to the methods.

class Hello < Phlex::HTML
	def template
		h1(class: "text-xl font-bold") { "👋 Hello World!" }
	end
end

<h1 class="text-xl font-bold">👋 Hello World!</h1>

Underscores _ are automatically converted to dashes - for Symbol keys. If you need to use an underscore in an attribute name, you can pass it as a String.

class Hello < Phlex::HTML
	def template
		h1("foo_bar" => "hello") { "👋 Hello World!" }
	end
end

<h1 foo_bar="hello">👋 Hello World!</h1>

Hash attributes

You can pass a Hash as an attribute value and the Hash will be flattened with a dash between each level.

class Hello < Phlex::HTML
	def template
		div(data: { controller: "hello" }) do
			# ...
		end
	end
end

<div data-controller="hello"></div>

Boolean attributes

When an attribute value is true, the attribute name will be output without a value; when falsy, the attribute isn’t output at all. You can use the strings "true" and "false" as values for non-boolean attributes.

class ChannelControls < Phlex::HTML
	def template
		input(
			value: "1",
			name: "channel",
			type: "radio",
			checked: true
		)

		input(
			value: "2",
			name: "channel",
			type: "radio",
			checked: false
		)
	end
end

<input value="1" name="channel" type="radio" checked><input value="2" name="channel" type="radio">

The template tag

Because the template method is used to define the view template itself, you'll need to use the method template_tag if you want to to render an HTML <template> tag.

class Example < Phlex::HTML
	def template
		template_tag do
			img src: "hidden.jpg", alt: "A hidden image."
		end
	end
end

<template><img src="hidden.jpg" alt="A hidden image."></template>

Registering custom tags

You can register custom elements with the register_element macro. The custom element will only be available in the view where it is registered and subclasses of that view.

class Example < Phlex::HTML
	register_element :trix_editor

	def template
		trix_editor input: "content", autofocus: true
	end
end

<trix-editor input="content" autofocus></trix-editor>

📝 Edit this page on GitHub