HTML Rendering
Matestack’s rendering mechanism takes care of converting Ruby into HTML:
1
div class: "card shadow-sm border-0 bg-light", foo: "bar" do
2
img path: "...", class: "w-100"
3
div class: "card-body" do
4
h5 "foo", class: "card-title"
5
paragraph "bar", class: "card-text"
6
end
7
end
Copied!
will be rendered to:
1
<div class="card shadow-sm border-0 bg-light" foo="bar">
2
<img src="..." class="w-100">
3
<div class="card-body">
4
<h5 class="card-title">foo</h5>
5
<p class="card-text">bar</p>
6
</div>
7
</div>
Copied!
That's working because matestack-ui-core defines all kind of Ruby methods targeting Rails ActionView tag helper, rendering the desired HTML tag and content as a String.
Following tags are supported:

Supported HTML Tags

Void Tags

These tags by definition do not allow an inner HTML and therefore do not take an block but all kinds of tag attributes, e.g.:
1
# ...
2
hr class: "some-class"
3
# ...
Copied!
    area
    base
    br
    col
    hr
    img | you can use src or path in order to reference the url to the image
    input
    link
    meta
    param
    command
    keygen
    source

Tags

The following tags take content via a block OR first (non-hash) argument and all kind of tag attributes, e.g.:
1
# define inner HTML via a block
2
span class: "some-class" do
3
plain "foo"
4
end
5
# OR: define inner HTML via a simple first non-hash argument
6
span "foo", class: "some-class"
7
# ...
Copied!
    a | you can use href or path in order to reference the url of the link
    abbr
    acronym
    address
    applet
    article
    aside
    audio
    b
    base
    basefont
    bdi
    bdo
    big
    blockquote
    body
    button
    canvas
    caption
    center
    cite
    code
    col
    colgroup
    data
    datalist
    dd
    del
    details
    dfn
    dialog
    dir
    div
    dl
    dt
    em
    embed
    fieldset
    figcaption
    figure
    font
    footer
    form
    frame
    frameset
    h1 | also available via heading size: 1
    h2 | also available via heading size: 2
    h3 | also available via heading size: 3
    h4 | also available via heading size: 4
    h5 | also available via heading size: 5
    h6 | also available via heading size: 6
    head
    header
    html
    i
    iframe
    ins
    kbd
    label
    legend
    li
    main
    map
    mark
    meter
    nav
    noframes
    noscript
    object
    ol
    optgroup
    option
    output
    paragraph | p is not working as it's an alias for puts in Ruby core
    picture
    pre
    progress
    q
    rp
    rt
    ruby
    s
    samp
    script
    section
    select
    small
    span
    strike
    strong
    style
    sub
    summary
    sup
    svg
    table
    tbody
    td
    template
    textarea
    tfoot
    th
    thead
    time
    title
    tr
    track
    tt
    u
    ul
    var
    video
    wbr

Text Rendering

In order to render plain text, do:
1
#...
2
plain "hello world!"
3
# "hello world!" alone would not be rendered!
4
#...
Copied!

Tag/Data Attributes

Matestack's rendering mechanism automatically renders all given options as tag attributes. For convenience, data attributes can be passend in within a data hash:
1
div class: "foo", id: "bar", hello: "world", data: { foo: "bar" } do
2
#...
3
end
Copied!
1
<div class="foo" id="bar" hello="world" data-foo="bar">
2
<!-- ... -->
3
</div>
Copied!

Rails View Helpers

Using Rails view helpers (https://api.rubyonrails.org/classes/ActionView/Helpers.html) in components, pages and apps is supported with some limitations currently. You just have to put a plain before a view helper, if this view helper is rendering a HTML string, for example:
1
plain link_to "Show", post_path(@post)
Copied!
A component needs to be called in context of a controller (with included Matestack::Ui::Core::Helper), which is true when you're calling components of Rails views or on Matestack Pages (which are themselves called by a controller normally).
When calling a component in isolation (which is possible), the view helpers might not work properly!
It's currently not possible to use view helpers requiring a block, such as the form_for. We're working on supporting them soon!

Custom HTML Tags

If you want to use HTML tags which are not supported by Matestack's rendering mechanism by default, you can call ActionView's tag helper manually:
1
plain tag.xyz("foo")
Copied!
will render:
1
<xyz>foo</xyz>
Copied!
Last modified 4mo ago