webentwicklung-frage-antwort-db.com.de

Wie man materialise-css mit eckig verwendet

Ich habe ein angle4 - Projekt mit angle-cli erstellt. Ich möchte materialise-css @ next library. Also habe ich es mit installiert 

npm install [email protected] --save

also das installiert 

"materialize-css": "^1.0.0-alpha.2",

Dann habe ich in der Datei angle-cli.json einen Verweis auf die Datei css und js hinzugefügt

"styles": [
   "styles.css",
   "../node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
   "../node_modules/materialize-css/dist/js/materialize.js"
],

Dies funktioniert nun für normale Komponenten wie Schaltfläche und Navigationsleiste, da diese Komponenten keine js benötigen. 

Wie kann ich dynamische Elemente wie das Karussell, zusammenklappbare und andere Komponenten erstellen, in denen js erforderlich sind?

Da ich gegoogelt habe, gibt es Wrapper-Bibliotheken wie angualr2-materialise.

Also habe ich das installiert 

npm install angular2-materialize --save

Und importierte das Modul in meine app.module.ts

import { MaterializeModule } from 'angular2-materialize';

und dann in imports Array von @NgModule

imports: [
  BrowserModule,
  MaterializeModule
],

und wenn ich das folgende Markup verwende 

<a class="waves-effect waves-light btn modal-trigger" (click)="openModal()">Modal</a>

<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>
    </div>
    <div class="modal-footer">
        <a class="waves-effect waves-green btn-flat" (click)="closeModal()">Close</a>
        <a class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

Es zeigt sich 

index.js:4 Uncaught Error: Couldn't find Materialize object on window. It is created by the materialize-css library. Please import materialize-css before importing angular2-materialize.
    at Object.../../../../angular2-materialize/dist/index.js (index.js:4)
    at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
    at Object.../../../../../src/app/app.module.ts (app.component.ts:9)
    at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
    at Object.../../../../../src/main.ts (environment.ts:8)
    at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
    at Object.3 (main.ts:11)
    at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
    at webpackJsonpCallback (bootstrap f20633ecefcae2ee4f21:25)
    at main.bundle.js:1

Fehlt mir etwas?

Gibt es eine Möglichkeit, die MaterializeCSS-Bibliothek ohne Wrapper zu verwenden?

javascriptcssangularmaterialize
6
Sunil Garg

angular2-materialize basiert auf materialize-css 0.X. Da materialize-css 1.X nicht von jQuery abhängig ist. Sogar ich habe keinen Wrapper darüber gefunden und ich möchte die Wrapper-Module nicht verwenden. Ich habe dieses Problem also gelöst, indem Sie diese Schritte befolgen.

1) JS- und CSS-Referenz in angle-cli.json 

"styles": [
   "styles.css",
   "../node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
  "../node_modules/hammerjs/hammer.js",
  "../node_modules/materialize-css/dist/js/materialize.js"
]

hammerjs ist für einige Komponenten erforderlich, um gleitende Ereignisse abzuhören.

2) Import in ts 

import * as M from "materialize-css/dist/js/materialize";

3) Holen Sie sich das Element Reference

@ViewChild('collapsible') elCollapsible: ElementRef;

4) Wickeln Sie das Element ein 

ngAfterViewInit() {
    let instanceCollapsible = new M.Collapsible(this.elCollapsible.nativeElement, {});
}

Und fertig. 

8
Sunil Garg

1) Installieren Sie Materialise:

yarn add material-design-icons-iconfont
yarn add materialize-css
yarn add -D @types/materialize-css

2) Importieren von Materialise-Stilen:

@import '~material-design-icons-iconfont/dist/material-design-icons.css';
@import '~materialize-css/sass/materialize';

3) Erstellen Sie HTML für die Komponente:

<div class="container">
  <ul id="dropdown" class="dropdown-content">
    <li><a href="#!" (click)="logout()">Logout</a></li>
  </ul>
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Akita</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a routerLink="dashboard" *showIfLoggedIn="true">Dashboard</a></li>
        <li><a routerLink="todos" *showIfLoggedIn="true">Todos</a></li>
        <li *showIfLogin="false"><a *showIfLoggedIn="false" routerLink="login"
            class="waves-effect waves-light btn">Login</a></li>
        <li><a class="dropdown-trigger" href="#!" data-target="dropdown" #dropdown>Welcome, {{ name$ | async}}!<i
              class="material-icons right">arrow_drop_down</i></a></li>
      </ul>
    </div>
  </nav>
</div>

4) Importieren Sie Materialise und binden Sie das Dropdown-Menü:

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import * as M from 'materialize-css';
import { Observable } from 'rxjs';
import { AuthQuery, AuthService } from '../auth/state';

@Component({
  selector: 'app-main-nav',
  templateUrl: './main-nav.component.html',
  styleUrls: ['./main-nav.component.scss']
})
export class MainNavComponent implements OnInit, AfterViewInit {
  name$: Observable<string>;

  @ViewChild('dropdown') dropdown: ElementRef;

  constructor(private router: Router, private authService: AuthService, private authQuery: AuthQuery) {}

  ngOnInit() {
    this.name$ = this.authQuery.name$;
  }

  ngAfterViewInit() {
    new M.Dropdown(this.dropdown.nativeElement, {});
  }

  logout() {
    this.authService.logout();
    this.router.navigateByUrl('');
  }
}
0
mico.barac

für angle2-materialise wird wahrscheinlich Materialize 0.x verwendet, das den Namespace Materialize verwendet. materialise-next wurde auf den Namespace M umgestellt.

angle2-materialise sollte bereits Materialise (0.x) enthalten.

0
Daniel Ruf