FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.1 Contact Page Segment & Input

Firstly we’ll review the documentation of the segment element which we have used previously. Semantic UI has a plethora of form features, so we’ll start slow and learn about the input first, and all its variations and states.

6.1 Contact Page Segment & Input

Hi guys. Welcome back to getting started with Semantic UI. And in this lesson we are going to be adding content to the contact page. So, the first thing we are going to take a look at is the segment. Now the segment we've already taken a look at in previous lessons, but I'd like to go through the documentation with you in this lesson. So if you want to find the documentation, it's under the header elements and then you'll find segment second to last. So, the first type of segment is the one that's very basic, that just has a nice thin border and a white background color and you'll be able to see here it's just a div with the classes of UI and segment. Now, you can put whatever content you like within the segment. So for example you can put paragraphs, images, and in our case we're gonna be put form elements inside of the segment which isn't required with the Semantic UI, but however the segment does play very nice with form elements. So you can put whatever you like in here, but also, it's not required. If you want to put the form elements directly on the page, you can do it. So now, I wanna take a look at the different types. So we have a vertical segment, which if you add the class of vertical, you'll notice you'll have a border at the bottom of your segment. You also have the horizontal segment, which has a border to the right of it. And, again you just put in the class of horizontal. You then, also have piled. So, a piled segment just looks like a stack of papers and if you just take a look at the example code you just have to add the class of pile. Then also you have stacked so this makes it look like a neatly stacked pile of paper. And again the class right there is just stacked. Then also you have the states, which there is only one state disabled and again you just add the class of disabled on to there. The next one we have a few variations. So the first one is inverted, and inverted just allows you to invert the colors and it will also strip out the border as well. So you can see there that it changes the background from the nice white color to the very dark. And also, you, the text has been inverted from dark to light as well to give a better contrast. And all you need to do is just add in the class of inverted. Then, also, you have Raised. Raised allows you to have a little shadow on here to make it look like it's raised off the page. And again, you just need to add the class of raised onto there. The next one is Colored. So Colored allows you to choose from a variety of colors. Blue, orange, green, red, and purple as well as teal as well. And all you need to do is just define the color on the segment. Now this is important to note that if you define a color and also you have inverted on there as well, it will actually invert the colors. It will get rid of the border, and then it will set the background color to whatever color you have chosen. So you can see here that these segments have the class of blue, and also inverted as well. Then we have ordinality. Which basically stalls it on the importance of the segment. So with each type you have primary, secondary, and tertiary or third level. Each level you go down the less important it is. So tertiary is the lowest, primary is the highest. So you can also have inverted. So again, with inverted you can have primary, secondary, and tertiary. And if you have a color, again, it goes from dark to lighter and less contrast with the less important segments. Primary, secondary, tertiary. Then also you have circular. So with circular it's best to actually define the width and the height. And that's because if you don't, and the width or the height is a little bit larger than the other, you will end up with an ellipse. But to make this circular, all you need to do is just add the class in here of circular. But again, don't forget you may need to define the width and the height. You can also have floated. So floated means that you can float your segments and they can have content to the left or to the right of them. So for a example I can tell a certain segment to float over to the right. So you'd either say right or left and then you'd also have the class of floated as well. You'll also have the text alignment within the segment. So if you take a look at this you can have right, left, center, and justified. So you have right, left, center, and unfortunately justified doesn't work here. It's supposed to go all the way over to the other edge, so it's left to right. You can set the justification alignment of the text within CSS very easily. And don't forget that with right, left, and center you need to have the class of aligned on there as well, but justified can be on its own. Then we have the basic styling. So again, you just add basic onto here, which gets rid of the border and the background color. And just has the padding and the content inside of it. Then also you have attached, which allows you to make this look like it's attached to other content on the page. So for example, you can have top attached, which means that there will be content below where it's attached. And if I say top attached, it will have both of the top corners with the corner radius and the bottom corners with no corner radius then also you have attached. So attached means that all the corner radius will go. Then also you have bottom attached which means that only the bottom corners will have the corner radius. So, now it's time to take a look at adding the segment into the contact page. So, the first thing I want to take a look at is creating a div with the class of UI and then also with the class of segment. Then I'd like a nice color on there so I'm gonna say orange. And I don't want to invert it. So I'll just have it, that nice top border color. Then also I'd like to say raised as well, so it raises it off the page. And very quickly we can put a paragraph in here with some text and refresh it in the browser, just so that we can see it. So the next thing I want to do is strip out that paragraph. So, now I want to add in an input. So, the reason why I'm just focusing on a basic text input is because that alone has many options inside of the semantic UI. So before we move onto a fully built form, I'd like to just show you all the options available with you in the basic text input. So I'm just going to take a look under elements for input. And it provides all the documentation. You can see here that with a basic input we have a div wrapping around the input. And the div has the classes of UI input, and then you can define the type of input, which is basic text. Or you can have password if you don't want the characters to be legible. And also, placeholder text, if you would like. But bear in mind that placeholder text is a new feature in HTML5, and it may not work in older browsers. So what I'm going to do is add that into my page. So we're going to have a div with a class of UI and also input as well. Inside of the div, we are going to have an input. We are going to define the type and it's going to be of type text and then also I want to add in some placeholder text, go ahead and save that. And refresh in the browser. So now we have some placeholder text. And we have a basic input. So now we're going to take a look at a few of the states. So we have focus which will focus in on the input. All we need to do is add in the focus class onto the div. But then we have, loading, which has this nice loading icon. And, also we have error as well. So, let's start out with the easiest one. We have error onto the many div, that's wrapping around the input. If I hit refresh you'll notice now I can clearly see that there is something very wrong with this input and the value. We also have icon loading, and also if you have icon loading you need to add the i tag in. So if I say i, and then we need to have the class on the i tag of icon, save it, hit refresh, and there you'll notice you have that nice loading icon in the input. Then we also have a few variations to choose from so let's take a look at those in the documentation. So first of all, we can have icons within the input. And they don't necessarily have to be loading icons, of course. You can have any icon that is available to you in the icon section. So, let's first of all start to experiment. So the first thing we're gonna take a look at is adding in the class icon onto the div that's wrapping around the input. And then we can put our i tag in here and give it the classes of, first of all, icon and then which icon you would like. So, I could say, search. Save it, go back, hit refresh. So there is the search icon. You can have it over the left-hand side. So, again, look at the parent and then say left. So it's ui left icon input. And it will swap it over just like so. You also have the circular icon, so if I say circular we can refresh and there you go, there's a nice circular icon. You can also have inverted as well, so if I save that, let's hit refresh. There's the inverted one and you can also have it over the right hand side by default. Also if you don't have it as circular it should look like an extension like a little button on the end of there. And also you can target the parent div and tell it to go to the left-hand side again. So there is the different types of icons that you can have on your input. Also what you can have is labels. So let's review that documentation. Just scroll down a little bit. And you can see here we can have a corner label. And also we can have a nice label that actually gives us some information about this input that you can't currently see. But you can see here that all we need to do is add the class of labeled. And then inside of there if we want a corner label, we'll put a div for the relevant classes on there and then we put the icon in that we would like. So typically this would be an asterisk to say that this is a required field. So I'm just going to take out those classes right there and we're going to put the class of labeled onto the parent. Then it's time to put in the label so I'm first of all going to have a div with the class of UI corner label and then we need to have the icon in there, so that's gonna have the class of asterisk and also with the class of icon as well. Save it. Go back. Hit refresh in the browser. And there is my corner label. Now the other type of label that you may want to put in allows the user to identify what content you want in there instead of having a placeholder. So I can have a div in here with the class of ui label. Just like so. And I can have it pointing. So it has a nice little arrow. So put the class of pointing on there. And then you can have the content of the label, so I'll just say name in this case. And there you can see we have the pointing label. Also, if I was to have it above my input, I could change where it's pointing, so I could say left, right, or below, just like so. And then it will reverse it. Cuz otherwise, if you don't say below, it will still the pointer facing upwards by default. So, make sure that you have the correct pointer position and we can go ahead and get rid of those classes and labels. So the next thing I want to take a look at is making my input fluid. So if I make this fluid, it will stretch to the parents' width. And you can also have an action. So an action allows you to have a button. And you can just have a normal text button. You can have a button with an icon. You could have a button with just an icon on its own and so let's take a look at adding in a button. So first of all on the parent we want to add the class action then with the input we want to create a div with a class of UI. Button, let's make it a labeled icon. And again refer to the button UI for all the different types of buttons you have. And I'd like to just say something like order. And let's put the i tag in. You have a few classes on the i tag. So we'll have icon bell. And also let's make the color of the button red. So now I can save that, hit refresh, and there is the button. And you'll notice it sticks with the fluid layout, if you want to. You don't have to stick with the fluid layout. It's entirely up to you. So I've hit refresh, now it's no longer fluid. So you can see here that there are a lot of options with even the basic input. Also, please do remember you have all the different sizes as well. So you have the class of small. You also have the class of mini. Then you have large. And again this is on the div wrapping around the input. Then also big, huge, and massive. So you have all those different size variations, and what I'm going to do is take a look at deleting this out and then we have a blank segment ready for us to put the form in in the next lesson. So thank you for watching.

Back to the top