Pre-order

πŸ”“ Unlock video

Pre-order, get early bird pricing, and help shape this course.

Pre-order video course

Blocks, slots, & yielding

One of the most powerful features of Phlex is how well it can handle blocks of content. If you’re familiar with custom HTML elements or other component frameworks, you may have heard this referred to as β€œslots”.

Default block from a render

A very common way to use blocks is to render a component with a default block of content. This is done by calling the render method on the component class and passing a block of content to it. This block is called when the view_template method is invoked during the rendering process.

πŸ”“ Unlock content

Pre-order this course to unlock this video, source code, and content.

Pre-order video course for $379 $249
class Card::Component < β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“
  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“(&β–“β–“β–“β–“β–“)
    β–“β–“β–“(class: "card") do
      β–“β–“(class: "card-title") { "Hello, world!" }
      yield
    end
  end
end

β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“ do
  p "This is a block of content."
end

Multiple blocks

β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“

class Card::Component < β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“
  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“(&β–“β–“β–“β–“β–“)
    β–“β–“β–“(class: "card") do
      yield
    end
  end

  def β–“β–“β–“β–“β–“
    β–“β–“(class: "card-title") { yield }
  end
end

β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“

β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“ do |β–“β–“β–“β–“|
  β–“β–“β–“β–“.β–“β–“β–“β–“β–“ { "Custom title" }
  p { "This is a block of content." }
end

β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“ β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“

Order matters

β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“

β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“ do |β–“β–“β–“β–“|
  p { "This is a block of content." }
  β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“
  β–“β–“β–“β–“.β–“β–“β–“β–“β–“ { "Custom title" }
end

β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“

Deferred rendering

β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“

β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“

class Card::Component < β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“
  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“(&)
    β–“β–“β–“β–“β–“β–“(&)

    β–“β–“β–“(class: "card") do
      β–“β–“(class: "card-title", &β–“β–“β–“β–“β–“β–“)
      β–“β–“β–“(class: "card-content", &β–“β–“β–“β–“β–“β–“β–“β–“)
    end
  end

  def β–“β–“β–“β–“β–“(&β–“β–“β–“β–“β–“)
    β–“β–“β–“β–“β–“β–“ = β–“β–“β–“β–“β–“
  end

  def β–“β–“β–“β–“β–“β–“β–“(&β–“β–“β–“β–“β–“)
    β–“β–“β–“β–“β–“β–“β–“β–“ = β–“β–“β–“β–“β–“
  end
end

β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“

β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“ do |β–“β–“β–“β–“|
  β–“β–“β–“β–“.β–“β–“β–“β–“β–“ { "This is a block of content." }
  β–“β–“β–“β–“.β–“β–“β–“β–“β–“β–“β–“ do
    p { "Custom title" }
  end
end

β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“

β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“ do |β–“β–“β–“β–“|
  β–“β–“β–“β–“.β–“β–“β–“β–“β–“β–“β–“ do
    p { "Custom title" }
  end
  β–“β–“β–“β–“.β–“β–“β–“β–“β–“ { "This is a block of content." }
end
Inheritance
Next video
Tags, attributes, & text
Previous video