标签: angular-material2

我想用Angular材料创建RTL模板2但是,我不知道如何做这项工作？请帮我;

我开始使用角度材质库为Angular开发一个Web应用程序.但是在尝试导入预建主题时出现错误.为了导入它,我添加<link rel="stylesheet" href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css">到我的index.html文件但是当我运行时ng serve我无法获取该文件.

我使用git项目作为虚拟键盘(https://ngx-material-keyboard.github.io/demo/).我有一些问题要让它在450*250像素的小型设备上运行.

最后,如果我使用开发工具直接在Web浏览器上修改它,我会在css中找到必要的更改.

现在我必须找到改变来源的正确位置.

将使用angular2-material的overlay组件来显示键盘.

如果我在cdk-overlay-container中注释掉该位置,它的工作原理如下:

.cdk-overlay-container {
/* position: fixed; */
z-index: 1000;

}

但我无法从我的角度应用中覆盖这些.有什么建议？

更改截图

角度材料2社区我需要你的帮助如何在角度材料2中制作像谷歌材料设计示例的迷你变体.

我尝试实现这一点,但我无法实现这一点

我的代码到目前为止

  <!-- ===================================================================== -->
  <!-- SIDENAV && SIDENAV CONTAINER -->
  <!-- ===================================================================== -->
  <mat-sidenav-container>

    <mat-sidenav 
      #adminNavMenu 
      mode="side" 
      opened="true"
      style="min-width:50px; background: #F3F3F3;"
      class="shadow_right" autosize>

      <!-- MENU LEFT -->
      <app-admin-menu-left></app-admin-menu-left>

    </mat-sidenav>

   <mat-sidenav-container>

应用程序管理员菜单,left.html

<mat-nav-list style="min-width:60px;">

  <mat-list-item *ngFor="let page of Menus"> 
    <a routerLink="{{page.link}}" routerLinkActive="active" 
      [routerLinkActiveOptions]="{exact:true}" matLine>
      <mat-icon class="home_icon collapse-icon vcenter" mat-list-icon>{{page.icon}}</mat-icon>
      <span *ngIf="!showFiller">
        {{page.name}}
      </span>
    </a>
  </mat-list-item>


</mat-nav-list>

<button  mat-icon-button (click)="showFiller = !showFiller" mat-raised-button>
  <mat-icon *ngIf="!showFiller">chevron_right</mat-icon>
  <mat-icon *ngIf="showFiller">chevron_left</mat-icon> 
</button>

结束给了我这个意外的结果

点击后查看迷你吧

如您所见,有250 px的余量,mat-sidenav-content但我无法访问此元素.

任何帮助解决这个问题都会很有用.

感谢名单

我有一个带有输入的mat-form-field,我想添加一个自定义样式,但是我在官方Angular Material网站上找不到任何关于此的文档.

我最终的目标是:

• 选择输入框后更改下划线颜色
• 删除浮动标签(如果可能 - 我知道这是一个功能,但现在已弃用).

我不是最适合Angular的人,但是如果需要改变JS中的东西,那么我总能给它最好的机会.

我只需要一点指导.

现行代码:

<form class="search-form">
  <mat-form-field class="example-full-width">
    <input class="toolbar-search" type="text" matInput>
    <mat-placeholder>Search</mat-placeholder>
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

目前的CSS:

// Change text colour when inputting text
.toolbar-search, mat-placeholder {
  color: white;
}

// Changes the underline and placeholder colour before input is selected
/deep/ .mat-input-underline {
    background-color: white;
}

我试图mat-tooltip从角度材料2 应用一些css更改,并在文档中找到,matTooltipClass然后可以在css文件中进行选择以进行更改.但是,我无法让它工作.

component.html:

  <mat-cell 
    *matCellDef="let productInfo" 
    matTooltip="{{productInfo.description}}"
    matTooltipClass="tooltip">
     {{ productInfo.description}}
  </mat-cell>

component.scss:

.tooltip {
background-color: red;
color: blue;
font-size: 20px;
}

我想这样做 :

<ng-template #content>
  <mat-step>step 1</mat-step>
  <mat-step>step 2</mat-step>
</ng-template>

<mat-horizontal-stepper>
  <ng-container *ngTemplateOutlet="content"></ng-container>
</mat-horizontal-stepper>

但我得到这个错误

错误错误:StaticInjectorError(AppModule)[MatStep - > MatStepper]:StaticInjectorError(平台:核心)[MatStep - > MatStepper]:NullInjectorError:没有MatStepper的提供者!

我认为这是因为mat-step在其构造函数中注入mat-stepper https://github.com/angular/material2/blob/master/src/lib/stepper/stepper.ts#L53

所以我尝试stepper用ngOutletContext 传递上下文

<mat-horizontal-stepper #ContainerStepper="matHorizontalStepper">
  <ng-container *ngTemplateOutlet="content" ngOutletContext="{$implicit:{stepper:ContainerStepper}}"></ng-container>
</mat-horizontal-stepper>

但这不起作用.

任何的想法 ？

我使用mat-tree与mat-nested-tree-node在角6.我想要的是,当用户切换展开图标可以动态加载数据.

使用材料示例中Flat Tree给出的动态数据示例,我尝试使用相同的概念.这是我到目前为止尝试过的https://stackblitz.com/edit/angular-naarcpNested Tree

但它只显示数据阵列中预先填充的数据,尽管在控制台中很明显数据正在更新但它永远不会在UI上显示.

它以递归方式调用_getChildren节点的方法,parent, child1, child2, child3因为这是初始数据.我加入My Child中child1和child3当用户展开,但从未中所示的添加节点.

我无法添加动态子进程,_getChildren因为它会被递归调用直到最后一个节点.

注意:

我不想使用平树,因为它管理的单一阵列中的一切和更新单个阵列中的数据的异步加载变得非常困难

救命

我有什么遗漏或嵌套树是这样设计的吗？

Angular Material CDK树组件文档说:

"平面树通常更容易进行样式和检查.它们对滚动变化也更友好,例如无限或虚拟滚动 "

有关如何将虚拟滚动应用于CDK平面树的任何想法？

我有一个巨大的树来渲染,现在它很慢,当我递归打开所有节点时它会崩溃

我试过<cdk-virtual-scroll-viewport> @ angular/cdk-experimental但是没弄清楚如何将它与树组件集成

这个问题是参考这个 Github问题,mat-menu使用鼠标悬停不能切换,我基本上试图用角度材料的菜单替换基于bootstrap的水平导航菜单.阻止我复制基于bootstrap的菜单的唯一一件事就是mat-menu在悬停时打开和关闭.正如上面的Github问题所提到的,有一些解决方法可以实现我想要的,比如使用mouseEnter

(mouseenter)="menuTrigger.openMenu()"

或者在Mat-menu中添加一个span以便绑定mat-menu,

<mat-menu #menu="matMenu" overlapTrigger="false">
  <span (mouseleave)="menuTrigger.closeMenu()">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </span>
</mat-menu>

但是没有一个解决方案似乎涵盖了每一个小场景,

例如

如上面的Github问题所述,第一个SO解决方案存在以下问题.

• 将鼠标光标悬停在按钮上会弹出菜单.但是如果你点击按钮,它将隐藏并显示菜单.恕我直言,这是一个错误.
• 要隐藏菜单,用户需要单击菜单外部.理想情况下,如果鼠标光标位于 超过400毫秒
  的区域(包括按钮,菜单和子菜单)之外,则菜单将被隐藏
  .

并且在试图解决上述问题之一但不能正常工作的跨度解决方案中,例如

悬停MatMenuTrigger确实mat-menu按预期打开,但如果用户在不输入的情况下移开鼠标mat-menu,则它不会自动关闭,这是错误的.

同时移动到其中一个级别的两个子菜单也关闭了一级菜单,这不是我想要的,

PS将鼠标从一个打开的菜单移动到下一个兄弟菜单不会打开下一个菜单.我想这可能是难以实现提到这里,但我认为,其中的一些可能实现的吧？

这是一个基本的stackBlitz,它重现了我正在经历的,任何帮助表示赞赏.