角材料文件输入,用于@angular/材料 7.x, 8.x, 9.x, 10.x, 11.x, 12.x, 13.x, 14.x, 15.x, 16.x
说明
角材料文件输入.
德莫尔
@ 见 DEMO 堆点
@ 见 现场直播
选择对应您的 Angular 版本的版本 :
| 角质 | @angular-material-组件/文件输入 |
|---|---|
| 16个 | 16.x+ (中文(简体) ) |
| 15个 | 15.x+ OR 9.x+ 用于遗留的导入 |
| 页:1 | 8.x+ 单曲 |
| 第13条 | 7.x+ (中文(简体) ) |
| 第12条 | 6.x+ 调取 |
| 第11个 | 5.x+ 时速 |
| 10个 | 4.x+ (中文(简体) ) |
| 第9条 | 2.x+ 时速 |
| 第8条 | 2.x+ 时速 |
| 第7条 | 2.x+ 时速 |
开始
npm install --save @angular-material-components/file-input
设置
import { NgxMatFileInputModule } from '@angular-material-components/file-input';
@NgModule({
...
imports: [
...
NgxMatFileInputModule
]
...
})
export class AppModule { }
@ 见 src/app/demo文件输入/demo文件输入.module.ts
使用组件
文件输入( ngx- mat- 文件输入)
<mat-form-field>
<ngx-mat-file-input [formControl]="fileControl" [multiple]="multiple" [accept]="accept" [color]="color">
</ngx-mat-file-input>
</mat-form-field>
您可以使用指令提供自定义图标 ngxMatFile 输入器
<mat-form-field>
<ngx-mat-file-input [formControl]="fileControl" [multiple]="multiple" [accept]="accept"
[color]="color">
<mat-icon ngxMatFileInputIcon>folder</mat-icon>
</ngx-mat-file-input>
</mat-form-field>
您可以使用 MatForm Field 的所有属性, 如外观变体, 提示...
<mat-form-field appearance="outline">
<ngx-mat-file-input [formControl]="file3Control">
</ngx-mat-file-input>
<mat-hint>Hint</mat-hint>
</mat-form-field>
@ 输入列表
| @ 输入 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 已禁用 | 布尔 | 无效 | 如果选中的话, 文件输入只读 . |
| 多个 | 布尔 | 虚假 | 如果真实,文件输入允许用户选择多个文件. |
| 接受 | 字符串 | 无效 | 限制接受的文件类型(例如:接受="image/png,image/jpeg"或接受=.png,.jpg,.jpeg"——接受PNG或JPEG文件 |
| 颜色 | 主题标签 | 无效 | 组件的主题颜色调色板 . |
他们
- @ 见@angular/材料 使用预建的主题
- 在索引.html中添加材料设计图标字体
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
许可证
麻省理工学院