A library of Angular modules meant to help out with navigation and layout for smaller screen devices
npm install angular-layout-master(Please consider TODO section at the bottom for production use.)
Angular Layout Master provides unstyled containers that are already positioned and sized for you, while making it clear where inline elements should be. The angular-layout-master-demo repo provides examples of how this package can help with Layout.
Ideally it's opinionated style guide tries to make a distiction between:
- Layout Components (prefixed with View) - Layout Responsibilities and uses widgets.
- Widget Components (no prefix) - Contained Logic for a widget (e.g. ChartComponent)
Layout Utilities out of the box:
- Layout Containers
- Auto Navigation
- View Navigation - (Responsive Navigation for smaller screens)
- Breakpoints
- Document Padding
- Lazy Module Router
``html`
- Currently as of version 2, the top-bar and right-drawer are usable for navigation purposes.
`html`
`typescript`
const routes: Routes = [{ path: 'home' }] => (DI service.navData) or use
module-routing.ts
`typescript`
{
path: 'path-to-view',
component: ViewComponent, // Layout Responsibilty
// #Fragment Navigation for Smaller Screens
data: {
layViewChildren: [
{
path: 'todo',
component: TodoComponent, // Widget Responsibility
layIcon: 'fa fa-check-square-o'
},
{
path: 'weather',
component: WeatherComponent, // Widget Responsibility
layIcon: 'fa fa-sun-o',
}
]
}
}
view.component.html
`html
`
E.g. In Layout Config
`typescript`
const layoutConfig = {
breakpoints:
// In Css pixels
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
}
Using it..
component.ts
`typescript`
class MyComponentOrService {
// DI Layout Mater Service
constructor(public lay: LayoutMasterService) {}
}
component.html
`html`
Some views may need to continously reuse document padding but not all views share the same padding requirements. Its nice to have control over the document padding at the root level for this flexibility and reusability.
Setup padding environemnts.
app.module#AppModule -> @NgModule-> LayoutModule.forRoot\(\\layoutConfig\)**
`typescript
const layoutConfig = {
doc: {
pad: {
// 'name': 'css-classes'
'standard': 'p-2 pt-md-3 pr-md-5 pb-md-5 pl-md-5',
'no-sides': 'pt-2 pb-5 pt-md-3',
'none': 'p-0',
// default if unspecified in route config
default: 'standard',
}
}
}
`
Then specify in the router config what views require which padding environment.
module-routing.ts
`typescript`
const routes: Routes[] = [
{
path: 'path-to-view',
component: ViewComponent,
data: {
layDocPad: 'no-sides'
}
}
]
Lastly add a directive to a container. (Note: Directive is needed as can't update padding with classes as it's padding style property is already bound to calculating the number of active).
`html`
It comes with version 1's previous features of Route Master, which has simply been renamed to the "LayRouter" in version 2. In summary Lazy Modules can't route their components to the root module view (e.g. App.component.html) through named . This is a workaround solution to that problem.
See angular-layout-master-demo projects's) /lay-router/tutorial for documentation.
If you only require the layout router feature, you can simply only import the LayRouterModule from angular-layout-master and treeshake the rest of the package off.
`typescript
// Treeshake Layout Module
import { LayRouterModule } from 'angular-layout-master';
const routerConfig = {} // <- vizualize a config here..
@NgModule({
imports: [
LayRouterModule.forRoot(routerConfig)
],
})
export class AppModule { }
`
This is just an overview of Angular Layout Master's features. To learn more, please read the tutorial section or api reference section of the live demo. (angular-layout-master-demo repo).
- Still need to support Angular Universal (e.g. breakpoint service uses window object.) You might be able to get by though by making node more universal with npm packages like domino.
- This package has not yet been tested with lazy load import` for Angular Ivy and only has been tested with the Angular 7.1.0 version, used at angular-layout-master-demo.