diff --git a/guide/first-component.md b/guide/first-component.md index a5b8a26..cbbfe5c 100644 --- a/guide/first-component.md +++ b/guide/first-component.md @@ -1,8 +1,8 @@ # Building your first component in Phlex -Let's start by building a simple Card component. A Card is a presentational component, it doesn't -really have any behavior. So it's going to be mostly for abstracting away the CSS classes and specific -markup. We'll use simple classes in our example, but you could imagine if you were using a utility +Let’s start by building a simple Card component. A Card is a presentational component, it doesn’t +really have any behavior. So it’s going to be mostly for abstracting away the CSS classes and specific +markup. We’ll use simple classes in our example, but you could imagine if you were using a utility based CSS framework like Tailwind that you would be abstracting away a lot more. ```ruby @@ -13,9 +13,10 @@ class Card < Phlex::HTML end ``` -Not the most exciting component, but it's a start. We can use it like this: +Not the most exciting component, but it’s a start. We can use it like this: ::: code-group + ```ruby [view.rb] class View < Phlex::HTML def view_template @@ -25,14 +26,16 @@ class View < Phlex::HTML end end ``` + ```html [output]

Card content

``` + ::: -This is nice, but some of our cards will need a header section that has a title. Let's keep adding +This is nice, but some of our cards will need a header section that has a title. Let’s keep adding to our `Card` component so that it can have an optional header: ```ruby @@ -40,21 +43,22 @@ class Card < Phlex::HTML def view_template(&) div(class: "card", &) end - # [!code ++:8] - def header(&) + + def header(&) # [!code ++:3] div(class: "card-header", &) end - def title(&) + def title(&) # [!code ++:3] h2(class: "card-title", &) end end ``` -We've added `header` and `title` methods to our `Card` component. Now when we render a card, we can +We’ve added `header` and `title` methods to our `Card` component. Now when we render a card, we can use the block argument, which will be the instance of our `Card`, and call our new methods: ::: code-group + ```ruby [view.rb] class View < Phlex::HTML def view_template @@ -68,6 +72,7 @@ class View < Phlex::HTML end end ``` + ```html [output]
@@ -76,10 +81,11 @@ end

Card content

``` + ::: Ok, this is starting to look a bit better. But we also need a way to add an action button to our card. -This will need a bit more flexibility than just changing the content of the button. Let's see what +This will need a bit more flexibility than just changing the content of the button. Let’s see what that looks like: ```ruby @@ -105,6 +111,7 @@ end This will let us pass in attributes to the action button. ::: code-group + ```ruby [view.rb] class View < Phlex::HTML def view_template @@ -118,6 +125,7 @@ class View < Phlex::HTML end end ``` + ```html [output]
@@ -127,13 +135,14 @@ end Action
``` + ::: -This seems like it's working, but we actually have a bit of a problem. We can't specify a class for +This seems like it’s working, but we actually have a bit of a problem. We can’t specify a class for our action button without overriding the class provided in the `action` method. Any custom class or classes we provide will clobber the default `card-action` class. Phlex provides a helper method to help us deal with this situation called `mix`. It mixes attributes together, and is aware of token lists. -Let's update our `action` method to use `mix`: +Let’s update our `action` method to use `mix`: ```ruby def action(**attributes, &) @@ -145,6 +154,7 @@ Now if we specify a custom class when we call our `action` method, it will be ad instead of overriding it. ::: code-group + ```ruby [view.rb] class View < Phlex::HTML def view_template @@ -158,6 +168,7 @@ class View < Phlex::HTML end end ``` + ```html [output]
@@ -167,4 +178,5 @@ end

Card content

``` + :::