Have ideas to improve npm?Join in the discussion! »

    material-community-components
    TypeScript icon, indicating that this package has built-in type declarations

    10.0.0 • Public • Published

    Material Community Components

    Angular Material components that are not implemented in official package.

    npm version Travis CI Coverage Status patreon

    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

    Components Status

    All the components have the prefix mcc followed by the package name.

    Component Status package
    Color Picker Available mcc-color-picker
    Scrollspy Available mcc-scrollspy
    Speed Dial Available mcc-speed-dial
    Timer Picker Available mcc-timer-picker

    If you miss any component, please follow the CONTRIBUTION GUIDELINE to open an issue or file your idea here.

    Install

    step: 1

    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 { }

    step: 2

    Install material community components package:

        npm install material-community-components

    or

      yarn add material-community-components

    Theming

    To use the same theme of Angular Material add the following code to your style.scss.

    @import '~@angular/material/theming';
    @import '~material-community-components/theming';
     
    @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-palette($mat-green);
    $demo-accent: mat-palette($mat-pink, A200, A100, A400);
     
    // The warn palette is optional (defaults to red). 
    $demo-warn: mat-palette($mat-red);
     
    // Create the theme object (a Sass map containing all of the palettes). 
    $demo-theme: mat-light-theme($demo-primary, $demo-accent, $demo-warn);
     
    // build angular material theme 
    @include angular-material-theme($demo-theme);
     
    // pass angular material theme to material community components 
    @include mcc-theme($demo-theme);

    Right now only timer-picker and speed-dial do support the theme (see ISSUE-172).

    Upgrading from 7.x.x

    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';

    How to use

    For more examples, you can see our demo folder or read the documentation

    License

    The MIT License (MIT) Copyright (c) 2018

    Sponsors

    alt text

    Install

    npm i material-community-components

    DownloadsWeekly Downloads

    2,861

    Version

    10.0.0

    License

    MIT

    Unpacked Size

    2.16 MB

    Total Files

    111

    Last publish

    Collaborators

    • avatar