We can do all theming like color,size etc using pure CSS.Material icons (mat-icon) are supported by all modern web browsers.We can use the file hosted in Google web font server or can be hosted in our own server.There are around 900+ material icons, all are from a single, small file(42KB) and divided into 10+ categories.Import from icons are not limited to angular,In HTML webpages just use in place of tag.Īll the material icons packaged into a single font file.Īll we need to do is adding the below Google web fonts css in our html page. We have to import MatIconModule from Angular Material Modules. is part of angular material module called MatIconModule.We can use font ligature as an icon by putting the ligature text in component. ().Selector is used to display Material icons in Angular.We have around 900+ Angular Material icons.To show the below list icons,We need to load material icons css provided by Google Let’s see some code!Ĭonstructor(private observer: BreakpointObserver) 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. This article provides for one way of making a responsive sidebar in Angular with material components and the CDK package. With the proliferation of tablets and mobiles nowadays, it is a given that your web app needs to be responsive in its layout. The container is actually called the mat-sidenav-container. A clean and intuitive responsive sidebar in Angular for you Conclusion. 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 kommentar(er)
