使用[ngStyle]将自定义颜色应用于垫上凸起的按钮可以通过以下步骤实现:
下面是一个示例代码:
HTML模板:
<button [ngStyle]="{'background-color': customColor}" class="raised-button">按钮</button>
Typescript代码:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-button',
templateUrl: './button.component.html',
styleUrls: ['./button.component.css']
})
export class ButtonComponent implements OnInit {
customColor: string;
ngOnInit() {
this.customColor = 'blue';
}
}
样式文件:
.raised-button {
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
color: white;
}
在这个示例中,我们使用[ngStyle]指令将customColor变量绑定到按钮元素的style属性上,使得按钮的背景颜色可以根据customColor的值进行动态设置。同时,我们定义了一个CSS类.raised-button来描述垫上凸起的按钮的样式。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云