Phlex

Appearance

HTML elements ​

For every HTML element, there’s a Ruby method with the same name. Standard Elements that take a content block yield the current component by default. The one exception is svg, which yields a Phlex::SVG component.

Custom elements ​

If you need to register a custom HTML element (e.g. for a web component) you can use the class method register_element. This will define an instance method that you can use in your template. Underscores (_) will be replaced with dashes (-).

ruby
class Example < Phlex::HTML
  register_element :trix_editor

  def view_template
    trix_editor
  end
end

a ​

Renders an <a> element.

abbr ​

Renders an <abbr> element.

address ​

Renders an <address> element.

area ​

Renders an <area> element.

article ​

Renders an <article> element.

aside ​

Renders an <aside> element.

audio ​

Renders an <audio> element.

b ​

Renders a <b> element.

base ​

Renders a <base> element.

bdi ​

Renders a <bdi> element.

bdo ​

Renders a <bdo> element.

blockquote ​

Renders a <blockquote> element.

body ​

Renders a <body> element.

br ​

Renders a <br> element.

button ​

Renders a <button> element.

canvas ​

Renders a <canvas> element.

caption ​

Renders a <caption> element.

cite ​

Renders a <cite> element.

code ​

Renders a <code> element.

col ​

Renders a <col> element.

colgroup ​

Renders a <colgroup> element.

data ​

Renders a <data> element.

datalist ​

Renders a <datalist> element.

dd ​

Renders a <dd> element.

del ​

Renders a <del> element.

details ​

Renders a <details> element.

dfn ​

Renders a <dfn> element.

dialog ​

Renders a <dialog> element.

div ​

Renders a <div> element.

dl ​

Renders a <dl> element.

dt ​

Renders a <dt> element.

em ​

Renders an <em> element.

embed ​

Renders an <embed> element.

fieldset ​

Renders a <fieldset> element.

figcaption ​

Renders a <figcaption> element.

figure ​

Renders a <figure> element.

Renders a <footer> element.

form ​

Renders a <form> element.

h1 ​

Renders an <h1> element.

h2 ​

Renders an <h2> element.

h3 ​

Renders an <h3> element.

h4 ​

Renders an <h4> element.

h5 ​

Renders an <h5> element.

h6 ​

Renders an <h6> element.

Renders a <head> element.

Renders a <header> element.

hgroup ​

Renders a <hgroup> element.

hr ​

Renders an <hr> element.

html ​

Renders an <html> element.

i ​

Renders an <i> element.

iframe ​

Renders an <iframe> element.

img ​

Renders an <img> element.

input ​

Renders an <input> element.

ins ​

Renders an <ins> element.

kbd ​

Renders a <kbd> element.

label ​

Renders a <label> element.

legend ​

Renders a <legend> element.

li ​

Renders an <li> element.

Renders a <link> element.

main ​

Renders a <main> element.

map ​

Renders a <map> element.

mark ​

Renders a <mark> element.

Renders a <menu> element.

meta ​

Renders a <meta> element.

meter ​

Renders a <meter> element.

Renders a <nav> element.

noscript ​

Renders a <noscript> element.

object ​

Renders an <object> element.

ol ​

Renders an <ol> element.

optgroup ​

Renders an <optgroup> element.

option ​

Renders an <option> element.

output ​

Renders an <output> element.

p ​

Renders a <p> element.

picture ​

Renders a <picture> element.

pre ​

Renders a <pre> element.

progress ​

Renders a <progress> element.

q ​

Renders a <q> element.

rp ​

Renders an <rp> element.

rt ​

Renders an <rt> element.

ruby ​

Renders a <ruby> element.

s ​

Renders an <s> element.

samp ​

Renders a <samp> element.

script ​

Renders a <script> element.

Renders a <search> element.

section ​

Renders a <section> element.

select ​

Renders a <select> element.

slot ​

Renders a <slot> element.

small ​

Renders a <small> element.

source ​

Renders a <source> element.

span ​

Renders a <span> element.

strong ​

Renders a <strong> element.

style ​

Renders a <style> element.

sub ​

Renders a <sub> element.

summary ​

Renders a <summary> element.

sup ​

Renders a <sup> element.

svg ​

Renders an <svg> element. This method yields a new Phlex::SVG component.

ruby
svg do |s|
  s.rect x: 10, y: 10, width: 100, height: 100
end

table ​

Renders a <table> element.

tbody ​

Renders a <tbody> element.

td ​

Renders a <td> element.

template ​

Renders a <template> element.

textarea ​

Renders a <textarea> element.

tfoot ​

Renders a <tfoot> element.

th ​

Renders a <th> element.

thead ​

Renders a <thead> element.

time ​

Renders a <time> element.

title ​

Renders a <title> element.

tr ​

Renders a <tr> element.

track ​

Renders a <track> element.

u ​

Renders a <u> element.

ul ​

Renders a <ul> element.

var ​

Renders a <var> element.

video ​

Renders a <video> element.

wbr ​

Renders a <wbr> element.