Hyperstack
  • Welcome
  • Rails Installation and Configuration
    • Prerequisites
    • Using the Hyperstack Installer
    • Using the Generators
    • File Structure
    • Routing and Mounting Components
    • Other Rails Configuration Details
    • Why Rails? Other Frameworks?
  • HyperComponent
    • Component Classes
    • HTML Tags & CSS Classes
    • Component Children, Keys and Fragments
    • Component Params
    • Lifecycle Methods
    • Component State
    • Events and Callbacks
    • Interlude: Tic Tac Toe
    • Recovering from Errors
    • JavaScript Components
    • Elements and Rendering
    • Summary of Methods
    • List of Predefined Tags & Components
    • Predefined Events
    • Notes
    • Further Reading
  • HyperState
  • HyperRouter
  • HyperModel
  • Operations
  • Policies
  • Internationalization
  • Development Tools, Workflow and Procedures
    • Debugging
    • HyperTrace
    • HyperSpec
      • Installation
      • Tutorial
      • Methods and Features
      • Using with Rack
    • Deploy To Heroku
  • Tutorial
    • TodoMVC Tutorial Part I
    • TodoMVC Tutorial Part II
  • Community
Powered by GitBook
On this page
  • HTML elements
  • Naming Conventions
  • HTML parameters
  • CSS
  • Complex Arguments

Was this helpful?

  1. HyperComponent

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

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 as FRAGMENT.

  • CamelCase denotes an application defined component class like TodoList.

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'
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>
PreviousComponent ClassesNextComponent Children, Keys and Fragments

Last updated 4 years ago

Was this helpful?

For style you need to pass a hash using the :

See the predefined tags summary for the complete list of HTML and SVG elements.
React style conventions
more on passing hashes to methods