Pre-order

πŸ”“ Unlock video

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

Pre-order video course

Inheritance

As you start to accumulating more components in your application, you’ll natrually find yourself wanting to make little tweaks in different areas. There’s several strategies to managing these tweaks including intialization parameters, extended classes, and composition.

Initialization parameters

One way of handling slight varations to a component is by passing arguments into it upon initialization. This example shows how to change the size of a card compone.t

class MyCard < Component::Base
  def initialize(size: :small)
    @size = size
  end

  def view_template
    div(class: ["card", "card__#{@size}"]){
      yield
    }
  end
end

You might call the variants like this:

<%= render MyCard.new(size: :large) do %>
  <h1>Large Card</h1>
<% end %>

<%= render MyCard.new(size: :small) do %>
  <h1>Small Card</h1>
<% end %>

πŸ”“ Unlock content

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

Pre-order video course for $379 $249

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

<%= β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“.β–“β–“β–“(size: "blue") do %>
  β–“β–“β–“β–“Large Cardβ–“β–“β–“β–“β–“
<% end %>

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

Variations via class inheritance and endless methods

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

module MyCard
  class Base < β–“β–“β–“β–“β–“β–“β–“β–“β–“::β–“β–“β–“β–“
    def β–“β–“β–“β–“ = :small
    def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
      β–“β–“β–“(class: ["card", "card__#{β–“β–“β–“β–“}"]){
        yield
      }
    end
  end

  β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
  β–“β–“β–“β–“β–“ = β–“β–“β–“β–“

  class Medium < β–“β–“β–“β–“
    def β–“β–“β–“β–“ = :medium
  end

  class Large < β–“β–“β–“β–“
    def β–“β–“β–“β–“ = :large
  end
end

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

<%= β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“.β–“β–“β–“ do %>
  β–“β–“β–“β–“Large Cardβ–“β–“β–“β–“β–“
<% end %>

<%= β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“.β–“β–“β–“ do %>
  β–“β–“β–“β–“Small Cardβ–“β–“β–“β–“β–“
<% end %>

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

<%= β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“::β–“β–“β–“β–“.β–“β–“β–“ do %>
  β–“β–“β–“β–“Large Cardβ–“β–“β–“β–“β–“
<% end %>

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

Compositions
Next video
Blocks, slots, & yielding
Previous video