材料图标在我的项目中无法正确呈现,我安装正确,但即使没有在浏览器中显示.
我按照以下步骤:
npm install material-design-icons
Run Code Online (Sandbox Code Playgroud)
.angular-cli.json
"styles": [
"styles.css",
"../node_modules/material-design-icons/iconfont/material-icons.css"
],
Run Code Online (Sandbox Code Playgroud)
app.module.ts
import {MatSidenavModule, MatToolbarModule, MatIconModule} from '@angular/material';
Run Code Online (Sandbox Code Playgroud)
app.component.html
<mat-toolbar-row>
<span>Second Line</span>
<span class="example-spacer"></span>
<mat-icon class="example-icon">verified_user</mat-icon>
</mat-toolbar-row>
Run Code Online (Sandbox Code Playgroud) 如何在Angular 4中触发文件上传输入?我正在尝试,但它不起作用.
我不必输入按钮,而是单击div并触发输入类型按钮.
app.html:
<input id="custom-input" type="file" >
<div (click)="myEvent(custom-input)">Click here to upload file</div>
Run Code Online (Sandbox Code Playgroud)
app.ts:
myEvent(event) {
alert("event");
event.nativeElement.click();
}
Run Code Online (Sandbox Code Playgroud) 我试图转换rgba
为十六进制颜色代码,但无法转换不透明度值剩余颜色我能够转换,
以下是我的代码
var colorcode = "rgba(0, 0, 0, 0.74)";
var finalCode = rgba2hex(colorcode)
function rgba2hex(orig) {
var a, isPercent,
rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
alpha = (rgb && rgb[4] || "").trim(),
hex = rgb ?
(rgb[1] | 1 << 8).toString(16).slice(1) +
(rgb[2] | 1 << 8).toString(16).slice(1) +
(rgb[3] | 1 << 8).toString(16).slice(1) : orig;
if (alpha !== "") { a = alpha; }
else { a = 01; }
hex = hex + a;
return hex;
}
console.log(finalCode)
Run Code Online (Sandbox Code Playgroud)
在这里,我需要alpha值也转换为十六进制代码. …
我使用可折叠菜单组件,但图标对齐未正确对齐文本的右侧而不是左侧,任何人都可以建议如何解决此问题。
使用下面的代码:
<mat-expansion-panel class="mxSubMenuContainer">
<mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px">
<md-icon class="mat-icon mat-list-icon material-icons">pages</md-icon>
<mat-panel-title>
Personal data
</mat-panel-title>
</mat-expansion-panel-header>
<a mat-list-item class="sidenav-link mat-list-item mat-ripple" >
<div class="mat-list-item-content">
<div class="mat-list-item-ripple mat-ripple" mat-ripple=""></div>
<md-icon class="mat-icon mat-list-icon material-icons">pages</md-icon>
<div class="mat-list-text">
<span class="title mat-line" md-line="">Pages</span>
</div>
</div>
</a>
</mat-expansion-panel>
Run Code Online (Sandbox Code Playgroud)
预期用户界面
无法仅为行中的最后一个元素设置背景颜色,我尝试了last-child css属性,但无法修复.请建议任何其他方法.
<div id= "row" class="Row">
<label>Row1:</label>
<div id= "CCol1" class="CCol">
<input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
</div>
<div id= "CCol2" class="CCol">
<input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
</div>
<div id= "CCol3" class="CCol">
<input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
</div>
<div id= "CCol4" class="CCol">
<input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
</div>
<div id= "CCol5" class="CCol">
<input type="text" class="width100"><input type="number" placeholder="1" …
Run Code Online (Sandbox Code Playgroud)