- Overview
- Transcript
4.3 The `Submenu` Component
In this lesson we'll finish our nav area implementation with the Submenu
component.
1.Introduction1 lesson, 00:52
1.1Introduction00:52
2.Get Started with Semantic UI5 lessons, 22:52
2.1What Is Semantic UI?04:11
2.2Theming in Semantic UI06:42
2.3Semantic Collections04:36
2.4Semantic Elements03:22
2.5Semantic Views and Modules04:01
3.Semantic Ui and Vanilla JavaScript4 lessons, 16:22
3.1Set Up the JavaScript Project05:37
3.2Set Up the Header With a Menu and Hero Area03:36
3.3Add Some Sections03:32
3.4About and Contact Sections03:37
4.Semantic Ui for React6 lessons, 18:55
4.1Set Up the React Project04:16
4.2The `Menu` Component03:25
4.3The `Submenu` Component03:09
4.4Create a File Listing02:34
4.5Set Up the Angular 2 Project02:06
4.6Set Up the Menu03:25
5.Semantic Ui and Angular2 lessons, 08:11
5.1Set Up a Hero Area05:11
5.2Set Up the Campaign Information03:00
6.Conclusion1 lesson, 00:47
6.1Conclusion00:47
4.3 The `Submenu` Component
Hello everyone, I am Reggie Dawson. Welcome to the Semantic UI framework and JavaScript projects course with Tuts+. Now that we have our menu set up, next we need to build a submenu. Now if we look at GitHub, we see there's a tabular submenu beneath the regular menu. Recreating this menu is possible with the default components in Semantic UI React. Now again, this won't be an exact clone, but it would be enough to fool the average user. The first thing we need to do is add a file named submenu.js. The first thing we do, of course, is import the React component. After that we grab the Grid, Icon, Header, Button, and Menu components from semantic-ui-react. Then we will add our class as a whole chunk since we already know what the parts do. Every component will start off the same with the imports, a class that we export and the render method. The only difference will be the JSX that is in our render method. After that we add a grid row to wrap our content. Then we add a column with the width property added, this specifies the width and columns for this particular column. Incidentally, we still have a default of 16 columns to a row. In this column we add the archive icon that's supposed to represent the repository that we are looking at. Then we add a 6 wide column with the header element. The as property serves to render this header as an h2 tag. This is how we can alter the size of our header by passing the heading element that you wanna use. Then we have the color property that is setting our text to blue. Then we add a column set to a width of 3. This empty column is just creating some space between the rest of the content that we will add to this row. Then we add a 2 wide column that holds a button. The content property is what will appear on the left hand side of the button. The icon will be to the left of the content and the label will be what the value is of the button. This will be a split button that the user can click to watch the repository. You will understand better how they're styled once we preview the project. Then we add two more buttons just like the one we just added. Now if we add up all the column widths we have 16. So anything we add next will be in a new row. Then we add a 16 wide column to hold a tabular menu. By adding the tabular property it is now a tabular style menu. After that our sub menu is finished. Let's go over to App.js so we can add this component to our project. The first thing we will do is import the sub menu component. Incidentally, if you're wondering why we have been adding default to our classes, it is making it the default export. This is why we don't have to wrap our component imports in curly brackets. Then finally, we add the sub menu to our grid. Save everything, and then navigate to your project in a command line and run npm start. Now when the project starts it is beginning to look like GitHub. The tabs may not be apparent til we click on one. But they are tabs. Also notice the styling of the buttons. I actually think they look better than the GitHub buttons. Now, in the next video, we will finish up this project by adding our file listing.