Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
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.
ngx-mzd-timeline
Advanced tools
Readme
Angular material theme supported minimalist's vertical timeline library for Angular applications.
Live demo is available at github pages.
npm install --save ngx-mzd-timeline
MzdTimelineModule
in your app module...
import { MzdTimelineModule } from 'ngx-mzd-timeline';
@NgModule({
...
imports: [
...
MzdTimelineModule
]
})
export class AppModule { }
<mzd-timeline>
<mzd-timeline-content>
Your HTML code or any angular component can be placed here.
Content will be displayed in a card.
</mzd-timeline-content>
</mzd-timeline>
mzd-icon
supports fontawesome icons.
<mzd-timeline>
<mzd-icon><fa-icon icon="briefcase"></fa-icon></mzd-icon>
<mzd-timeline-content>
Your HTML code or any angular component can be placed here.
Content will be displayed in a card.
</mzd-timeline-content>
</mzd-timeline>
Border around the content
<mzd-timeline>
<mzd-icon><fa-icon icon="briefcase"></fa-icon></mzd-icon>
<mzd-timeline-content [border]="true">
Your HTML code or any angular component can be placed here.
Content will be displayed in a card.
</mzd-timeline-content>
</mzd-timeline>
Other examples can be found in the app.component.html file.
The package supports angular material theme. In your own angular material theme:
@import '~@angular/material/theming';
@import "~ngx-mzd-timeline/src/mzd-timeline.theme.scss";
...
@include angular-material-theme($your-theme);
@include mzd-timeline-theme($your-theme);
tag | number |
---|---|
<mzd-timeline-content> | n |
property | type | default | impact |
---|---|---|---|
alternateSide | boolean | true | If set to true, entries will be displayed alternately ('left' / 'right' ). In XS devices, if set ture, contents will be placed at 'right' side of the vertical line; if set false, content will be placed at 'left' /'right' depending on the value of firstContentSide . |
firstContentSide | string | 'left' | Changes side ('left' / 'right' ) of the first content is shown on. If alternateSide is false , all the contents will follow the side of the first content, otherwise contents will take side alternately. No effect in XS devices if alternateSide is true . |
tag | number |
---|---|
<mzd-icon> | 0/1 |
any html / angular component | n |
mat-card
can also be used. An example can be found in app.component.html file.
property | type | default | impact |
---|---|---|---|
card | boolean | true | Creates box shadow around the content, similar to mat-card . |
border | boolean | false | Creates border around the content. |
Supports fontawesome icon as content.
tag | number |
---|---|
<fa-icon> | 0/1 |
Single English letter can also be used as icon. For example:
<mzd-icon><strong>X<strong></mzd-icon>
No input for this component.
This library was generated with Angular CLI version 9.0.7.
Run ng generate component component-name --project ngx-mzd-timeline
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-mzd-timeline
.
Note: Don't forget to add
--project ngx-mzd-timeline
or else it will be added to the default project in yourangular.json
file.
Run ng build ngx-mzd-timeline --prod
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test ngx-mzd-timeline
to execute the unit tests via Karma.
FAQs
Minimalist's vertical timeline library for Angular applications.
The npm package ngx-mzd-timeline receives a total of 219 weekly downloads. As such, ngx-mzd-timeline popularity was classified as not popular.
We found that ngx-mzd-timeline 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.