angular-material2 | 易学教程

How to make a responsive nav-bar using Angular material 2?

阅读更多关于 How to make a responsive nav-bar using Angular material 2?

I'm trying to create a navigation bar using Angular material 2 that collapses in small screens like mobile devices and tablets. I was only able to find md-button but not md-menu-bar as was in Angular material. user2662006 Here is what I used to build my responsive nav-bar using Angular2+ Material 2 and flex-layout in angular-cli app. (Please visit Install Angular Material and Angular CDK ) 1) Install flex-layout npm install @angular/flex-layout -save 2) Include flex-layout in your app.module.ts import {FlexLayoutModule} from "@angular/flex-layout"; 3) Import imports: [ BrowserModule,

Angular Materials won't apply styles to components

阅读更多关于 Angular Materials won't apply styles to components

问题 Here is a simple snippet: .profilebutton { float: right; }  <div class="col-md-4 profilebuttoncontainer"> <button md-button [routerLink]="'/welcome/profile'" class="profilebutton">Profile</button> </div> What exactly am I doing wrong? I have been trying to style toolbars, dialog boxes, checkboxes all from Angular Materials but none of them apply. I can change the styling with the inspector under mat-(whatever) like mat-button, mat-dialog-container, and that works, but

Angular 4.3.4 breaks mdInput and md-input-container

阅读更多关于 Angular 4.3.4 breaks mdInput and md-input-container

问题 My team at work recently went to Angular 4.3.3 from 4.3.0. After these changes, mdInput and md-input-container no longer function correctly. Before you could click into the input field and the animation would work as shown on material.angular.io/components/input. Has anyone else run into this issue and if so, what steps did you take to resolve them? May need to go back to 4.3.0. package.json - "dependencies": { "@angular/animations": "^4.3.3", "@angular/cdk": "^2.0.0-beta.8", "@angular/common

How do I use a material theme colors in my css in Angular2?

阅读更多关于 How do I use a material theme colors in my css in Angular2?

问题 Let's say I need to use the mat-primary color as a background of a div using a css/sass class, how do i reference it? I thought something like: @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; .a-class{ background-color: $mat-primary; } but miserably fails. 回答1: You have to first import the theme with @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; Then you have to define a mixin like @mixin primary-color($theme) { $primary: map-get($theme, primary); /

How to keep mat-datepicker calender open, even after selecting a date from calendar?

阅读更多关于 How to keep mat-datepicker calender open, even after selecting a date from calendar?

I want to keep mat-datepicker open in a particular div. I used opened=true property but it gets closed after selecting a date. This should work for you: Add this to your input (click)="_openCalendar(picker)" #keepOpen This to your mat-datepicker (closed)="_openCalendar(picker)" And this to your typescript: @ViewChild('keepOpen') _input: ElementRef; _openCalendar(picker: MatDatepicker<Date>) { picker.open(); } Don't forget to import ViewChild and ElementRef That's my working sample on Stackblitz You can store it's internal close() function, then override it and when want to close picker

how to change the global variable inside a scss mixin

阅读更多关于 how to change the global variable inside a scss mixin

问题 theme-variables.scss //--------------------------------------------------------- //Declare a global variable and set it to red color //--------------------------------------------------------- $fg-primary-text: red; //--------------------------------------------------------- //below @mixin is used in styles.scss to pass the custom-theme //--------------------------------------------------------- @mixin cache-theme-colors($theme) { @include set-global-variables($theme); } //-------------------

angular material2 change button color when clicked

阅读更多关于 angular material2 change button color when clicked

问题 I want to change a material mat-mini-fab button's color the when button is clicked. My attempt is like below. But doesn't work. <button mat-mini-fab color="primary" #btn>Btn</button> @ViewChild('btn') btn: ElementRef; clicked() { this.btn.nativeElement.style.backgroundColor = '#5789D8'; this.btn.nativeElement.style.color = '#FFFFFF'; } 回答1: You can use [ngClass] to dynamically toggle a css class on click <button [ngClass]="{'test': newColor}" (click)="toggleColor()" mat-fab>Primary</button>

How do I map a palette from www.materialpalette.com to an Angular 2 theme?

阅读更多关于 How do I map a palette from www.materialpalette.com to an Angular 2 theme?

问题 Download link on otherwise excellent www.materialpalette.com doesn't support Angular 2. Downloading e.g. sass gives: $primary-color-dark $primary-color $primary-color-light $primary-color-text $accent-color $primary-text-color $secondary-text-color $divider-color Looking for advise on exactly how to map these to Angular 2: $app-primary: mat-palette(…); $app-accent: mat-palette(…); $app-warn: mat-palette(…); 回答1: Use http://mcg.mbitson.com/#!/ to generate a palette based on the colors provided

Angular Materials won't apply styles to components

阅读更多关于 Angular Materials won't apply styles to components

Here is a simple snippet: .profilebutton { float: right; }  <div class="col-md-4 profilebuttoncontainer"> <button md-button [routerLink]="'/welcome/profile'" class="profilebutton">Profile</button> </div> What exactly am I doing wrong? I have been trying to style toolbars, dialog boxes, checkboxes all from Angular Materials but none of them apply. I can change the styling with the inspector under mat-(whatever) like mat-button, mat-dialog-container, and that works, but how do I translate that to css? It seems I don't have access to modifying the mat-(stuff) All I want to

how md-icons are rendered on browser

阅读更多关于 how md-icons are rendered on browser

问题 I am using material2 and Material icons in my project. I want to know how these named icons are rendered in the browser. I have used <button md-raised-button><md-icon>mode_edit</md-icon></button> and in the browser, If I inspect the element <md-icon class="mat-icon material-icons" role="img" aria-hidden="true">mode_edit</md-icon> Here are the classes that are used .mat-icon { background-repeat: no-repeat; display: inline-block; fill: currentColor; height: 24px; width: 24px; } .material-icons