Instead, it's more due to the fact that there are so many ways to center things. The methods themselves usually aren't difficult to understand. ().Centering things is one of the most difficult aspects of CSS. Let’s see some code!Ĭonstructor(private observer: BreakpointObserver) ) sidenav!: MatSidenav ĭoing this initialises the element on component init, meaning we can rid of the AfterViewInit lifecycle as it will be available on component instatiation. Fortunately, we can detect screen size changes with the Angular CDK layout package and its BreakpointObserver service. So all we need is a way to switch between these modes when the screen size changes. We’ll need this when we want the sidebar to be hidden normally, but only appear over the content when we want to navigate to some other section. This means that the sidenav will always remain visible and our main content displayed with it. For large screen sizes, we want the mode to be side. To make the sidebar responsive, the material sidenav component provides us with a property called mode. Now that our sidebar looks good, let’s move on to making it responsive!Ĭheck out my related article on creating a responsive card grid in Angular here. This looks much more authentic and can very well be used in a real app. The avatar also has a border radius to give it the shape of a circle. To make it more real, let’s also add a section at the top of the sidebar with the profile of a user.Īnd the styles associated with these elements.īackground-color: rgba(255, 255, 255, 0.5) įor the most part, the styles have the colors and spacing needed for each of the elements. Here is how it looks like (with some styling which I’ll show in a bit). In a real app obviously you’ll also have routerLink on each of them linking to the different routes of your app. This is pretty standard stuff – some material button components with icons related to them. Ok, let’s now add some menu items aka buttons to the sidebar. If you’re more interested in the functionality of the responsive sidebar in Angular, please skip to the next section! This is strictly not needed for this app, but I wanted to make a more complete example of a sidebar. Styling our sidebar and adding the menu items Great! Let’s add some menu items and styling to our sidebar navigation menu now. Lastly, we’ve added some tweaks such as a rounded border and some elevation using the mat-elevation-z8 class which comes with material.Īs a result, we have our basic layout all set up like below. The fixed heights are there so the sections appear completely on the page (any scrolling will be inside of them). Then, we’ve added margins for the sections to appear with some spacing between them. What we’ve done here is add some background and foreground colors to setup our design. Here is how our file looks like for now. Styling our layout to give an elevated look Let’s now see how we added some styles to spice up the layout! In our case, I’ve just kept some text to show it’s the main content. You’ll most probably be using routes to show different sections of the site here. You could keep any content here, including a router-outlet. Mat-sidenav is your sidebar menu while mat-sidenav-content is the main content of your app. This has the mat-sidenav and the mat-sidenav-content sections inside of it. The container is actually called the mat-sidenav-container. Let’s add the material toolbar and the material side navigation bar to our main file.Īs you can see, the material side navigation component has some parts to it. Great, now we can move on to add our components in the template!Īdding our toolbar and sidebar components Let us now import the modules we require in our , Ng add commands create an Angular app and add the Angular Material components library to it. Let’s first set up our Angular project by running the following commands on our terminal (with the Angular CLI).
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |