Tags

All non-depreacted HTML tags are defined as instance methods on Phlex::HTML. They take keyword arguments which get turned into HTML attributes, and blocks which become content for the tag.

Attributes

Attributes are normally symbol keys, which get dasherized. If you need a special attribute that has underscores in it, you can use a string key instead.

ruby

div(data_controller: "hello", "_special" => "value") do
  "Hello!"
end

html

<div data-controller="hello" _special="value">
  Hello!
</div>

Alternatively, if you have multiple nested attributes (like several data-* attributes) you can use a hash:

ruby

div(data: { controller: "hello", action: "click->hello#show" }) do
  "Hello!"
end

html

<div data-controller="hello" data-action="click->hello#show">
  Hello!
</div>

The class and style attributes have special handling. If you use a hash value with the class key, it will work similarly to the Rails' class_names helper when passed a hash:

ruby

is_active = true
is_disabled = false

div(class: { active: is_active, disabled: is_disabled }) do
  "Hello!"
end

html

<div class="active">
  Hello!
</div>

If you use a hash value with the style key, it will be converted to a CSS string:

ruby

h1(style: { color: "red", font_size: "16px" }) do
  "Hello!"
end

html

<h1 style="color: red; font-size: 16px;">
  Hello!
</h1>

Content

Content is always passed as a block to the tag method. The block content works differently depending on whether or not other tag methods are called inside the block.

If there are no other tag methods called inside the block, then the return value of the block is used as the content

ruby

div do
  "Hello!"
end

html

<div>
  Hello!
</div>

If there are other tag methods called inside the block, then the return value of the block is ignored. Instead, if you need to pass string content outside of a nested tag, you can use the plain method.

ruby

p do
  strong { "Hello" }
  plain " World!"
end

html

<p>
  <strong>Hello</strong> World!
</p>

If we wrote that without the plain method, we would be missing the World! part.

ruby

p do
  strong { "Hello" }
  " World!"
end

html

<p>
  <strong>Hello</strong>
</p>

That is because the p tag's block has another tag inside of it, so it ignores the return value of the block.