标签: angular-material

我正在使用AngularJS和角度材料编写一个Web应用程序.问题是在角度材料中没有用于文件输入的内置组件.(我觉得文件上传不适合材料设计,但我需要在我的应用程序中)

你有解决这个问题的好方法吗？

如何在工具提示中添加换行符我已经实现了工具提示,但我无法在工具提示中添加多行或换行符.Below是我的代码

http://codepen.io/apps4any/pen/RWQLyr

HTML

<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">
  <md-content layout-padding="">
    <md-button class="md-fab md-fab-top-right right" aria-label="Photos">
      <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
      <md-tooltip>
        List1<br>
        List2<br>
        List3<br>
        List4
      </md-tooltip>
    </md-button>
    <div style="margin-top: 150px;">
    </div>
  </md-content>
</div>

CSS:

.tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover {
  box-shadow: none;
  border: none;
  transform: none;
  -webkit-transform: none; }
.tooltipdemoBasicUsage .left {
  top: 70px !important;
  left: 56px !important; }
.tooltipdemoBasicUsage .right {
  top: 70px !important;
  right: 56px !important; }

JS

angular.module('MyApp')
.controller('AppCtrl', function($scope) {
  $scope.demo = …

我想只使用材料组件执行密码和确认密码验证 ,如果和.确认许多资源无法实现,则在确认密码字段下面显示错误消息.confirm password field doesn't matchif it is empty

也试过这个视频.

这是我正在寻找的材料成分

HTML

     <mat-form-field >
        <input matInput  placeholder="New password" [type]="hide ? 'password' 
          : 'text'" [formControl]="passFormControl" required>
        <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 
          'visibility_off'}}</mat-icon>
        <mat-error *ngIf="passFormControl.hasError('required')">
            Please enter your newpassword
         </mat-error>
      </mat-form-field>

      <mat-form-field >
         <input matInput  placeholder="Confirm password" [type]="hide ? 
              'password' : 'text'" [formControl]="confirmFormControl" 
                    required>
         <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 
                'visibility_off'}}</mat-icon>
         <mat-error *ngIf="confirmFormControl.hasError('required')">
          Confirm your …

我正在学习 Angular Material 并且在从“@angular/material/button”导入 { MatButtonModule } 时出现此错误。

从我在其他答案中读到的内容来看，它看起来像是包兼容性问题，但我无法修复它。

这是完整的错误

ERROR in node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts(29,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts(30,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts(128,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts(129,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts(134,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts(135,9): error TS1086: An accessor cannot be declared …

我在项目中使用了角度材质.我收到这个警告:

找不到HammerJS.某些Angular Material组件可能无法正常工作.

"longpress"事件无法绑定,因为未加载Hammer.JS且未指定自定义加载程序.

我知道这是这个问题的重复

他们在答案中提到:

1. 我们必须添加"^2.0.8",到dependencies在的package.json文件.
2. 'hammerjs/hammer';在 polyfills.ts文件中导入.

在我的情况下一切都很好,我仍然在浏览器控制台中收到相同的警告.

如何设置mat-select的面板组件的样式.从我得到的文档,我需要提供panelClass所以我这样做:

<mat-form-field>
  <mat-select placeholder="Search for"
    [(ngModel)]="searchClassVal"
    panelClass="my-select-panel-class"
    (change)="onSearchClassSelect($event)">
    <mat-option *ngFor="let class of searchClasses" [value]="class.value">{{class.name}}</mat-option>
  </mat-select>
</mat-form-field>

我在开发人员工具中检查过这个类是否附加到DOM中的面板并附加了它.所以我将自定义scss类附加到此元素.现在,当我提供CSS时,它只是不起作用.我的scss例如如下所示:

.my-select-panel-class {
    width:20px;
    max-width:20px;
    background-color: red;
    font-size: 10px;
}

面板的宽度始终等于widthselect元素的宽度.有时在选项中你有太长的字符串,我想让它更广泛.有什么方法可以做到这一点.我的组件中的风格甚至background-color无法正常工作.有人知道为什么这么奇怪吗？

我正在使用:Angular 4.4.5 @ angular/material:2.0.0-beta.12

我在工具栏中使用FAB快速拨号.但是我无法将它浮动到工具栏的右侧.我试过风格:"浮动:正确"没有运气.还尝试了flex offset ="55",但是在调整窗口大小时这不起作用.基本上无论窗口大小如何,我都希望按钮位于蓝色工具栏容器内的最右侧.任何有关这方面的帮助将受到高度赞赏.见下面的照片和代码:

<md-toolbar layout-fill layout-padding layout="row" style="background-color: #3F51B5;color:white;text-align:text-center;">
    <div layout="row">
        <i class="fa fa-users fa-2x" flex></i>
        <h1 class="md-title" style="color:white">Org Chart</h1>                                 
    </div>  
    <div class="lock-size" flex offset="55">
        <md-fab-speed-dial md-direction="left" ng-class="md-fling">
            <md-fab-trigger>
                <md-button aria-label="menu" class="md-fab md-accent">
                    <md-tooltip>
                      Actions
                    </md-tooltip>
                    <md-icon md-svg-src="img/icons/ic_view_module_48px.svg"></md-icon>
                </md-button>
            </md-fab-trigger>
            <md-fab-actions>
                <md-button aria-label="view" class="md-fab md-raised md-mini" >
                    <md-tooltip>
                      View Chart
                    </md-tooltip>                               
                    <md-icon md-svg-src="" style="color:black" ng-show="cDP.read" ng-click="paneShowFn('read')"></md-icon>
                </md-button>
                <md-button aria-label="add" class="md-fab md-raised md-mini" >
                    <md-tooltip>
                      Add Chart
                    </md-tooltip>                               
                    <md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.insert" ng-click="paneShowFn('insert')"></md-icon>
                </md-button>
                <md-button aria-label="Settings" class="md-fab md-raised md-mini" >
                    <md-tooltip> …

这个问题来自material2 github repo https://github.com/angular/material2/issues/4422#issuecomment-300309224

我仍然有问题来设置包装在自定义组件中的材质组件.

我有一个<logo>包含的组件<md-icon svgIcon="logo"></md-icon>

加入

:host { 
   .mat-icon {
    width: 100px;
    height: 100px;
    font-size: 56px;
  }
}

不适用于我的自定义组件中的材质组件

我正在使用带有sidenav的angular2-material制作一个新的angular2应用程序.我不能为我的生活得到那个高度为100%的sidenav.我正试图让一个菜单滑出来占据屏幕的整个高度.无论用户在哪里滚动,我都希望它以相同的方式打开.

这是我的模板:

<md-sidenav-layout class="demo-sidenav-layout">
  <md-sidenav #start mode="over">

    <a [routerLink]="['/login']" class="btn btn-primary">Log in</a>
    <br>
  </md-sidenav>
    <md-toolbar color="primary">

      <button md-button (click)="start.toggle()">Open Side Drawer</button>
      <span>Spellbook</span>

      <span class="demo-fill-remaining">

      </span>

    </md-toolbar>
  <div class="demo-sidenav-content">

    <router-outlet></router-outlet>
  </div>
</md-sidenav-layout>

这是我的CSS:

.demo-sidenav-layout {
  //border: 3px solid black;
  min-height:100%;
  md-sidenav {
    padding: 10px;
    background: gainsboro;
    min-height: 100%;
  }
}

.demo-sidenav-content {
  padding: 15px;
  min-height:100%;
}

.demo-toolbar {
  padding: 6px;

  .demo-toolbar-icon {
    padding: 0 14px 0 14px;
  }

  .demo-fill-remaining {
    flex: 1 1 auto;
  }

}

我也html设置height:100%并 …

我正在使用Angular 4和Angular Material 2.对于以下代码:

<form>
  <md-form-field>
    <input mdInput [ngModel]="userName" placeholder="User" [formControl]="usernameFormControl">
    <md-error *ngIf="usernameFormControl.hasError('required')">
      This is <strong>required</strong>
    </md-error>
    <input mdInput [ngModel]="password" placeholder="Password" [formControl]="passwordFormControl">
    <md-error *ngIf="passwordFormControl.hasError('required')">
      This is <strong>required</strong>
    </md-error>
    <button md-raised-button color="primary" [disabled]="!usernameFormControl.valid || !passwordFormControl.valid">Login</button>
  </md-form-field>
</form>

我收到一个错误:

模板解析错误:'md-form-field'不是已知元素:1.如果'md-form-field'是Angular组件,则验证它是否是此模块的一部分.2.如果'md-form-field'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息.("[错误 - >]

你能不能帮我解决我失踪的地方？

以下是我app.module.ts导入材料模块的代码:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginComponent …