Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.2 Set Up the Campaign Information

Hello everyone, I am Reggie Dawson. Welcome to the Semantic UI Framework in JavaScript Project Scores with Tuts+. Now that we are done with the hero area, the last section we are going to add is the campaign section that displays information about the project. In addition to this information, we will also have some buttons that pledge back to campaign. The first thing we need to do of course is generate our component. Navigate to the SRC folder, and then to the app folder. Here is where we generate our components of course. Now after our components is generated, then go over to the campaign.component.ts file. This time we won't OnInit so we can delete that as well as the constructor. After that we can go over to the campaign.component.html file. First of course we will take anything that's in this file out then the first thing we will add to this file is a grid that will wrap this section. Again, we use the container class so it is not full width. We use the second class to add some space between this component and the previous one. Then we add a row that holds the fluid green secondary pointing menu. I'm sure you can tell this will be a four width menu. Of course it will be green but what about the pointing class? This type of menu points to the active item by underline. Then I set the first item to be the active item so that the underline will show this item. Then we have FAQ and update items followed by the updates and comments which have a floating label attached. This will create a floating label that will let you know how many of these items that we have. Then after that, we have one last item for the community link. Then we add a row that will serve as a header of sorts for the campaign area. Then we add another row. The structure of this row will match the previous one, so we start with the 12 wide column. This one will be center aligned, however, this will be the description of our campaign. Then finally we add a four wide center aligned column inside of the same row and inside that we add a card. This card will list the rewards that you get if you contribute $100 to the campaign. After that, we need to go over to the campaign.component.css file. All we add here is the second class that will give us some space between components. The last thing we need to do is add the component to our app. Go to app.component.html. After that, we can save our project and then navigate to it in the command line, then run MPM start. Now, before you preview the project, let's go to Kickstarter real fast and look at a campaign. After that, go to our preview at localhost:4200. Now it's not a perfect reproduction of Kickstarter but the important thing is that you now know how to integrate new semantic UI in your projects.

Back to the top