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.
material-community-components
Advanced tools
Readme
Angular Material components that are not implemented in official package.
The idea of the Material Community Components is to provide components that aren't available in the Angular Material2 yet.
All the components are created using Angular, Material 2 and CDK. Since version 7.1.0 only Angular 9+ is supported.
The color-picker component has an additional peer-dependency to @thebespokepixel/es-tinycolor to help with color calculations.
Check out our documentation & live demo
All the components have the prefix mcc
followed by the package name.
Component | Package | Screenshot |
---|---|---|
Color Picker | mcc-color-picker | |
Scrollspy | mcc-scrollspy | |
Speed Dial | mcc-speed-dial | |
Timer Picker | mcc-timer-picker |
If you miss any component, please follow the CONTRIBUTION GUIDELINE to open an issue or file your idea here.
We use some components from Angular Material. To be able to use this components, you have to install the @angular/animations
. If you follow all the steps in Material Guide, you already have this step done.
npm install --save @angular/animations
Note: @angular/animations uses the WebAnimation API that isn't supported by all browsers yet. If you want to support Material component animations in these browsers, you'll have to include a polyfill.
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [BrowserAnimationsModule],
...
})
export class PizzaPartyAppModule { }
If you don't want to add another dependency to your project, you can use the NoopAnimationsModule.
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [NoopAnimationsModule],
...
})
export class PizzaPartyAppModule { }
Install material community components package:
npm install material-community-components
or
yarn add material-community-components
To use the same theme of Angular Material add the following code to your style.scss
.
@use '~@angular/material' as mat;
@use '~material-community-components/theming' as mcc;
@include mat.core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$demo-primary: mat.define-palette(mat.$green-palette);
$demo-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
// The warn palette is optional (defaults to red).
$demo-warn: mat.define-palette(mat.$red-palette);
// Create the theme object (a Sass map containing all of the palettes).
$demo-theme: mat.define-light-theme($demo-primary, $demo-accent, $demo-warn);
// build angular material theme
@include mat.all-component-themes($demo-theme);
// pass angular material theme to material community components
@include mcc.mcc-theme($demo-theme);
Right now only timer-picker
and speed-dial
do support the theme (see ISSUE-172).
Since version 9.0.0 the lib only provides secondary entry-points for import. To migrate change your imports like that:
Before:
import { MccColorPickerModule} from 'material-community-components';
import { MccTimerPickerModule} from 'material-community-components';
import { MccSpeedDialModule} from 'material-community-components';
import { MccScrollspyModule} from 'material-community-components';
After:
import { MccColorPickerModule} from 'material-community-components/color-picker';
import { MccTimerPickerModule} from 'material-community-components/timer-picker';
import { MccSpeedDialModule} from 'material-community-components/speed-dial';
import { MccScrollspyModule} from 'material-community-components/scrollspy';
For more examples, you can see our demo folder or read the documentation
The MIT License (MIT) Copyright (c) 2018
FAQs
Angular Material components that are not implemented in official package.
The npm package material-community-components receives a total of 1,854 weekly downloads. As such, material-community-components popularity was classified as popular.
We found that material-community-components 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.