HTML Tags & CSS Classes
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
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
.
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.
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'
P(style: { display: item[:some_property] == "some state" ? :block : :none })
You can pass multiple hashes which will be merged, and any individual symbols (or strings) will be treated as
=true
. For exampleA(:flag, {href: '/'}, class: 'my_class')
will generate
<a flag=true href='/' class='myclass'></a>
Last modified 2yr ago