标签: angular-material
聚合物的纸元素和角材料
请帮助我理解Angular Material github和主页中的以下引用:
该项目处于早期预发布阶段.Angular Material既是Material Design的参考实现,也是Polymer项目Paper Elements集合的补充.
Angular Material Design项目是一个类似于Polymer项目的Paper元素集合中提供的参考实现工作.该项目提供了一组实现材料设计系统的AngularJS UI元素.
我知道Polymer是Web组件的框架,项目的一部分是纸质元素的集合.我不明白这两者是如何相关的,或者为什么谷歌正在开发两个惊人相似但又不同的项目.
- 角度材料只是纸质元素的端口有角度吗？
- Web开发人员是否在其Web应用程序中使用Angular Material和Paper Elements？
- 这两个最终是否会有效地变得相同？(AngularJS开发人员使用的Angular材料和其他人使用的Paper Elements？)
推荐指数
解决办法
查看次数
Angular Material:如何使内容可滚动
我正在使用角度材料,并希望为我的应用程序设计布局.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular Material - Starter App</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,700'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.css"/>
<link rel="stylesheet" href="./style.css"/>
</head>
<body ng-app="starterApp" layout="column" layout-fill>
<div flex="30" style="border: 1px solid darkgrey;background-color: #1CA9F0;"></div>
<div flex style="border: 1px solid firebrick;" layout="column">
<div flex="5" layout="row" layout-align="center">
<md-toolbar flex="50">
<h2 class="md-toolbar-tools">
<span>Toolbar</span>
</h2>
</md-toolbar>
</div>
<div flex layout="row" layout-align="center">
<md-content flex="50">
Lorem ipsum dolor sit amet, ne quod novum mei. Sea …推荐指数
解决办法
查看次数
类型为'void'的'this'上下文不能赋值给'Observable <string>'类型的方法'this'
我在angular的自动完成示例中收到此错误.这是代码:
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(val => this.filter(val))
);
}
错误是在startWith上生成的.我在第二个val也遇到了错误.它说:
"{}"类型的参数不能分配给"string"类型的参数
功能是:
filter(val: string): string[] {
return this.options.filter(option =>
option.toLowerCase().indexOf(val.toLowerCase()) === 0);
}
提示: 混合控件或导入有一些东西.我不确定,但是当我创建一个新组件时,一切正常.
推荐指数
解决办法
查看次数
Material Angular Accordion标题/标题高度
所以我一直在尝试在我的Web应用程序开发中采用Materials Accordion.
然而,随着内容的增长,使标题扩大的麻烦有些麻烦.
我的标题预计将有相当多的行来提供摘要,而不仅仅是1个班轮.
如果我硬编码材质标题高度,它会导致动画干扰.
下面是一个示例代码
<mat-accordion [displayMode]="displayMode" [multi]="multi" class="mat-expansion-demo-width">
<mat-expansion-panel #panel1 [hideToggle]="hideToggle">
<mat-expansion-panel-header>Section 1</mat-expansion-panel-header>
<p>This is the content text that makes sense here.</p>
</mat-expansion-panel>
</mat-accordion>
::ng-deep .mat-expansion-panel-header
{
height: 190px !important;
}
如果我执行上述操作,则会设置高度,但展开和折叠的动画会很奇怪.
我该怎么办呢？
推荐指数
解决办法
查看次数
获取错误"mat-nav-list不是已知元素"
获取错误"mat-nav-list不是已知元素",使用@ angular/material"version"^ 5.2.5", - 请帮帮我
推荐指数
解决办法
查看次数
为角材料设置输入 mat-form-fields 的宽度
我对 Angular 非常陌生，我正在尝试创建一个比默认输入字段更长的表单。这是我当前的代码：
person.component.html
<form class="new-person-form">
<mat-card>
<mat-form-field>
<input matInput placeholder="Name">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Birthday">
</mat-form-field>
<mat-checkbox>Active</mat-checkbox>
</mat-card>
</form>
person.component.css
.mat-form-field {
padding: 10px;
}
.mat-checkbox {
padding: 10px;
}
person.component.html
<form class="new-person-form">
<mat-card fxLayout="row">
<mat-form-field>
<input matInput placeholder="Name" fxFlex="50">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Birthday" fxFlex="25">
</mat-form-field>
<mat-checkbox fxFlex="25">Active</mat-checkbox>
</mat-card>
</form>
person.component.css
.mat-form-field {
padding: 10px;
}
.mat-checkbox {
padding: 10px;
}
这是结果：
| |
| Name___________ Birthday_______ [] Active |
| |
我试图加长Name到页面的 50% 左右，所以是这样的：
| …推荐指数
解决办法
查看次数
如何将 MatTableDataSource 与 observable 一起使用？
我正在使用 mat-table 并且我试图将MatTableDataSource与 observable一起使用（我从 Web 服务获取数据），但我不知道如何配置MatTableDataSource以使用 observable 而不是数组。
这个问题的唯一解决方案是在ngOnInit方法中订阅 observable并在新数据到达时始终创建一个新的 MatTableDataSource 吗？
这是我到目前为止所拥有的，但我不知道这是否是使用可观察的MatTableDataSource的正确解决方案。
dataSource: MatTableDataSource<Thing>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
ngOnInit() {
getThings().subscribe(things => {
this.dataSource = new MatTableDataSource(things);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}
推荐指数
解决办法
查看次数
带有 X 右上角的 Angular 8 材质对话框关闭按钮
我试图让我的材质对话框在右上角有一个 X 按钮，但我遇到了定位问题。
组件.ts
this.d.open(loginComponent, {
width: '300px',
height: '',
panelClass: 'dialogC',
});
组件.html
<mat-dialog-content>
<button mat-button class="close-icon" [mat-dialog-close]="true">
<mat-icon>close</mat-icon>
</button>
<h2 mat-dialog-title>Login</h2>
样式文件
.dialogC {
position: relative !important;
}
.close-icon {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
X 仅与左侧对齐，而不是与右上角对齐。建议？
更新，这是我添加 flex 后遇到的问题：
推荐指数
解决办法
查看次数
使用“发生未处理的异常：NGCC 失败”编译 Angular 项目
我试图编译我的项目，但出现错误：
Error: Error on worker #3: Error: No typings declaration can be found for the referenced NgModule class in static withConfig(configOptions,
// tslint:disable-next-line:max-line-length
breakpoints = []) {
return {
ngModule: FlexLayoutModule,
providers: configOptions.serverLoaded ?
[
{ provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
{ provide: BREAKPOINT, useValue: breakpoints, multi: true },
{ provide: SERVER_TOKEN, useValue: true },
] : [
{ provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
{ provide: BREAKPOINT, useValue: breakpoints, multi: true },
]
};
}.
我使用了 …
推荐指数
解决办法
查看次数
设置Angular Material Tooltip的字体大小
我对Web开发很陌生,我无法弄清楚如何解决以下问题,尽管它可能很容易.
我正在使用Angular 4和Angular Material来实现这样的工具提示:
<div mdTooltip="tooltip text" mdTooltipPosition="above">
<span>Show tooltip</span>
</div>
我想使工具提示文本的字体大小更大.但是,我没有设法在Angular Material文档中找到如何执行此操作,也没有在Web中搜索.有没有人知道如何做到这一点？谢谢.
推荐指数
解决办法
查看次数
标签 统计
angular-material ×10
angular ×8
css ×2
html ×2
angular8 ×1
angularjs ×1
javascript ×1
mat-table ×1
observable ×1
polymer ×1
tooltip ×1
typescript ×1