首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当mat-menu打开时,修改mat-按钮背景颜色

可以通过以下步骤实现:

  1. 首先,在HTML模板中,给mat-menu添加一个打开时的CSS类名,例如"menu-open"。
代码语言:txt
复制
<button mat-button [matMenuTriggerFor]="menu" [class.menu-open]="isMenuOpen">Open Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
  <button mat-menu-item>Item 3</button>
</mat-menu>
  1. 在组件的CSS文件中,定义.menu-open类的样式,设置按钮的背景颜色。
代码语言:txt
复制
.menu-open {
  background-color: #ff0000; /* 设置背景颜色为红色 */
}
  1. 在组件的Typescript文件中,添加一个变量来跟踪mat-menu的打开状态,并在打开和关闭时更新该变量的值。
代码语言:txt
复制
import { Component } from '@angular/core';

@Component({
  selector: 'app-menu-example',
  templateUrl: './menu-example.component.html',
  styleUrls: ['./menu-example.component.css']
})
export class MenuExampleComponent {
  isMenuOpen = false;

  toggleMenu() {
    this.isMenuOpen = !this.isMenuOpen;
  }
}
  1. 最后,在按钮的点击事件中调用toggleMenu()方法来切换mat-menu的打开状态。
代码语言:txt
复制
<button mat-button [matMenuTriggerFor]="menu" [class.menu-open]="isMenuOpen" (click)="toggleMenu()">Open Menu</button>

这样,当点击按钮时,mat-menu会打开,并且按钮的背景颜色会变为红色。当再次点击按钮时,mat-menu会关闭,并且按钮的背景颜色会恢复默认值。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • flutter 起步

    一样,但含有一个context参数用于做本地化11. color该颜色为Android中程序切换中应用图标背景颜色,当应用图标背景为透明时12. theme(WidgetsApp不支持)应用程序的主题...19. checkerboardRasterCacheImages为true打开光栅缓存图像的棋盘格20. checkerboardOffscreenLayers为true打开呈现到屏幕位图的层的棋盘格...21. showSemanticsDebugger为true打开Widget边框,类似Android开发者模式中显示布局边界22. debugShowCheckedModeBanner为true...backgroundColor - 内容的背景颜色,默认使用的是 ThemeData.scaffoldBackgroundColor 的值。...全局变量和静态成员变量,这些变量不会在热刷新更新。修改了main函数中创建的根控件节点,Flutter在热刷新后只会根据原来的根节点重新创建控件树,不会修改根节点。

    4.5K20

    .Net语言 APP开发平台——Smobiler学习日志:如何快速实现按钮组功能

    ,也许比Xamarin更方便 一、目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的“Smobiler Components”拖动一个ButtonGroup控件到窗体界面上 2.修改...“True”,才能实现长按控件进入编辑模式,即支持删除按钮 b.Buttons属性 打开集合编辑器,并点击"添加",Edit属性(是否支持编辑),Selected属性(是否选中),Text属性(子按钮文本...属性(控件文本颜色)、BorderColor属性(控件边框颜色)、SelectBackColor属性(控件选择状态背景色)、SelectForeColor属性(控件选择状态文本颜色)和SelectBorderColor...图12 e.Location属性 让控件显示在合适的位置,如图13; f.RowButtonCount属性 设置单行中按钮的数量,该属性默认设置为“0”,如图14; 该属性设置为“0”,控件会根据当前...Button的内容自动设置Button的大小,该属性设置大于“0”,每行固定显示RowButtonCount指定的数量。

    89140

    报表设计-填报预览

    填报预览(op=write) 填报预览不仅可以用来查看,而且可以在线输入与修改数据,从而进行数据的采集与入库。...1)打开设计器,在模板面板中打开doc/Form/FreeForm/自由填报模板.cpt这张模板,点击预览按钮下方的倒三角,选择填报预览,如下图所示: ?...2)点击填报预览按钮之后,就会在 Web 端以填报的方式打开模板,可在 Web 端对模板内容进行编辑修改,进行数据的入库操作,如下图所示: 相较于分页预览,填报预览的URL地址后面多了一个&op=write...- sheet 标签页显示位置 报表中存在多个sheet,sheet标签页位置默认处于报表底端,可设置在报表上部 移动端无意义 报表显示位置 设置内容在报表当中显示的位置。...移动端无意义 填报当前编辑行背景颜色设置 选择颜色后,会在填报预览的时候,把当前处于编辑状态的行背景颜色显示为设置的颜色 移动端无意义 未提交离开提示 在填报的时候,如果有单元格处于已编辑的状态,在关闭或是切换网页的时候

    1.6K10

    目录内文件名导出到Excel文件

    “程序选项”的设置 (三)保存 所有设置符合自己要求后,就可以点击保存按钮生成网页文件,特别注意的是保存位置应当在生成文件夹内! ?...安全性设置 (二)全屏及双页显示 点击“文件”菜单中的“打开”,选择“浏览”打开生成的PDF文件。 ? 打开文件 点击右上方的全屏按钮进行全屏显示。 ?...1、.dirlistertable td 这里可以设置的有 (1)删除链接背景色:删除代码中的background-color:#ffffff; (2)设置文字颜色修改原代码color:#0678a4...修改后的代码 (二)设置文件夹标题栏背景色和文字颜色 ?...标题栏的原始代码 找到代码中的.dirlistertable .d td 可根据情况修改其中的背景色、文字颜色和文字大小,这里设置的是背景色为蓝色,文字颜色为白色,文字大小为22。 ?

    5.7K30

    【Java 进阶篇】JavaScript电灯开关案例:从原理到实现

    介绍 在这个案例中,我们将创建一个网页,上面有一个电灯和一个按钮按钮可以切换电灯的开关状态,电灯亮起背景颜色将变成黄色;电灯关闭背景颜色将变成灰色。...注意,我们使用了transition属性来实现电灯背景颜色切换的平滑过渡效果。...随后,我们为按钮添加了一个点击事件处理程序,按钮被点击,它会检查isLightOn的状态。...如果isLightOn为true,表示电灯已经亮起,那么点击按钮后会将电灯关闭,背景颜色变为灰色;如果isLightOn为false,表示电灯已经关闭,那么点击按钮后会将电灯打开背景颜色变为黄色。...您可以在浏览器中打开index.html文件来查看电灯开关案例的效果。您点击"切换开关"按钮,电灯的状态将会切换,背景颜色也会相应地改变。

    26510

    怎么在没有专业UI的情况下设计出一个美观的工业组态界面?

    前景色宜鲜艳一些,背景则应暗淡 注重区分。如显示重要的参数、设备状态颜色区分要明显 遵循约定。行业中有些颜色是有定义的,不要更改,以免混乱 和谐统一。不使用不兼容色,保证画面风格统一。...以我的经验来看,采用工控显示器1920*1080的分辨率,采用上下结构,上部尺寸保持在105较好,按钮切换这部分尺寸在60左右,剩余主体窗口的尺寸为975左右。...采用1680*1050分辨率,采用上下结构,上部尺寸保持在100,用户切换尺寸在60左右,剩余主体窗口的尺寸为950左右。...网站换色 注册账号,登陆 iconfont 网站以后可以简单的替换颜色,网站链接如下:iconfont-阿里巴巴矢量图标库 找到需要的元素,选中,点击下载,然后再在打开的界面中对图标进行颜色修改 PS...换色 使用PS软件更改图标颜色的操作如下: 1) 在PS中打开图标图片,选中背景层,点击Ctrl+J复制该图层 2) 使用魔棒工具抠图,将图标部分选中,多个选区可以按住shift进行选取,之后将选中的图标复制

    43610

    Qt Designer中的QWidget属性表介绍

    ,但小部件不提供任何文本,设置此属性很重要。...,可以通过windowFilePath()来访问windowFilePath属性 setWindowFilePath(QString )来设置windowFilePath属性 ---- 这个功能在窗口打开文件进行操作可以用来标记打开的文件...它的颜色设置必须与Window和Base对应的颜色有良好的对比 QPalette.Button 1 button背景颜色,此背景可能与Window指定的背景色不同,因为某些样式要求按钮使用不同的背景色...部件的状态切换,默认的图标绘制函数会自动根据部件的状态重绘图标 Ⅱ、enum State { Off, On } 某些部件还有所谓的开关状态(比如一个按钮可以有按下和弹起两个状态), 则还可以根据...部件具有具有有效背景或边框图像的样式表,此属性将自动禁用。 默认情况下,此属性为False。

    10.9K20

    私人订制Android本地图片选择器

    初始化GalleryFinal配置 通过代码设置图片选择器的标题栏背景颜色,标题文本颜色,浮动按钮颜色; 通过监听事件,达到滚动不加载图片,停下来时加载图片,实现优化; 初始化功能配置; 为防止代码分开查看导致逻辑的混乱...设置主题 mThemeConfig = new ThemeConfig.Builder() .setTitleBarBgColor(colorTitleBarBg) // 设置标题栏背景颜色...(colorFabNormal) // 设置选中标记(对勾)的颜色按钮颜色相同 .setTitleBarIconColor(colorTitleBarIcon) // 设置标题栏按钮颜色...无图片时无法返回 无图片选择,预览按钮依然存在 ?...无图片选择预览按钮依然存在并可以点击 针对以上需要修改的功能,源码修改如下: 选择图片到达上限依然可以返回图片选择页面 因图片选择页面的跳转在openGalleryMuti方法里实现: /

    1.4K30

    【GIF图修改背景颜色(改为透明)】

    GIF图修改背景颜色(改为透明) 前提 已经安装完成了PS 操作 首先打开需要修改背景的GIF文件,点击左上角的文件,选择导出—存储为WEB所用格式 选择完成后,选择左侧的放大镜图样,即可进行图像的放大以及缩小...,默认为放大,按住键盘alt键即可改为缩小 右上角将颜色模式改为可选择 选择左侧工具栏中的吸管按钮,点击图片背景吸取颜色 在图像的右侧颜色像素图中,会显示刚刚选中的背景颜色色块...,对颜色色块进行双击 在拾色器中进行背景颜色的更改,选择完成后点击确定 这里以红色为例 这时GIF图像就改为了红色背景 将右上角的图片模式,更改为GIF,这样就可以在此页面进行预览...在页面的右下角,小三角形为播放按钮,点击播放即可进行动态图的预览 若想图片更改为透明背景色,同样的方法,选中左侧的吸管按钮,选中背景颜色 在右侧的像素颜色中,被选择的背景颜色会呈现出选中状态...,这时选择数字256旁边的马赛克图样按钮,点击之后,即可将背景更改为透明色

    1.3K30

    Joe主题再续前缘版 - 本站同款

    可设置两处展示位置或关闭 新增博主栏鼠标移入漂浮物可设置显示或隐藏 新增评论模块自动记住网址 新增评论模块评论失败后返回原因 新增必应收录推送 新增自定义站点引入文件源,可把静态文件存入云存储空间内,如:七牛云 优化大部分按钮背景颜色为渐变色...,使其层次更加明确 优化文章内joe_message插件的上边距 部分文字颜色修改为渐变色 修改搜索按钮内英文文字为中文 优化移动端下站点公告隐藏为向下排序 优化文章内行内代码的蓝色背景显示高度 修改文章页面标签模块的选中下划线为渐变色...,Test修改为空 去除压缩包内多余文件 移动端情况下侧边栏头像优化为圆形 新增移动端可设置侧边栏壁纸显示模式为半屏或全屏 新增可自定义侧边栏登录注册URL函数 优化移动端页面已经往下滑动之后点击分类等栏目不会返回顶部...ID 右下角三个浮悬按钮背景颜色优化为60%透明的白色 页面头部导航优化为85%的毛玻璃效果透明 新增文章底部可自定义提示信息 新增首页轮播图可设置打开窗口方式 1.07 新增可设置首页大屏图片 新增可一键开启网站全局灰色模式...BUG 优化注册和找回密码邮箱发送错误的提示机制 新增如果主题没有配置邮箱那么用户注册则无需验证码 1.12 优化打开文章导读目录后背景层的模糊效果 优化移动端侧边栏功能模块的背景为85%的白色透明效果

    3K20

    玩机汇总(六):MIUI主题拆包

    (10).com.android.thememanger模块—主题中心(自定义主题商店的名字、背景修改导入本地主题按钮名称等)。...(11).com.android.updater模块—系统升级(系统更新背景图、自定义更新按钮名字等)。 (12).com.miui.home模块—桌面布局(修改图标布局、图标大小等)。...*(4).点九图软件:***Nine-PatchEditor 小技巧:****手机应用你需要修改的主题,电脑或手机打开主题文件对应着看!...(10).com.android.thememanger模块—主题中心(自定义主题商店的名字、背景修改导入本地主题按钮名称等) 背景图名字:theme_window_background.9.png...(11).com.android.updater模块—系统升级(系统更新背景图、自定义更新按钮名字等)。

    2.7K30

    【 iOS 应用开发 】 UIKit 控件 ( UIView 属性 | storyboard 设置 | 模拟器 | 拖线关联 | tag | 软键盘操作 | 颜色值 | 代码生成控件 | 动画设置 )

    , 然后点击按下状态, 大按钮显示另外一个背景图片; 3.上下左右按钮 : 点击四个按钮, 大按钮进行上下左右移动; 4.放大缩小按钮 : 点击放大, 大按钮放大, 点击缩小, 大按钮缩小; -...-inch, 这样 Main.storyboard 就会显示成普通 iPhone 的样式; ---- ( 2 ) 需求 需求 : 1.点击按钮, 修改控件颜色; 2.点击按钮修改控件颜色, 这个颜色是一个随机生成的颜色值...设置颜色 及 随机 颜色值 : 1.添加按钮 ( 功能 修改父控件背景颜色 ) : ① 获取父控件 : 根据 按钮 点击方法传入的 按钮控件, 获取其父控件, UIView * superView...= sender.superview; ; ② 修改父控件颜色 : 背景颜色的属性是 backgroundColor , 修改该属性即可改变父控件颜色; 代码为 superView.backgroundColor...= [UIColor blueColor]; ; 上述代码将父控件背景颜色修改为 蓝色; 2.添加按钮 ( 功能 修改父控件 随机 背景颜色 ) : ① 添加UIButton控件 : 添加一个 UIButton

    4.9K30

    六天完成一个简单iOS App - 第二天

    return UIStatusBarStyleLightContent; } 关于修改状态栏颜色更详细的介绍可以去看状态栏的管理 因为登陆界面很多地方都需要用到,例如查看关注需要登陆,添加关注也需要先登录...❌号和注册账号布局 第一部分的布局非常简单,这里有一个注意点:UIButton 只有一张图片显示的时候 ,建议使用image而不要设置背景图片,因为背景图片的设置会看按钮有多大就将图片拉伸到大,图片会被拉伸...设置image图片不会变形,并且可以放大按钮的点击范围。所以这里的❌号选择设置UIButton的image,而不是backgroundImage。 3....SystemButton 设置为Custom就会在高亮显示我们设置的背景图片,并且不会渲染字体颜色。...切换占位文字颜色颜色 textfield处于未编辑状态,占位文字颜色为灰色,textfield处于编辑状态,占位文字颜色为白色 ?

    2.1K50

    【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

    DOM 元素 获得焦点 , 该 DOM 元素上绑定的 onfocus 事件被触发 ; 绑定该 onfocus 事件的元素 一般都是 input 表单元素 ; 如 : 用户 点击输入框 或 通过键盘切换到输入框...document.body.style.backgroundColor 属性 可 用于 设置 或 获取 HTML 页面 的背景颜色 ; 设置背景颜色示例 : document.body.style.backgroundColor...); // 输出当前页面背景颜色 如果没有为 document.body.style.backgroundColor 显式设置值 , 则它将 返回空字符串或浏览器默认的背景颜色 ; 通过直接设置 style.backgroundColor..., 可以 实时更改页面的背景颜色 , 这种方式 比修改 CSS 文件更为便捷 , 尤其适用于动态交互或响应用户事件的情况 ; 3、代码示例 代码示例 : <!..., 按钮显示 " 关灯 " , 点击按钮 切换到 关灯状态 // 当前关灯状态 设置 0 , 背景黑色 , 按钮显示 " 开灯 " , 点击按钮 切换到 开灯状态 var

    10410

    如何使用Excel绘制图表?

    我们选择工作表的全选表格按钮,然后设置填充颜色为白色。就可以把整个工作表都设置为白色背景。...使用颜色,一定要克制住为了丰富多彩而使用颜色的冲动。如果使用了太多种颜色,甚至超过了彩虹的颜色种类,就失去了颜色的价值,因为没有什么是突出的。...3)打开以后我,我们把鼠标放到对应的配色上,就可以看到这个配色的RGB值,这个值在我们后面的图表颜色修改中会用到。 后面设计到颜色的rgb值,你都可以按上面的操作在这个网站上找到。...不会在excel中修改颜色的可以看下图的操作步骤 第1步,选中要修改颜色区域,然后点击“开始”选项卡下面的背景填充按钮,选中里面的“其他颜色” 第2步,选中“自定义”,然后输入配色方案中RGB的三个颜色值...字体优化 现在图表颜色已经设置好了,下面图片我们对字体进行修改。 Excel模式生成的字体都是宋体,简直不能再丑。 我比较喜欢将中文设置为微软雅黑,英文和数字设置为:Arial 字体。

    33020
    领券