Simple vertical tabs using @angular/material
and @angular/flex-layout
.
npm i --save SamuelMarks/angular-vertical-material-tabs
See example. Only difference in your app is your imports:
import { MaterialTabsModule } from 'angular-vertical-material-tabs/dist/material-tabs';
// add it to the `imports:` of your relevant `@NgModule`
imports: [ MaterialTabsModule.forRoot() ]
Then in your template:
<ng-vertical-material-tabs [multi]=true [selectFirstTab]=false [showSelectAll]=true>
<ng-vertical-material-tab tabTitle="Tab 0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris tincidunt mattis neque lacinia dignissim.
Morbi ex orci, bibendum et varius vel, porttitor et magna.
</ng-vertical-material-tab>
<ng-vertical-material-tab tabTitle="Tab b">
Curabitur efficitur eleifend nulla, eget porta diam sodales in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas vestibulum libero lacus, et porta ex tincidunt quis.
</ng-vertical-material-tab>
<ng-vertical-material-tab tabTitle="Tab 2">
Sed dictum, diam et vehicula sollicitudin, eros orci viverra diam, et pretium
risus nisl eget ex. Integer lacinia commodo ipsum, sit amet consectetur magna
hendrerit eu.
</ng-vertical-material-tab>
</ng-vertical-material-tabs>
Started with Juri Strumpflohner's egghead project, then:
- removed Twitter Bootstrap
- added
@angular/material
- added
@angular/flex-layout
Finally was able to implement new features and resolve existent bugs :)
rm -rf dist
ng build ng-vertical-tabs
This project was generated with Angular CLI version 8.3.7.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.