FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.8 Shape Module

By using the callbacks available to you through the form validation we then want to fade out the segment loader after a little while and then take a look at the shape transform. The shape module will allow you transition using new CSS 3D transformations.

6.8 Shape Module

Hi guys. Welcome back to Getting Started with Semantic UI. And in this lesson I want to take a look at the Shape module. So underneath the Modules header you have Shape. And Shape allows you to iterate through certain pieces of content and it does it very efficiently. Now do note that the Shapes module uses 3D transformations, which are currently only supported in modern versions of Chrome, Safari and Firefox. So you have here the div and it has the classes of UI and shape. And then you have another div that contains all of the sides of the shape. And so then you can set which side you would like to be active, and that will be the current visible side. You don't have to make it the first div. You could make it the last one or any particular side you would like to be visible originally. Then, also, you have the animations. So you can have a nice cube animation. You can see it's iterating through the sides, so we have six, and then it goes all the way back to one again. And also, you have the flip transitions as well. So you can see there that it's very nice. You can also do this with text. And to take a look at a few examples, you'll be able to see that you can have irregular images, like so, animating in. Then also you have the rectangular shape, just like so. And flip them over. And so on and so forth. Then also, you have the Shape with Content. So, this is a shape and each side is an item, and then you can go ahead and run it. And you'll see it can flip it over and do cube animations or whatever. So it can contain any content you would like. And underneath Usage, we're able to see here we can use the shape method. And then we can pass in a few behaviors to determine how this will act. You can also choose which side you would like to set. So you don't have to stick with the traditional iteration. I could say, show this side originally. And then I can say, right, well I want this side to be the next one that's going to appear instead of this one by default. So I can set that one. And then once I have set it, I then run shape method again and say how I want to animate it in. So it's very easy and intuitive and you can take a look at all of the behaviors there, you can see it's very, very intricate. You have lots and lots and lots of options available to you. You also have some settings as well such as Duration. You have callbacks, so beforeChange, and onChange. Then also, you have the DOM settings, as always, so you can adjust the classes, and so on and so forth. And then you have some Debug Settings as well. So let's take a look at integrating the shape module into my page. So firstly, what we need to do is take a look at this segment. Now the content within the segment is the input, which is the checkbox, and also the button as well. Now what I would like to do is take a look at basically animating this out. Not the entire segment itself, but just this part here. So the way that I do this is by adding a div. And then we want to add the class of ui, and also the class of shape as well. Now, if you want a cube, you need to put on the cube class. But with the cube, you need to make sure that all the sides have the same width and height, and then you will have no irregularities, and you'll have a correct cube animation. But I'm not going to bother with putting the class of cube on here. Then inside of there, we need a div, which is going to hold all of the sides. So a div with the class of sides, plural. Then inside of there we're gonna create another div with the class of side. So this is one side of this shape, and then we're going to cut that data out and paste it into this div right here. And then we need to do the correct formatting. So we have the field, and then we have the side, which we can go ahead and collapse again, and then I'd like another side. And this side is going to have the finished content on there. It's just gonna say a nice little thank you. So let's create another div with the class of side, and inside of there, we want a div with the class of segment. So I'd like a nice segment in here. We also need the class of UI as well, and I want to invert it and I want the color to be green. So we'll fill the entire segment with the green color instead of just having the top border green, because we've set it to invert it. And that is looking pretty good. And the text alignment, I want it to be center aligned. So we need those two classes on there to get the text nice and central. Then I want to put in the header one. And we need a few classes on here. So it will be UI and also header as well. Inside of there, I would like an icon within my header. So let's go ahead and add the i tag. And we are going to add a few classes onto here. So the first one is icon. And then the second class will be what type of icon. So I'm just gonna say checkmark sign, like so. And then we need some text, which I can just say thank you, with an exclamation mark. So there's my header one, saying thank you very much for submitting this form. But now let's take a look at how it actually looks. So as you know, only the active side is visible first. So ideally it would be this side that you want to be active. But, however I want to show this side first of all. So I'm going to say active. And if I hit Refresh, that side will be active, so I can see in the thank you. Now the problem is, I'd like it to go all the way across. And you'll actually find it's because the shape right here has the display of inline-block. So if you go ahead and inspect the code. What you'll have is the shape right at the top here. And if I just say display as a block level element, you'll notice it will go all the way across, just like so. And so that's actually what's causing the problem. Now also, you will get the same result with the other side as well. So if I was to make the other side active, which it should be, and I hit Refresh, you'll notice again, it squashes up. So let's take a look at the CSS. And we want to target the div element with the classes of UI and also shape as well. And then, we want to say display as a block level element. So after that, save it, go back, hit Refresh, and you'll find it will now display as a block level element. That's exactly what I wanted. So now it's time to take a look at the Submit. And we have this loading right here, which I'd like to have that loading, then fade away after a certain period of time to sort of emulate the service side code loading. And then of course I'd like to sort of bring the form up and also transition in my thank you. So, the way we do it, is we're gonna say form dimmer. So, this is the unsuccess callback. So, everything's validated and it's successful. Now, you'll notice with the validation I have actually temporarily commented out all of the validation that's needed, and that's so that we don't have to keep filling in those fields. So now I can say formdimmer addClass active, and then we want to say delay. So I just want to delay this for a little bit. So this would be like the server loading the content in. So I'm just gonna delay it by 1300 milliseconds. After the delay I want to fade out. And we are going to fade out, of course, the dimmer. And I can set the speed either in milliseconds or I could say fast, slow, and so on and so forth. And let's just save that and hit Refresh just to make sure it's working. So I click, it waits, and then of course it fades away. Now after we have faded this out, we want to take a look at transitioning this shape down here. Now we need to do it after. So, the way that we do that is we bring a callback function into the mix. So, a callback function can be called back on the fadeOut method of jQuery. And then inside of that function, we could say what we want to happen after we've faded out the loader. So what we need to do now is take a look at the documentation. And you can see under Usage, we can target the shape and then we can run the shape method. And then you have all the different transitions. You can set the next slide and then transition it, just like so. And you have all sorts of behaviors right there. Also, what you have is the duration as well, so we can change that. So let's first of all, keep it simple and I can say, you know, flip up, flip down. Which, if you take a look at the definition, you know, you have flip up, which I kind of like flip up actually, but flip down looks a little bit better. So I'm gonna stick with flip down. And then, let's just open this up. We need to target the element with the classes of UI and also shape as well. Then let's run the shape method and then inside of there, we want to pass in the behavior as a string and we're going to say flip down, and end with a semicolon. So we're going to say flip down, save it, and then let's go ahead and test this. So if I click, face down and there we go. Now, there is a bit of a problem here that you just saw where the width isn't being set correctly. So, what I'm going to do is take a look at the sides as well and also the shape. So with the shape, I'm gonna set the width to 100%. And then I'm going to go down onto a new line. We're gonna target that same div and then we're going to target the element inside of there with a class of size, which is the first child. So we have the div for the class of ui and shape, then we have sides immediately after that, right there. Then I want to target each individual side within the shape. So if we go ahead and just copy that and paste it like so, and just get rid of that S. Now you need to do these both, you cannot do one without the other, because this won't work. So if I sent the width to 100%, we should now be able to save this and hit Refresh. Now for obvious reasons, I didn't set size and also side to display as a block level element, because originally, the other sides are hidden. So if I was to do it like this. I'll just show you what the problem is and if I just delete that out, save it, hit Refresh, you can see that everything is visible. So we don't want to make everything display as a block, because some elements are displaying as none. So this is why I'm only setting the width on this size and the side. So, after that, let's save it. Let's see if we cure the problem, which, actually, it will cause another problem, but it's an easy fix. So if I hit Submit, it'll load. We get the transition, but notice what happened. It went a little bit too large, and I'll just repeat that again in case you missed it. So it just went out over here. Why did it do that? Well, I managed to get a screenshot of the console or the inspect widget, whilst it was transitioning, and it shows that it actually adds the style attribute and it sets the width via JavaScript. And it sets the wrong width. Because we've set it to 100%, and for some reason it doesn't calculate it quite right. So, what should we do? Well, we need to overpower that style attribute, which you can do. So, with the shape, we're setting the width to 100% and we don't want it to go any larger. And we don't want the star attribute to overpower this CSS property. So what I am going to do is use the exclamation mark and say important and that way, the style attribute cannot overpower it. And so when we do it again, we finally have a result like that. Perfect. Now, the only other thing I'd like to do is hide the form. Because obviously they've submitted it now. They don't need that information visible anymore. So what we can do is we can wrap this all up. So let's just take a look at collapsing all of these fields and all the rest of it so that we can see this nice and clearly. Now this block of code is not actually anything to do with this lesson. I was just playing around with it. So just get rid of that section of code. All right, so now, let's take a look at wrapping the fields at the top, not the segment section though, just these fields up here in a div element with the ID of out. Then I can cut the ending div tag and paste it below, so now all of this content here is wrapped in that div element. Now, let's take a look at the script.js, and I want to target it. So, first of all, we're gonna target the element with the ID of out, and then we are gonna tell it to slide up. And then you can set the duration, so this will be something like 400 milliseconds. So let's go ahead and save it and refresh the browser. So if I hit Refresh, you'll notice it slides the form up, fades in the loader and then of course fades it out and then transitions the shape. So thank you for watching me in this lesson. And please join me in the next lesson, where we'll put the finishing touches on this form, and also take a look at the modal dialog box and progress element.

Back to the top