@angular-material-extensions/jumbotron
Advanced tools
Readme
Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here
If you like this project, support angular-material-extensions by starring :star: and sharing it :loudspeaker:
View all the directives and components in action at https://angular-material-extensions.github.io/jumbotron
npm i @angular/cdk @angular/material @angular/flex-layout @angular/animations
index.html file like below:<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
npm i -s material-design-icons
angular.json file"styles": [
"styles.css",
"../node_modules/material-design-icons/iconfont/material-icons.css"
],
Install above dependencies via npm.
Now install @angular-material-extensions/jumbotron via:
npm install --save @angular-material-extensions/jumbotron
Note:If you are using
SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,mapneeds to tell the System loader where to look forjumbotron:
map: {
'jumbotron': 'node_modules/@angular-material-extensions/jumbotron/bundles/jumbotron.umd.js',
}
Once installed you need to import the main module:
import { MatJumbotronModule } from '@angular-material-extensions/jumbotron';
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice MatJumbotronModule.forRoot()):
import { MatJumbotronModule } from '@angular-material-extensions/jumbotron';
@NgModule({
declarations: [AppComponent, ...],
imports: [MatJumbotronModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Other modules in your application can simply import MatJumbotronModule:
import { MatJumbotronModule } from '@angular-material-extensions/jumbotron';
@NgModule({
declarations: [OtherComponent, ...],
imports: [MatJumbotronModule, ...],
})
export class OtherModule {
}
mat-jumbotron a material card layout that holds (optional) an image and the content of the mat-jumbotron-contentmat-jumbotron-content is the main content of the jumbotron and can contains anything! It's your template<mat-jumbotron imgURL="assets/logo.svg">
<mat-jumbotron-content>
<h1 class="display-1" ngClass.xs="display-3 text-center" ngClass.sm="display-3">jumbotron</h1>
<p class="headline" ngClass.xs="text-center">Angular UI open source library built
with material design in order to illustrate a highlighted/important information for the user
</p>
<p class="text-center"> Scroll down to see it in action!</p>
<div fxLayout="row" fxLayout.xs="column"
fxLayoutGap.xs="1rem"
fxLayoutAlign="center center">
<a mat-stroked-button
color="primary"
target="_blank"
href="https://github.com/angular-material-extensions/jumbotron">
<mat-icon>code</mat-icon>
Code on Github
</a>
<a mat-stroked-button
color="primary"
target="_blank"
href="doc/index.html">
<mat-icon>note</mat-icon>
Documentation
</a>
</div>
</mat-jumbotron-content>
</mat-jumbotron>
the result will be the screen shot displayed above! For a live example, please visit the Demo App
mat-jumbotron| option | bind | type | default | description |
|---|---|---|---|---|
| imageURL | Input() | string | - | the image src url to be displayed in the jumbotron |
Please checkout the full documentation here or follow the official tutorial
$ git clone https://github.com/angular-material-extensions/jumbotron.git
$ gulp link
use gulp locally
$ npx gulp link
for some mac os users, you may use the sudo command with gulp use gulp with sudo
$ sudo gulp link
or locally
$ sudo npx gulp link
$ cd demo
$ npm i
$ npm run start
or
$ ng serve --open
http://localhost:4200/npm inpm run build or gulp build
To generate all *.js, *.d.ts and *.metadata.json files:$ npm run build
gulp link or locally npx gulp linksudo gulp link or locally sudo npx gulp linkcd demo
_ npm i
_ npm startextras
To lint all *.ts files:
$ npm run lint
Built by and for developers :heart: we will help you :punch:
Copyright (c) 2019 Anthony Nahas. Licensed under the MIT License (MIT)
FAQs
Angular UI open source library built with material design in order to illustrate a highlighted/important information for the user
The npm package @angular-material-extensions/jumbotron receives a total of 3 weekly downloads. As such, @angular-material-extensions/jumbotron popularity was classified as not popular.
We found that @angular-material-extensions/jumbotron demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.