如何通过html (Angular)更改垫-滑-切换的颜色
通过HTML和Angular可以实现垫滑切换的颜色更改。具体步骤如下：
- 在HTML中定义一个垫滑切换的元素，可以是一个按钮、一个链接或者其他交互元素。例如：
<button (click)="changeColor()">切换颜色</button>- 在Angular组件中定义一个变量来存储当前的颜色状态，并编写一个方法来改变颜色。例如：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<button (click)="changeColor()">切换颜色</button>
<div [style.background]="color" class="box"></div>
`,
styles: [`
.box {
width: 100px;
height: 100px;
}
`]
})
export class AppComponent {
color: string = 'red';
changeColor() {
if (this.color === 'red') {
this.color = 'blue';
} else {
this.color = 'red';
}
}
}- 在上述代码中，通过
[style.background]绑定了color变量到div元素的背景颜色属性上，当color变量的值改变时，背景颜色也会相应改变。 - 运行Angular应用，点击按钮即可实现垫滑切换的颜色更改。
这种方法可以应用于各种场景，例如在网页中实现主题切换、动态改变元素样式等。腾讯云提供的相关产品和服务可以帮助开发者更好地构建和部署Angular应用，例如腾讯云云服务器、云函数、云开发等。具体产品介绍和链接地址可以参考腾讯云官方文档或者咨询腾讯云的客服人员。
相关·内容
3回答
我正在使用angular6来布局我的UI。
默认的垫-滑-切换按钮如下所示：
但是我想让切换按钮看起来像下面的材质图标toggle_on，toggle_off。
可以定制吗？
非常感谢。
浏览 1提问于2018-07-25得票数 2
回答已采纳
1回答
我正在使用垫-滑-切换来更改一些设置。HTML代码如下：
<mat-slide-toggle type="checkbox" class="form-control" color="#3f9f94" [checked]="clickDataLogEnabled"
[(ngModel)]="clickDataLogEnabled" (click)="onClick('clickData')">
Log User Click data</
浏览 2提问于2019-10-22得票数 0
回答已采纳
取消垫-滑-切换两次会更改切换状态。 html： <mat-slide-toggle (change)="change($event)" [checked]="checked">To-pay</mat-slide-toggle>
<p>{{checked}}</p> ts： change(e) {
if (confirm("Are you sure")) {
this.checked = !this.checked;
console.log("t
浏览 63提问于2020-10-06得票数 0
回答已采纳
1回答
垫-滑-切换显示错误的值
、、、、
我的问题是，垫-滑-切换有正确的值，但它显示了错误的值，还设置了所有产品的值
例如html代码：
<form [formGroup]="activeHomeboxPForm">
<mat-slide-toggle
formControlName="active"
(change)="onChange($event)"
[(ngModel)]="device"
(click)=&#
浏览 0提问于2018-02-26得票数 0
1回答
我在一页中有3‘垫滑块，我想为滑块有3种不同的颜色。我不能覆盖页面(组件)的主题颜色，因为它将适用于所有的滑块。我是否必须为滑块制作3个不同的组件，并在每个滑块中覆盖主题颜色?实现这一目标的最简单方法是什么?下面是我的角度和包版本。
Angular CLI: 6.0.8
Node: 8.9.4
OS: win32 x64
Angular: 6.0.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-brows
浏览 0提问于2018-06-26得票数 1
回答已采纳
角版5.2.4，Material2 5.2.4
我正在使用这些元素的组合：
垫-成型场
使用matinput指令输入
垫-数据报警器
垫子-数据采集器-开关
...in是在数据源更改时重新构建的表单。
我可以设置输入和垫-数据报警器切换到禁用，或启用，在最初的形式构建。重新生成窗体时，输入的禁用属性是可设置的。但是，对于任何在初始窗体生成之后重新构建的窗体，切换的禁用属性仍然处于初始状态(无论是启用的还是禁用的)。
状态(我在这里的元素周围使用引号)：
与任何标准的“输入元素”一样，可以通过添加禁用的属性来禁用datepicker输入。默认情况下，"mat-d
浏览 5提问于2018-08-08得票数 2
回答已采纳
我的工作角度9与材料的组成部分。我想显示一些值在垫-选择组件。
下面是app.component.html
<h2> Angular - Material </h2>
<mat-form-field>
<mat-label>Type</mat-label>
<mat-select >
<mat-option value="string">Small text</mat-option>
<mat-option value="number"
浏览 0提问于2020-03-07得票数 2
我有一个我这样定义的<mat-slide-toggle>： <mat-slide-toggle [checked]="synchronizationState === 'ENABLED'"
[disabled]="!canChangeSynchronizationState"
formControlName="enableSynchronization"
#enableSynchronizationTog
浏览 31提问于2021-10-14得票数 2
回答已采纳
我试图更新我的自定义主题从角度材料11到12。我的问题是，当我想包括我的混音，他们不再是进口。
下面是我的代码的一个非常简单的版本：
我的角11代码(在升级到角12之前工作)
@use '~@angular/material' as mat;
@mixin mat-slide-toggle-theme($theme) {
$is-dark: map_get($theme, is-dark);
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($
浏览 8提问于2021-09-29得票数 1
回答已采纳
我正试着在一个项目中使用旋转垫。令人惊讶的是，虽然垫子纺纱机是工作的一些组件，但它不工作，为其他一些。有什么问题吗？我在component.ts文件中使用了下面的代码，其中的一个组件不起作用-
loading: boolean
constructor( private router: Router){
router.events.subscribe(event => {
if (event instanceof NavigationStart) {
this.loading = tr
浏览 4提问于2021-04-18得票数 0
如何改变颜色垫-单选按钮，当不检查.我一直在寻找答案，我想知道这是否可能不改变整个主题。
在CSS中:吴-深。垫-收音机-什么？
浏览 3提问于2022-07-05得票数 0
我有两个不同的angular 6组件，每个组件都有自己的页面。在每一页上都有不同的mat-card-content背景颜色的垫卡列表
虽然我使用下面的代码更改了颜色，但两个页面都有相同的颜色(绿色)，有什么建议如何自定义背景颜色吗？
list1.component.scss:
::ng-deep .mat-card-content {
background-color: white
}
list2.component.scss:
::ng-deep .mat-card-content {
background-color: green
}
在未做任何更改的情况下尝试使用!impo
浏览 0提问于2018-08-26得票数 1
回答已采纳
1回答
我有点困惑，我需要包括什么，在我的新的角度材料项目，看看几个参考资料。
我发现了这些错误：
这是最后一个的位置：
以下是相关档案：
MainController.js
/**
* Created by jkl94 on 5/11/2017.
*/
var RhetoricChecker = angular.module('RhetoricChecker.controllers', ['ngMaterial']);
RhetoricChecker.controller('MainCtrl', function($scope, $t
浏览 0提问于2017-05-12得票数 0
回答已采纳
2回答
我正在尝试使用我的自定义颜色调色板的颜色，在我的自定义角材料的主题为一些其他组件。
例如，带有垫子工具栏的div和带边距的图标，应该用主背景色填充。
关于主题的角度材料指南说：
主题文件不应导入到其他SCSS文件中。这将导致重复的样式写入您的CSS输出。
但在以组件为主题的指南中，说明如下：
您可以从@角/素材/主题中使用主题函数和材料调色板变量。您可以使用垫色函数从调色板中提取特定颜色。例如：
// Import theming functions
@import '~@angular/material/theming';
// Import your cus
浏览 2提问于2018-04-27得票数 11
回答已采纳
我有一个按钮，这是垫的扁平按钮，背景颜色为浅蓝色。当它被点击时，一些弹出窗口将根据我的要求出现。我观察到按钮的背景颜色在我点击后变暗了。一旦我关闭了弹出窗口，垫平按钮的背景颜色就必须变成浅蓝色的正常颜色。但是，这并没有发生，并且按钮的背景颜色仍然处于变暗模式。只有当我执行鼠标蓝色事件时，正常的背景颜色才会变为正常的浅蓝色。为什么垫子-扁平按钮会发生这种情况？我是Angular的新手，我尝试了很多方法来解决这个问题，但没有成功。有没有其他方法可以实现这一点？ 谢谢。
浏览 48提问于2020-01-06得票数 0
2回答
我试图在AngularJS中更改特定标题的颜色。我的问题是，其中有多个具有相同类的标题，我想更改只单击的标题的颜色。目前，我已尝试：
HTML:
<div class="row">
<div class="span6">
<div class="heading">Heading 1</div>
</div>
<div class="span1">
<i cl
浏览 2提问于2016-08-10得票数 0
我在角度材料方面有问题。当我想打开垫菜单时，点击后的按钮不会被激活或聚焦，并且有默认的颜色。关闭垫菜单后，按钮再次聚焦/激活。问题出在哪里？
示例来源：
我如何解决这个问题？谢谢!
浏览 4提问于2020-12-15得票数 0
回答已采纳
4回答
我使用的是angular 6和angular材质。我使用的是角质材料的垫子-步进器。要更改默认、活动和已访问步骤的垫图标颜色。有人能帮个忙吗？ :host /deep/ mat-horizontal-stepper .mat-horizontal-stepper-header-container .mat-step-icon {
background-color: "red" !important;
color: #fff !important;
}
.mat-step-icon-selected,
.mat-step-icon-state-done,
.m
浏览 83提问于2019-02-07得票数 10
回答已采纳
我试图找到解决方案“作者颜色”在以太垫。从未使用过以太垫的人，请忽略这个问题，因为他们不会理解。
因此，通常“作者颜色”是作为文本的背景颜色提供的颜色，在初始化衬垫时可以作为参数给出。它有助于识别谁写了什么在垫上。
我想要所有文本的白色背景，并更改文本颜色的，而不是背景色取决于用户。所以，如果我在初始化pad时提供了红色的颜色，我希望在pad中有红色的书写，而不是红色的背景，在pad中有白色的书写(和往常一样)。
请不要把这个问题搁置，因为我没有任何具体的代码提供有关这个问题。请发表评论，我会澄清任何不能理解的事情。
谢谢,
浏览 2提问于2016-11-11得票数 1
回答已采纳
我正在尝试使用自动完成属性。
showPanel:取决于选项长度，是否可以看到自动完成面板。
从我理解的文档中，自动完成面板将根据mat选项长度来扩展其宽度。如果我错了，请纠正我。链接到非正式文档
我有一个垫子选项，这是非常长的长度，甚至在应用showPanel之后，垫没有扩展。我不确定我是否正确地使用了该属性。这是我尝试过的
template.html
<label>Search names</label>
<input type="text"
placeholder="search name"
浏览 3提问于2021-07-14得票数 0
回答已采纳
1回答
我可以设置一个未选中的滑动切换元件的颜色吗？该文档指定了如何仅设置“选中”的一个。
在slide-toggle configurable example.html模板中：
<md-slide-toggle
class="example-margin"
[color]="color">
Slide me!
</md-slide-toggle>
在*.ts文件中：
import {Component} from '@angular/core';
@Component({
selector:
浏览 1提问于2017-10-04得票数 0
1回答
我有2个自定义主题为我的应用程序，我可以在运行时切换。因此，它们在theme.scss文件中定义了原色、重音和警告的颜色。所以我可以在标准的material-components上使用这些主题颜色，它在HTML中接受这样的颜色输入。 我现在的问题是，如何在自定义组件的.scss文件中使用这些颜色？例如，我的字体颜色或背景颜色应该通过改变主题来改变吗？ 这是我目前的theme.scss文件： @import "~@angular/material/theming";
@include mat-core();
$primary: mat-palette($mat-yellow)
浏览 17提问于2020-07-13得票数 0
这是我的TS文件
import { Component, OnInit } from '@angular/core';
import { RecommendationService } from '../recommendation-service.service';
import { CustomHttpService } from 'app/services/custom-http.service';
@Component({
selector: 'app-opportunity',
浏览 0提问于2018-11-29得票数 0
回答已采纳
我正在尝试显示一段文本，然后下面是一个“阅读更多”链接，当我单击该链接时，更多的文本将滑下，链接的文本将显示为“阅读更少”，然后当他们单击该链接时，文本将滑回，链接文本将再次显示为“阅读更多”。
$('#more').click(function() {
$('#the_more').slideToggle("slow", function () {
$('#more').html("Read Less");
浏览 0提问于2010-11-28得票数 4
回答已采纳
有没有办法改变Angular Material元件库中mat-slide-toggle元件的颜色属性？如何覆盖它的样式？
或者有没有人能建议我在angular 5中使用其他的滑动切换，比如材质滑动切换？
浏览 15提问于2018-06-13得票数 21
2回答
我想改变字体颜色的垫-选项显示在自动完成面板。
我在根style.css中定义了样式
::ng-deep .mat-option-text {
color: red !important;
}
但是，当我在浏览器检查元素面板中设置颜色属性时，我会看到更改。
template.html
在模板类或style.css中，我应该做哪些更改来更改mat选项的字体颜色。
<label>Search names</label>
<input type="text"
placeholder="search name"
浏览 3提问于2021-07-09得票数 0
回答已采纳
1回答
我正在以我的应用程序为主题定义颜色和排版。但它不适用于我的应用程序标题组件中基于垫-工具栏的标题。默认情况下，.mat-toolbar h1的主题css规则会覆盖我的主题。
index.html
<html>
...
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
_theme.scss文件：
@import '~@angular/
浏览 0提问于2019-08-16得票数 1
我在材料垫选择初始选择框中遇到问题，因为“下拉”菜单的宽度与垫选择面板中的选项的大小相同。我以前有一个简单的jQuery选择框，占位符有一个宽度，选项/选项有一个单独的宽度。它似乎是自动完成这项工作的。我现在在选择Angular 6材料时遇到了问题，因为它有不同的宽度。首先，我花了很长时间才弄明白如何改变宽度。我最终通过使用以下命令更改了它
Angular HTML：
<div id="selectionList">
<mat-form-field>
<mat select [ngclass]="{'selection-
浏览 0提问于2018-09-13得票数 0
在我的角-11项目中，我在SharedModule中有这个
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { A11yModule } from '@angular/cdk/a11y'
浏览 2提问于2021-05-26得票数 2
回答已采纳
我无法设置图标颜色
我有一个有五个垫子的垫子-水平踏板(例如，A部分，B部分.(E部分)。每个部分(垫-步骤)可能有不同的颜色，取决于某些业务规则。
我知道如何改变“选定的”垫-步骤，或如何改变所有垫子步骤的颜色(用相同的颜色)，但不知道如何动态地改变它，以便每个部分可能有不同的图标背景色。
使用角v7
下面是设置第三个垫子的样式--绿色图标。Id确实有效，但我不知道如何在运行时从组件(类型记录)动态更改颜色。
::ng-deep .mat-step-header:nth-of-type(3) .mat-step-icon {
background-color: gre
浏览 2提问于2019-07-30得票数 3
回答已采纳
3回答
我在angular 5应用程序中有以下代码。它使用*ngFor生成如下图所示的垫卡序列。但所有垫卡的高度与第一张垫卡的高度相同。
<div fxLayout="row">
<mat-card *ngFor="let section1 of sections" fxFlex="33" style="margin: 15px;">
<mat-card-header>
<mat-card-
浏览 0提问于2018-03-13得票数 6
回答已采纳
1回答
垫-滑-切换显示数据。角度5
、、、、
我写了一个用html显示数据的代码。我想要以垫-滑-切换的方式显示数据。一切看起来都很好，我的mat-滑块切换效果很好，在html中，当value为1时不显示选中，或者在value为0时不显示选中。你能给我一些建议吗？
我的html代码：
<form [formGroup]="productform" class="col s12" materialize>
<mat-slide-toggle formControlName="active" id="device" (cha
浏览 13提问于2018-03-01得票数 0
我使用的是角垫表，并创建了一个具有可扩展行的表，就像下面的第8角表：
我想知道是否有一种方法可以创建一个“展开所有”按钮，该按钮可以一次展开每一行，而不是一次单击每一行来展开它。
谢谢!
浏览 0提问于2019-08-08得票数 3
回答已采纳
我有一个包含两列的mat-table : Name和Plot。 我尝试过的html、.ts和.css代码如下： .html <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!--
浏览 30提问于2020-11-02得票数 0
回答已采纳
我想找到的答案是:在Angular routing中，当点击一个链接并生成路由url时，是重新加载整个html页面，还是只重新加载页面的一部分？ 使用Angular basic教程'Tour of Heroes'，我在每个组件的html模板中放入一条语句，用不同的颜色(代码来自here和这里)绘制一个框。例如..。 <h1>{{title}}</h1>
<nav>
<a routerLink="/dashboard">Dashboard</a>
<a routerLink="/h
浏览 11提问于2020-01-31得票数 1
回答已采纳
5回答
在把这个问题标记为“重复”之前，请听我说，因为我在这个问题上被困了好几个小时。我已经仔细研究了现有的问题，但没有找到任何解决办法。
我正在学习角，并从角9+和角材料开始。我试图通过阅读中的文档来实现一个简单的角度材料对话框。
我的代码紧跟示例代码，但我不明白为什么我仍然收到这些错误消息：
'mat-dialog-content' is not a known element.
'mat-dialog-actions' is not a known element.
这个对话框确实会显示出来，但是它看起来好像在对话框模板html中没有呈现任何角度的物质组件/指令。
浏览 0提问于2020-03-21得票数 14
在angular-cli.json中有一个条目"index": "index.html",，它告诉Webpack在哪里设置Angular作为SPA的陷阱。我想在多个主要的.HTML文件上运行Angular，如search.html，list.html等。我如何告诉CLI这些.HTML文件也应该像index.html一样嵌入Angular代码？
浏览 0提问于2016-12-04得票数 1
1回答
无法让搜索栏重新启动
、、、
所以我有导航条，上面有搜索栏。当你想搜索的时候，它就会出现。当你完成的时候，它会滑回来。问题是，我不能让它往上滑，我只能让它往下滑。这是我的密码
$(document).ready(function(){
$(".icon-search").click(function(){
$(".slip").toggleClass("slip-open");
$("#FORM_1").removeAttr("style");
});
以及CSS和标记的演示。
你会看到搜索栏向下滑动，但不是后退。任何
浏览 1提问于2014-07-13得票数 1
回答已采纳
3回答
我试图得到一个切换的效果，按钮从左向右滑动。当您单击选项卡按钮时，该框将滑出(向左)，然后再次单击它，它将滑回(向右)。我尝试过几种不同的方法来做这件事，但似乎没有什么对我有帮助。
您可以在：查看所有内容。
以下是我到目前为止在jQuery中所做的
$(function () {
$('#tab').click(
function () { $('#sideBox').animate({ 'left': '0px' }, 500); })
});
现在如果我做这样的事..。盒子就会滑出
浏览 8提问于2014-08-25得票数 0
回答已采纳
3回答
我想改变垫-滑块的动态颜色。我有一个应用程序，用户可以选择任何颜色的颜色，我想要显示为滑块颜色的颜色。
我知道您可以在颜色属性中添加自定义颜色名称，但在我的情况下，颜色名称是不固定的。它可以是颜色味觉中的任何颜色。
<mat-slider [(ngModel)]="lifeArea.weighting" [name]="lifeArea.title" thumbLabel="true" color="green" thumbLabel min="0" max="10" step="1&
浏览 2提问于2019-07-05得票数 0
我有一个按钮，我想应用一个按钮的默认样式，当用户单击一个按钮时，将按钮样式颜色更改为红色，将背景颜色更改为白色。Blow是我的.css和组件。
.btn-default {
color: white;
background-color: blue;
}
.btn-change {
color: Red;
background-color: white;
}
Component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
浏览 0提问于2018-01-14得票数 5
回答已采纳
增加新的角分量的步骤是什么？
npm installimport在添加到时会出现错误，例如：
npm i --save @angular/material/tree'
在.TS模块中
import {MatTreeModule} from '@angular/material/tree'
html中的
父节点--子node1 --子node2
它给出了错误垫-树节点不是已知的元素。
浏览 5提问于2020-08-10得票数 0
我想在我的Angular项目中使用垫图标。
在src/app/files/files.html中，我可以使用mat-icons，但是在src/app/files/public-file/public-file.html中，mat-icon不显示。
为什么会发生这种情况？
浏览 4提问于2020-03-11得票数 1
回答已采纳
我在我的应用程序中使用角材质数据选择器，我需要改变一些特殊的dates.For的颜色，这是我使用的'dateClass‘属性的垫-数据采集器，但它是不工作的。
html
<mat-datepicker [dateClass]="dateClass" #picker1 ></mat-datepicker>
组件
dateClass = (d: Date) => {
const date = d.getDate();
// Highlight the 1st and 20th day of each month.
浏览 0提问于2019-05-14得票数 1
回答已采纳
2回答
我试图改变占位符文字颜色的角度材料输入。显示为默认为黑色，但我希望它是白色的，因为有一个黑暗的背景颜色。
我可能读过这个网站上的每一篇关于如何做这件事的文章，但是似乎没有什么是可行的。*ng-深度和垫-占位符不是选择。
下面是我的HTML中的一个片段：
<form #searchForm="ngForm" class="example-full-width mr-auto">
<mat-form-field style="width: 350px; font-size: 14px; margin-bottom: -1
浏览 0提问于2019-08-07得票数 4
回答已采纳
我有3个垫标签与垫滑块切换。在第三个mat选项卡上，使用ngIf删除mat-滑块切换。然而，这似乎重置了垫上滑块上的检查值。在前两个选项卡之间来回移动，滑块值保持良好，但第三个选项卡始终重置垫块滑块切换。如果在mat选项卡1上选择了滑块，则移动到mat选项卡3，然后回到mat选项卡1，滑块将移回未选中状态。
选项卡component.html
<div class="container">
<mat-tab-group
(selectedTabChange)="focusChange($event)"
[selectedIndex]=
浏览 21提问于2018-07-21得票数 1
回答已采纳
3回答
更改或单击垫-按钮-切换事件
、、、、
我有一个垫按钮切换组，它有5个垫按钮切换。我需要在单击或val更改时触发一个事件，尽管我更喜欢它是一个单击事件。
提供的文档显示没有单击事件，但有更改事件。
我也尝试过change事件(如下所示)，但该事件未被触发。
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="rowAction">
<mat-button-toggle value="raw_swift_msg" (change)="onValChange(value)&#
浏览 0提问于2018-06-30得票数 7
回答已采纳
1回答
我刚开始学习css和html。我试着复制我在网络上找到的css代码动画，但它的工作方式并不像我想象的那样。右边框应从左向右滑动并更改文本的颜色，然后滑回为文本颜色充电。有人能帮我找出错误并试着更好地理解它是如何工作的吗？
h2 {
position: relative;
text-transform: uppercase;
font-family: sans-serif;
font-size: 5rem;
-webkit-text-stroke: 0.3vw pink;
}
h2::before {
content: attr(dat
浏览 2提问于2022-08-23得票数 0
回答已采纳
我的预期输出是当用户选择起始价格和最终价格的基础上，我想要显示产品在这里，我不想按钮使用垫滑块本身，我想排序的产品。所以请你帮我做这个？
<mat-slider min="0" max="500" step="10" #statprice (input)="start($event)"></mat-slider>
<mat-slider min="0" max="1000" step="10" #endprice (input)=
浏览 0提问于2018-10-16得票数 0
2回答
我试图更改角材质mat-button的背景色，如 stackblitz示例中所示，在悬停上使用background-color: red;只适用于mat-raised-button，当应用于mat-button时，它将消除背景颜色的淡入。
如何在保留淡色动画的同时改变背景颜色？
浏览 5提问于2020-11-27得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
