class TagBuilder
Ruby on Rails edge
Since edgeAction View Tag Builder
Returns an HTML tag.
Builds HTML5 compliant tags with a tag proxy. Every tag can be built with:
tag.<tag name>(optional content, options)
where tag name can be e.g. br, div, section, article, or any tag really. To render an HTML custom element, replace the - in the tag’s name with _. For example:
tag.turbo_frame id: "a-turbo-frame"
# => <turbo-frame id="a-turbo-frame"></turbo-frame>
Passing content
Tags can pass content to embed within it:
tag.h1 'All titles fit to print' # => <h1>All titles fit to print</h1>
tag.div tag.p('Hello world!') # => <div><p>Hello world!</p></div>
Content can also be captured with a block, which is useful in templates:
<%= tag.p do %>
The next great American novel starts here.
<% end %>
# => <p>The next great American novel starts here.</p>Options
Use symbol keyed options to add attributes to the generated tag.
tag.section class: %w( kitties puppies )
# => <section class="kitties puppies"></section>
tag.section id: dom_id(@post)
# => <section id="<generated dom id>"></section>
Pass true for any attributes that can render with no values, like disabled and readonly.
tag.input type: 'text', disabled: true
# => <input type="text" disabled="disabled">
HTML5 data-* and aria-* attributes can be set with a single data or aria key pointing to a hash of sub-attributes.
To play nicely with JavaScript conventions, sub-attributes are dasherized.
tag.article data: { user_id: 123 }
# => <article data-user-id="123"></article>
Thus data-user-id can be accessed as dataset.userId.
Data attribute values are encoded to JSON, with the exception of strings, symbols, and BigDecimals. This may come in handy when using jQuery’s HTML5-aware .data() from 1.4.3.
tag.div data: { city_state: %w( Chicago IL ) }
# => <div data-city-state="["Chicago","IL"]"></div>
In addition to :data and :aria, nest sub-attribute hashes for any keys:
tag.button "POST to /clicked", hx: { post: "/clicked", swap: :outerHTML }
# => <button hx-post="/clicked" hx-swap="outerHTML">POST to /clicked</button>
The generated tag names and attributes are escaped by default. This can be disabled using escape.
tag.img src: 'open & shut.png'
# => <img src="open & shut.png">
tag.img src: 'open & shut.png', escape: false
# => <img src="open & shut.png">
The tag builder respects HTML5 void elements if no content is passed, and omits closing tags for those elements.
# A standard element:
tag.div # => <div></div>
# A void element:
tag.br # => <br>
Note that when using the block form options should be wrapped in parenthesis.
<%= tag.a(href: "/about", class: "font-bold") do %>
About the author
<% end %>
# => <a href="/about" class="font-bold">About the author</a>Building HTML attributes
Transforms a Hash into HTML attributes, ready to be interpolated into ERB. Includes or omits boolean attributes based on their truthiness. Transforms keys nested within aria: or data: objects into aria- and data- prefixed attributes:
<input <%= tag.attributes(type: :text, aria: { label: "Search" }) %>>
# => <input type="text" aria-label="Search">
<button <%= tag.attributes id: "call-to-action", disabled: false, aria: { expanded: false } %> class="primary">Get Started!</button>
# => <button id="call-to-action" aria-expanded="false" class="primary">Get Started!</button>Inherits from
Methods (defined here)
- # a
- # abbr
- # address
- # animate
- # animate_motion
- # animate_transform
- # area
- # article
- # aside
- # attributes
- # audio
- # b
- # base
- # bdi
- # bdo
- # blockquote
- # body
- # br
- # button
- # canvas
- # caption
- # circle
- # cite
- # code
- # col
- # colgroup
- # data
- # datalist
- # dd
- # del
- # details
- # dfn
- # dialog
- # div
- # dl
- # dt
- # ellipse
- # em
- # embed
- # fieldset
- # figcaption
- # figure
- # footer
- # form
- # h1
- # h2
- # h3
- # h4
- # h5
- # h6
- # head
- # header
- # hgroup
- # hr
- # html
- # i
- # iframe
- # img
- # input
- # ins
- # kbd
- # keygen
- # label
- # legend
- # li
- # line
- # link
- # main
- # map
- # mark
- # menu
- # meta
- # meter
- # nav
- # noscript
- # object
- # ol
- # optgroup
- # option
- # output
- # p
- # path
- # picture
- # polygon
- # polyline
- # portal
- # pre
- # progress
- # q
- # rect
- # rp
- # rt
- # ruby
- # s
- # samp
- # script
- # search
- # section
- # select
- # set
- # slot
- # small
- # source
- # span
- # stop
- # strong
- # style
- # sub
- # summary
- # sup
- # table
- # tbody
- # td
- # template
- # textarea
- # tfoot
- # th
- # thead
- # time
- # title
- # tr
- # track
- # u
- # ul
- # use
- # var
- # view
- # wbr
Private methods (7)
Show private methods Implementation detail — not part of the public API.
Methods (inherited)
From Object
(17)
- # acts_like?
- # blank?
- # deep_dup
- # duplicable?
- # html_safe?
- # in?
- # instance_values
- # instance_variable_names
- # presence
- # presence_in
- # present?
- # to_param
- # to_query
- # try
- # try!
- # with
- # with_options
From ActiveSupport::NumericWithFormat
(2)
- # to_formatted_s
- # to_fs