Choose between text, textColumn and paragraph with elm-ui
In this lesson, we will explain when you would need to reach for the text function, why it is different from textColumn and paragraph and when to use each one as they serve different purposes for displaying text in the UI. Basically, el and text elements do not wrap text by default, so we need to use paragraph when we want text to overflow and still be visible to read. We will add a new "subtitle" section below our Breakdown subheading
Instructor: [0:00] Suppose that now we want to add a text inside our card and below our title. We would go here and say, text-content. Now we will turn it into an element, and say, align-top. You see that it's being centered, but what if the text is too long?
[0:19] By default, text does not wrap, which means that we need to use a different element in Elm UI, which is called paragraph. Now we need to turn this into a list, and now the text wraps. As you're seeing, we want this text to be below our title. How can we do that?
[0:36] We can do so by copying our contents, cutting it, and we need a new element called textColumn, and we paste it here. Remove the alignTop here, and we can say alignTop, alignLeft with fill and spacing 10. The reason why this is not yet working is because we have a main.css file that comes by default with Create Elm App. Just leave this font family. We are not going to erase it completely because we need it for later. Now, everything should work.
[1:06] We use paragraph when we want wrapped text, and we use textColumn when we need various columns with different text and contents.
[1:14] Now we're going to scrollTop and we're going to create a different section called subtitle, which is going to be a paragraph with a text. Select the options from the dropdown menus and we're going to give it the styles paddingEach. From a previous trick, edges left 20, and font color, light gray.
[1:35] We're going to go ahead and create this color. We're going to say light gray is RGB 555, 151, 151, 151. Then we're going to input the type again because it's just a color, and we're going to add our subtitle underneath our breakdown. Nice.
[1:52] You see that we used to have a fixed width of 300 pixels for our card, and now we're going to say that we want the width fit to take as much space as it needs. Now, we want to go ahead to our paragraph and also say that the font color is going to be light gray, to make it a bit different from the card title.
[2:08] Now, you know when to use text, when to use textColumn and when to use paragraphs.