Use View Functions to Create Reusable Pieces of UI in Elm
We will use the pink box element that we had from previous lessons while implementing our fancy dashboard and we will turn it into our Card "component", the piece of UI that we are going to repeat and that will have its own state later on the course.
To do this, we'll first manipulate the background color and text color, then change the height and width of the card. We will want to change the title for each of the cards and to do so we will accept a title argument that will be passed down to our text element within the card to be displayed.
Instructor: [0:01] In this lesson, we' going to turn our repeated element, which is called, my element, into something more useful that we're going to call, view cards. Now except under to call view functions, the pieces of the UI that we are going to reuse. Just like React components, they receive arguments, and the output, in our case, elements from ELM UI.
[0:27] We're going to turn this element into a row, because we might want to have content. Now, we're going to create a color, which we're going to call white, because it's going to be reused. We can scroll to the top and say, new binding called white, which is going to be RGB555. We can infer the type for this, because it's just a color. Now, our cards are now white. Great.
[0:56] We're going to change our font color now because it doesn't make sense. If the font is white too, we cannot see anything. Now it's grayish, and we're going to add a couple of properties too. We're going to say the mouth is rounded by 15.
[1:12] We're going to tighten by 20 pixels, and we're going to say that it's going to have a height of pixels to the hundreds. We can say for now that we want them to have a width of, again, 300 pixels. To be able to align the text inside the box, we need to turn this into its own element with its own properties. We're going to start. We're going to say Align. Top.
[1:44] Now, it's looking good. It's looking like a kind of title. You notice that since we're high-coding stylish, all of the cards are the same. We want them to have different titles, different sections. For that, we're going to add an additional title argument that is going to be a string, and we're going to pass it here. Title.
[2:06] Now the old compiler's basically going to yell at us because we haven't given the proper title to each of our view card functions. This one is going to be called, overall. This one is going to be called, category1, category2, and finally category3.
[2:24] Now, the four different sections of our dashboard are looking good, and we have effectively used our view card function to have a reusable piece of UI.