docs/pages/templates.rb in phlex-0.4.0 vs docs/pages/templates.rb in phlex-0.5.0
- old
+ new
@@ -14,11 +14,11 @@
You can add attributes to HTML tags by passing keyword arguments to the tag methods.
MD
render Example.new do |e|
e.tab "hello.rb", <<~RUBY
- class Hello < Phlex::View
+ class Hello < Phlex::HTML
def template
h1(class: "text-xl font-bold") { "👋 Hello World!" }
end
end
RUBY
@@ -32,11 +32,11 @@
If you pass a `Hash` as an attribute value, the hash will be flattened with a dash between each section.
MD
render Example.new do |e|
e.tab "hello.rb", <<~RUBY
- class Hello < Phlex::View
+ class Hello < Phlex::HTML
def template
div(data: { controller: "hello" }) do
# ...
end
end
@@ -52,11 +52,11 @@
When `true`, the attribute will be rendered without a value; when _falsy_, the attribute isn’t rendered at all. You can still use the strings `"true"` and `"false"` as values for non-boolean attributes.
MD
render Example.new do |e|
e.tab "channel_controls.rb", <<~RUBY
- class ChannelControls < Phlex::View
+ class ChannelControls < Phlex::HTML
def template
input(
value: "1",
name: "channel",
type: "radio",
@@ -82,11 +82,11 @@
Because the `template` method is used to define the view template itself, you'll need to use the method `template_tag` if you want to to render an HTML `<template>` tag.
MD
render Example.new do |e|
e.tab "example.rb", <<~RUBY
- class Example < Phlex::View
+ class Example < Phlex::HTML
def template
template_tag do
img src: "hidden.jpg", alt: "A hidden image."
end
end
@@ -102,11 +102,11 @@
You can output text content without wrapping it in an element by using the `text` helper method.
MD
render Example.new do |e|
e.tab "heading.rb", <<~RUBY
- class Heading < Phlex::View
+ class Heading < Phlex::HTML
def template
h1 do
strong { "Hello " }
text "World!"
end
@@ -123,10 +123,10 @@
The example output on this site is formatted for readability, but there is usually no whitespace between HTML tags in the output. If you need to add some whitespace, you can use the `whitespace` helper. This is useful for adding space between _inline_ elements to allow them to wrap.
MD
render Example.new do |e|
e.tab "links.rb", <<~RUBY
- class Links < Phlex::View
+ class Links < Phlex::HTML
def template
a(href: "/") { "Home" }
whitespace
a(href: "/about") { "About" }
whitespace