Skip to content

workylab/materialize-angular

Repository files navigation

Materialize Angular

Materialize Angular, easiest way to create awesome websites.
-- Check our site --
-- Check our Github pages site --

Circle CI badge npm version badge dependencies Status badge devDependency Status badge Join the community on Spectrum Monthly npm downloads

Raising funds

materialize-angular is not backed by a company (yet :D), so the future of this project depends on you. Become a Patreon, check Github Sponsor or contact us directly.

Table of contents

Why Materialize Angular

Materialize Angular is a library to help you easily doing beautiful websites. The goal of the project is to help the user in the creation of websites based on Angular and using the Material Design specification. Also, we are trying to do awesome and best quality components for different website types.

It's a very early version but it is ready for production environments. We're working on LTS versions and try to do the library compatible with different Angular versions.

Quickstart

Step 1: Install npm package:

  npm install --save materialize-angular

Step 2: Add styles

Import materialize angular styles by writing the following lines in your styles.scssfile (it is located in my-project/src/styles.scss)

$materialize-fonts-path: '~materialize-angular/fonts';

@import '~materialize-angular/styles/materialize-angular.scss';

Step 3: Import component modules in your app module:

Import just specific components by importing each one like MaterializeButtonModule, MaterializeCardModule, etc.

import { Component, NgModule } from '@angular/core';
import { MaterializeButtonModule, MaterializeCardModule } from 'materialize-angular';

@NgModule({
  imports: [
    MaterializeButtonModule,
    MaterializeCardModule
  ]
})
export class MyModule {}

Step 4: Use imported components:

Finally use the imported components into your apps components:

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: `
    <materialize-card>
      <materialize-button>Hello From Materialize Angular!</materialize-button>
    </materialize-card>
  `
})
export class MyDemoComponent {}

Documentation

Documentation is available on the Materialize Angular docs site. Also, if you can't access to our domain, you can access using our Github pages

Available features

Components Docs
Accordion Docs
Button Docs
Card Docs
Calendar Docs
Collapsible Docs
Icon Docs
Modal Docs
Ripple Docs
Forms Docs
Button Toggle Docs
Checkbox Docs
Input Docs
Label Docs
Message Docs
Radio Docs
Select Docs
Slider Docs
Switch Docs
Textarea Docs
Layout Docs
Drawer Docs
Navbar Docs
Tab Docs

Supported Browsers

Browser Supported versions
Google Chrome 75+
Safari 12.1+
Edge 18+
Firefox 68+
Internet Explorer 11+

Changelog

Learn about the latest improvements.

Contributing

Workylab welcomes contributions to this project. When contributing, please follow this steps.

Copyright and license

© 2019 WorkyLab This project is licensed under the MIT License - see the license file for details.