This library provides common layout setup for material menus and content setup. This is a collection of menus (top, sidebar), content area and positioning layouts, etc. With this library, you don't need any template or external dependency as it only depends on @angular/material
.
The following are the versions as supported by different @angular/core
and @angular/material
packages;
Package Version | Angular Core Version |
---|---|
0.919.5 | 9.1.9 |
0.9111.1 | 9.1.11 |
1.0.0 | 10.0.0 |
1.1.0 | 10.0.5 |
1.1.2 | 10.1.0 |
1.2.0 | 11.0.2 |
You need @angular
project to start. Once you setup your Angular project, you can then follow the following steps:
-
Install cx-mat-layout:
npm i -s @cyazyx/cx-mat-layout
-
In the module that you plan to use the layout module, import it, for instance, if you are using
AppModule
as your layoutroot
;import { CxMatLayoutModule } from '@cyazyx/cx-mat-layout';
-
In your module
imports
, include theCxMatLayoutModule
;imports: [ CommonModule, CxMatLayoutModule, // ...Other imports ]
-
In your
styles.scss
, import our theming file:@import '~@cyazyx/cx-mat-layout/styles/cx-mat-layout.style.scss';
This file is open source and you can customize the styles as you deem fit.
-
In your
component.ts
file, import:import { NavigationItem } from '@cyazyx/cx-mat-layout';
This is used to build navigation menu items. See sample code at GitHub for example navigation items.
-
Build your menu items, e.g.
// Define a property for holding menus items menus: NavigationItem[]; // Your ngOnInit lifecycle hook to load the paths ngOnInit(): void { this.menus = [ { title: 'Home', url: '/dashboard' }, { title: 'Services', children: [ { title: 'Buying' }, { title: 'Selling' }, ] } ]; }
-
Update your layout component
HTML
to includecx-mat-layout
definitions;<cx-mat-layout [navigationItems]="menus"> <!--Top Menu--> <cx-mat-menu-top> <div class="menu-part"> <a mat-button [routerLink]="'/'" [routerLinkActive]="'active'"> <mat-icon>home</mat-icon> <span>Homepage</span> </a> <button mat-button>About Us</button> <button mat-button>Contact Us</button> </div> </cx-mat-menu-top> <!--Every other content is loaded as router-outlet--> <router-outlet></router-outlet> </cx-mat-layout>
-
You are all set, you can now focus on building your application, with native material layout instead of focusing on layout issues.
The following are the concepts associated with this package definition:
There are a number of components that make up the package;
-
CxMatLayoutComponent (selector:
cx-mat-layout
) - This is the container for layout items. It allows for the following inputs:- navigationItems - For the list of navigation items.
- topnavColor - The color attribute of the top navigation bar. Based on angular theming as applied to
mat-toolbar
. Defaults toprimary
. - topProgressBarColor - The progress bar color at the top. Defaults to
warn
. - sidenavToggleTitle - The title string to display on hover of the sidenav toggle.
- topnavPosition - The position of the top toolbar. Either
fixed
orrelative
. Defaults tofixed
. - showTopNav - Whether to display the top navigation toolbar.
-
CxMatMenuComponent (selector:
cx-mat-menu
) - This is the menu componnent that loops through the menu items and renders them. If you have to write your own custom menu item layout, you can use this to display your menu items directly. The following inputs are supported:- navigationItems - For the list of navigation items.
- fullWidth - Whether we are displaying side by side or whether the menu will be a popover.
Directly using this requires you to write your own layout logic and styling. You can use the existing source code as a starting point.
-
CxMatMenuItemComponent (selector:
cx-mat-menu-item
) - This is the menu item renderer that recursivey loops through the menu items and renders them. This component supports the following inputs:- navigationItem - The single navigation item to be displayed.
- selectedItems - The list of items that have been selected. This menu item is selected if it's found within the selectedItems array.
- level - The menu item level in the tree.
- fullWidth - Whether we are displaying side by side or whether the menu will be a popover.
- isParentExpanded - Whether the parent node is selected or not.
-
CxMatMenuTopComponent (selector:
cx-mat-menu-top
) - The content holder for top menu toolbar.
The following are the services defined for the package.
- CxMatLayoutService - The layout service used for various functionality.
You can theme the layout using the default/ original material theming implementation. The theme implementation has been left to you and by default, everything can be adjusted.
Raise your issues
and pull requests
on GitHub
We have different parts you can contribute to. These include:
- Package functionality
- Tooling improvements
- Tests and coverage improvements
- Documentation
- Customization
You can also request repository read access at mail with the parts you can contribute to and we shall get back to you with more information.