小编dha*_*ana的帖子

材质图标无法正确渲染

材料图标在我的项目中无法正确呈现,我安装正确,但即使没有在浏览器中显示.

我按照以下步骤:

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)

material google-material-icons angular

21
推荐指数
4
解决办法
2万
查看次数

如何在Angular中触发文件上传输入?

如何在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)

angular

9
推荐指数
2
解决办法
9238
查看次数

如何使用javascript将RGBA转换为Hex颜色代码

我试图转换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值也转换为十六进制代码. …

javascript css3

5
推荐指数
3
解决办法
3491
查看次数

mat扩展面板组件图标对齐问题

我使用可折叠菜单组件,但图标对齐未正确对齐文本的右侧而不是左侧,任何人都可以建议如何解决此问题。

在此输入图像描述

使用下面的代码:

<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)

预期用户界面

在此输入图像描述

angular-material angular

4
推荐指数
1
解决办法
7698
查看次数

如何实现背景颜色适用于最后一行与最后一个输入元素

无法仅为行中的最后一个元素设置背景颜色,我尝试了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)

css html5 css3

0
推荐指数
1
解决办法
60
查看次数