HTML Tags & CSS Classes
HTML elements
Each Hyperstack component renders a series of HTML (and SVG) elements, using Ruby expressions to control the output.
UL do
5.times { |n| LI { "Number #{n}" }}
end
For example
DIV(class: 'green-text') { "Let's gets started!" }
would create the following HTML:
<div class="green-text">Let's gets started!</div>
And this would render a table:
TABLE(class: 'ui celled table') do
THEAD do
TR do
TH { 'One' }
TH { 'Two' }
TH { 'Three' }
end
end
TBODY do
TR do
TD { 'A' }
TD(class: 'negative') { 'B' }
TD { 'C' }
end
end
end
See the predefined tags summary for the complete list of HTML and SVG elements.
Naming Conventions
To distinguish between HTML and SVG tags, builtin components and application defined components the following naming conventions are followed:
ALLCAPS
denotes a HTML, SVG or builtin React psuedo components such asFRAGMENT
.CamelCase
denotes an application defined component class likeTodoList
.
HTML parameters
You can pass any expected parameter to a HTML or SVG element:
A(href: '/') { 'Click me' } # <a href="/">Click me</a>
IMG(src: '/logo.png') # <img src="/logo.png">
Each key-value pair in the parameter block is passed down as an attribute to the tag as you would expect.
CSS
You can specify the CSS class
on any HTML element.
P(class: 'bright') { }
... or
P(class: :bright) { }
... or
P(class: [:bright, :blue]) { } # class='bright blue'
For style
you need to pass a hash using the React style conventions:
P(style: { display: item[:some_property] == "some state" ? :block : :none })
Complex Arguments
You can pass multiple hashes which will be merged, and any individual symbols (or strings) will be treated as =true
. For example
A(:flag, {href: '/'}, class: 'my_class')
will generate
<a flag=true href='/' class='myclass'></a>
Last updated
Was this helpful?