Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to materializecss 1rc2 #2

Merged
merged 3 commits into from Aug 15, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
50 changes: 26 additions & 24 deletions README.md
Expand Up @@ -2,6 +2,8 @@

**This repo is a fork from [InfomediaLtd/angular2-materialize](https://github.com/InfomediaLtd/angular2-materialize) that is not maintained on a regular basis.**

**Full compatible with Angular 6 and MaterializeCss 1.0.0-rc.2**

[![travis build](https://img.shields.io/travis/samber/angular2-materialize.svg?style=flat-square)](https://travis-ci.org/samber/angular2-materialize)
[![version](https://img.shields.io/npm/v/@samuelberthe/angular2-materialize.svg?style=flat-square)](https://www.npmjs.com/package/@samuelberthe/angular2-materialize)
[![downloads](https://img.shields.io/npm/dm/@samuelberthe/angular2-materialize.svg?style=flat-square)](https://www.npmjs.com/package/@samuelberthe/angular2-materialize)
Expand All @@ -17,17 +19,17 @@ Angular 2 support for Materialize CSS framework [http://materializecss.com/](htt

This library adds support for the Materialize CSS framework in Angular 2. It is needed to add the dynamic behavior of Materialize CSS that is using JavaScript rather than plain CSS.

View demo here: [https://infomedialtd.github.io/angular2-materialize/](https://infomedialtd.github.io/angular2-materialize/)
View demo here: [https://samber.github.io/angular2-materialize/](https://samber.github.io/angular2-materialize/)

To use the library you need to import it once per project and then use its MaterializeDirective directive for binding it to any component that needs a dynamic behavior, like collapsible panels, tooltips, etc.

## Using angular2-materialize
## Using @samuelberthe/angular2-materialize

Start by following the Angular CLI or webpack instructions below to add the required dependencies to your project.

Add the MaterializeModule to your NgModule:
```js
import { MaterializeModule } from "angular2-materialize";
import { MaterializeModule } from "@samuelberthe/angular2-materialize";

@NgModule({
imports: [
Expand All @@ -43,7 +45,7 @@ In your component, use it for dynamic behavior. For example, for collapsible pan
@Component({
selector: "my-component",
template: `
<ul materialize="collapsible" class="collapsible" data-collapsible="accordion">
<ul materialize="Collapsible" class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
Expand All @@ -60,7 +62,7 @@ In your component, use it for dynamic behavior. For example, for collapsible pan

```

Apply an empty [MaterializeDirective](https://github.com/InfomediaLtd/angular2-materialize/blob/master/src/materialize-directive.ts) attribute directive for top level components, like forms:
Apply an empty [MaterializeDirective](https://github.com/samber/angular2-materialize/blob/master/src/materialize-directive.ts) attribute directive for top level components, like forms:
```html
<form materialize class="col s12">
<div class="row">
Expand All @@ -72,24 +74,24 @@ Apply an empty [MaterializeDirective](https://github.com/InfomediaLtd/angular2-m
</form>
```

The [MaterializeDirective](https://github.com/@samuelberthe/angular2-materialize/blob/master/src/materialize-directive.ts) attribute directive (**materialize**) accepts any MaterializeCSS initialization call to apply to the element. The list of supported functions are provided by MaterializeCSS. Examples: collapsible, modal, tooltip, dropdown, tabs, material_select, sideNav, etc.
The [MaterializeDirective](https://github.com/samber/angular2-materialize/blob/master/src/materialize-directive.ts) attribute directive (**materialize**) accepts any MaterializeCSS initialization call to apply to the element. The list of supported functions are provided by MaterializeCSS. Examples: Collapsible, Chips, Modal, Tooltip, Dropdown, Tabs, FormSelect, Sidenav, FloatingActionButton, TapTarget, Carousel, Parallax, CharacterCounter, Autocomplete, Materialbox, ScrollSpy, etc.

For example, to apply tooltip:
```html
<a materialize="tooltip" class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>
<a materialize="Tooltip" class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>
```

The [Materialize](https://github.com/@samuelberthe/angular2-materialize/blob/master/src/materialize.ts) attribute directive also allows specifying parameters to be passed to the function, but providing a **materializeParams** attribute returning an array of params. Use it with a function call or even by inlining the params in the HTML.
The [Materialize](https://github.com/samber/angular2-materialize/blob/master/src/materialize.ts) attribute directive also allows specifying parameters to be passed to the function, but providing a **materializeParams** attribute returning an array of params. Use it with a function call or even by inlining the params in the HTML.

Another useful option is emitting actions on an element. You may want to do that for calling Materialize functions, like closing a modal dialog or triggering a toast. You can do that by setting the **materializeActions** attribute, which accepts an [EventEmitter](https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html). The emitted events can either be a "string" type action (Materialize function call) or a structure with action and parameters:
Another useful option is emitting actions on an element. You may want to do that for calling Materialize component methods, like closing a modal dialog or triggering a toast. You can do that by setting the **materializeActions** attribute, which accepts an [EventEmitter](https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html). The emitted events can either be a "string" type action (Materialize method call) or a structure with action and parameters:

The example below shows how you'd create a modal dialog and use the actions to open or close it.
```html
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" (click)="openModal()">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
<div id="modal1" class="modal bottom-sheet" materialize="Modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
Expand All @@ -101,30 +103,30 @@ The example below shows how you'd create a modal dialog and use the actions to o
</div>
```
```js
import {MaterializeAction} from 'angular2-materialize';
import {MaterializeAction} from '@samuelberthe/angular2-materialize';
//...
modalActions = new EventEmitter<string|MaterializeAction>();
openModal() {
this.modalActions.emit({action:"modal",params:['open']});
this.modalActions.emit({action:"open",params:[]});
}
closeModal() {
this.modalActions.emit({action:"modal",params:['close']});
this.modalActions.emit({action:"close",params:[]});
}
```

For dynamic select elements apply the **materializeSelectOptions** directive to trigger element updates when the options list changes:
```html
<select materialize="material_select" [materializeSelectOptions]="selectOptions">
<select materialize="FormSelect" [materializeSelectOptions]="selectOptions">
<option *ngFor="let option of selectOptions" [value]="option.value">{{option.name}}</option>
</select>
```

## Installing & configuring angular2-materialize in projects created with the Angular CLI
## Installing & configuring @samuelberthe/angular2-materialize in projects created with the Angular CLI

Install MaterializeCSS and angular2-materialize from npm
Install MaterializeCSS and @samuelberthe/angular2-materialize from npm
```
npm install materialize-css --save
npm install angular2-materialize --save
npm install @samuelberthe/angular2-materialize --save
```

jQuery 2.2 and Hammer.JS are required
Expand All @@ -151,7 +153,7 @@ Edit the angular-cli.json :
Add to the top of app.module.ts

```
import { MaterializeModule } from 'angular2-materialize';
import { MaterializeModule } from '@samuelberthe/angular2-materialize';

```

Expand All @@ -162,12 +164,12 @@ Add this line to header of index.html
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```

## Installing and configuring angular2-materialize with webpack
## Installing and configuring @samuelberthe/angular2-materialize with webpack

Install MaterializeCSS and angular2-materialize from npm
Install MaterializeCSS and @samuelberthe/angular2-materialize from npm
```sh
npm install materialize-css --save
npm install angular2-materialize --save
npm install @samuelberthe/angular2-materialize --save
```

MaterializeCSS required jQuery and HammerJS. Check the exact version materialize-css is compatible with:
Expand Down Expand Up @@ -201,10 +203,10 @@ module.exports = {
};
```

Import MaterializeCSS programatically, in the same place where you import angular2-materialize module (usually in your main module, or shared module):
Import MaterializeCSS programatically, in the same place where you import @samuelberthe/angular2-materialize module (usually in your main module, or shared module):
```js
import 'materialize-css';
import { MaterializeModule } from 'angular2-materialize';
import { MaterializeModule } from '@samuelberthe/angular2-materialize';
```

#### Loading additional resources
Expand All @@ -215,4 +217,4 @@ Another thing you would need to confirm is being able to load web fonts properly
```
Notice that the url-loader is required for this to work (npm install it).

The following example project is a fork of the angular2-webpack-starter with the addition of angular2-materialize: [InfomediaLtd/angular2-webpack-starter](https://github.com/InfomediaLtd/angular2-webpack-starter)
The following example project is a fork of the angular2-webpack-starter with the addition of @samuelberthe/angular2-materialize: [InfomediaLtd/angular2-webpack-starter](https://github.com/InfomediaLtd/angular2-webpack-starter)
Binary file removed docs/Roboto-Bold.c0f1e4a4fdfb8048c72e.woff2
Binary file not shown.
Binary file removed docs/Roboto-Bold.eed9aab5449cc9c8430d.woff
Binary file not shown.
Binary file removed docs/Roboto-Light.3c37aa69cd77e6a53a06.woff2
Binary file not shown.
Binary file removed docs/Roboto-Light.ea36cd9a0e9eee97012a.woff
Binary file not shown.
Binary file removed docs/Roboto-Medium.1561b424aaef2f704bbd.woff2
Binary file not shown.
Binary file removed docs/Roboto-Medium.cf4d60bc0b1d4b231408.woff
Binary file not shown.
Binary file removed docs/Roboto-Regular.3cf6adf61054c328b1b0.woff
Binary file not shown.
Binary file removed docs/Roboto-Regular.5136cbe62a63604402f2.woff2
Binary file not shown.
Binary file removed docs/Roboto-Thin.1f35e6a11d27d2e10d28.woff2
Binary file not shown.
Binary file removed docs/Roboto-Thin.44b78f142603eb69f593.woff
Binary file not shown.
4 changes: 2 additions & 2 deletions docs/index.html
Expand Up @@ -8,8 +8,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="styles.68fedd1e9185c1315903.bundle.css" rel="stylesheet"/></head>
<link href="styles.ec3585fb1c69542254b4.bundle.css" rel="stylesheet"/></head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="inline.f592a1d3a8b50f7a64df.bundle.js"></script><script type="text/javascript" src="polyfills.1e0c2d5a82b8a9180851.bundle.js"></script><script type="text/javascript" src="scripts.72b94b85d5ad63becf92.bundle.js"></script><script type="text/javascript" src="vendor.63c90f00fead7522d67c.bundle.js"></script><script type="text/javascript" src="main.ef6f2578a84fea71a58a.bundle.js"></script></body>
<script type="text/javascript" src="inline.aedea04a8c51ede3a6c0.bundle.js"></script><script type="text/javascript" src="polyfills.968f0280344802cb795f.bundle.js"></script><script type="text/javascript" src="scripts.e890e0e86995a8eef436.bundle.js"></script><script type="text/javascript" src="vendor.250cad10eb22c1c66819.bundle.js"></script><script type="text/javascript" src="main.908419b41ba1c21eb5d7.bundle.js"></script></body>
</html>
1 change: 1 addition & 0 deletions docs/inline.aedea04a8c51ede3a6c0.bundle.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion docs/inline.f592a1d3a8b50f7a64df.bundle.js

This file was deleted.

1 change: 1 addition & 0 deletions docs/main.908419b41ba1c21eb5d7.bundle.js

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion docs/main.ef6f2578a84fea71a58a.bundle.js

This file was deleted.

50 changes: 0 additions & 50 deletions docs/polyfills.1e0c2d5a82b8a9180851.bundle.js

This file was deleted.

50 changes: 50 additions & 0 deletions docs/polyfills.968f0280344802cb795f.bundle.js

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion docs/scripts.72b94b85d5ad63becf92.bundle.js

This file was deleted.

1 change: 1 addition & 0 deletions docs/scripts.e890e0e86995a8eef436.bundle.js

Large diffs are not rendered by default.

27 changes: 0 additions & 27 deletions docs/styles.68fedd1e9185c1315903.bundle.css

This file was deleted.

47 changes: 47 additions & 0 deletions docs/styles.ec3585fb1c69542254b4.bundle.css

Large diffs are not rendered by default.

866 changes: 866 additions & 0 deletions docs/vendor.250cad10eb22c1c66819.bundle.js

Large diffs are not rendered by default.

852 changes: 0 additions & 852 deletions docs/vendor.63c90f00fead7522d67c.bundle.js

This file was deleted.

144 changes: 72 additions & 72 deletions package.json
@@ -1,76 +1,76 @@
{
"name": "@samuelberthe/angular2-materialize",
"description": "Angular 2 support for Materialize CSS framework",
"repository": {
"type": "git",
"url": "https://github.com/samber/angular2-materialize.git"
},
"version": "1.0.0-rc.2",
"keywords": [
"angular",
"angular2",
"angular 2",
"angular 4",
"angular 5",
"materialize",
"materializecss",
"materialize-css",
"materialize css"
],
"author": "Ruby Boyarski <rubyboy@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/samber/angular2-materialize/issues"
},
"homepage": "https://github.com/samber/angular2-materialize#readme",
"main": "dist/index.js",
"types": "./dist/index.d.ts",
"scripts": {
"commit": "git-cz",
"build": "sh build.sh",
"presemantic-release": "semantic-release pre",
"semantic-release": "npm publish",
"postsemantic-release": "semantic-release post"
},
"peerDependencies": {
"materialize-css": "1.0.0-rc.2",
"@angular/common": ">=4.0.0"
},
"config": {
"commitizen": {
"path": "node_modules/cz-conventional-changelog"
"name": "@samuelberthe/angular2-materialize",
"description": "Angular 2 support for Materialize CSS framework",
"repository": {
"type": "git",
"url": "https://github.com/samber/angular2-materialize.git"
},
"ghooks": {
"pre-commit": "npm run build"
"version": "1.0.0-rc.2.1",
"keywords": [
"angular",
"angular2",
"angular 2",
"angular 4",
"angular 5",
"materialize",
"materializecss",
"materialize-css",
"materialize css"
],
"author": "Ruby Boyarski <rubyboy@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/samber/angular2-materialize/issues"
},
"homepage": "https://github.com/samber/angular2-materialize#readme",
"main": "dist/index.js",
"types": "./dist/index.d.ts",
"scripts": {
"commit": "git-cz",
"build": "sh build.sh",
"presemantic-release": "semantic-release pre",
"semantic-release": "npm publish",
"postsemantic-release": "semantic-release post"
},
"peerDependencies": {
"materialize-css": "1.0.0-rc.2",
"@angular/common": ">=4.0.0"
},
"config": {
"commitizen": {
"path": "node_modules/cz-conventional-changelog"
},
"ghooks": {
"pre-commit": "npm run build"
}
},
"devDependencies": {
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"commitizen": "2.9.6",
"core-js": "^2.4.1",
"cz-conventional-changelog": "2.0.0",
"ghooks": "2.0.0",
"gulp": "3.9.1",
"gulp-rimraf": "0.2.1",
"gulp-typescript": "3.1.6",
"hammerjs": "^2.0.8",
"jquery": "^2.2.4",
"materialize-css": "1.0.0-rc.1",
"rollup": "^0.41.6",
"run-sequence": "1.2.2",
"rxjs": "^5.1.0",
"semantic-release": "^6.3.6",
"typescript": "^2.4.2",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2",
"zone.js": "0.8.7"
}
},
"devDependencies": {
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"commitizen": "2.9.6",
"core-js": "^2.4.1",
"cz-conventional-changelog": "2.0.0",
"ghooks": "2.0.0",
"gulp": "3.9.1",
"gulp-rimraf": "0.2.1",
"gulp-typescript": "3.1.6",
"hammerjs": "^2.0.8",
"jquery": "^2.2.4",
"materialize-css": "1.0.0-rc.1",
"rollup": "^0.41.6",
"run-sequence": "1.2.2",
"rxjs": "^5.1.0",
"semantic-release": "^6.3.6",
"typescript": "^2.4.2",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2",
"zone.js": "0.8.7"
}
}