angular动态绑定样式以及改变UI框架样式的方法

一：angular动态绑定样式

举个栗子：

  isHideClass(index){const data = this.tableData[index];// if(data['532411351520251904'].value.valueText===''&&data['532411588670394368'].value.valueText===''// &&data['532411670509654016'].value.valueText==='') {//   return 'hide_tr'// }let arr = [];for (let i in data) {arr.push(data[i]);}if(arr.every((val,idx)=>{return val.value.valueText === ''})){return 'hide_tr'}}

hide_tr是类名，

.hide_tr{
display: none !important;
}

解释：ngClass要绑定的类名会在tr根据数据循环生成html的过程中调用组件中定义的isHideClass（）方法，并把i（index）带过去让方法使用
根据方法逻辑返回的类名去绑定写好的样式isHideClass(index){return 'hide'}，这时候这个ngClass就绑定上了hide这个类名的样式

二：angular改UI框架样式（例子是蚂蚁金服的UI框架）

例子：

::ng-deep{.ant-card-head-title{font-weight: bold;}.ant-table-placeholder{display: none;}.ant-card-body {padding-bottom: 0px}.hide_tr{display: none !important;}}

在要改的样式前面加上：：ng-deep，就可以改变框架定义好的样式

转载于:https://www.cnblogs.com/leileilei/p/9574786.html

angular动态绑定样式以及改变UI框架样式的方法相关推荐

修改taro-ui的样式，在自定义组件中使用taro-ui，修改ui框架样式
其实修改ui框架的样式还是很容易碰见的,但是每个框架处理的方式可能还有点不太一样, taro编译出来的小程序样式. addGlobalClass 添加这个只能让我们修改页面中的taro-ui 样式 ...
各种ui框架的使用方法
各种ui的使用方法 uview gap间隔槽图标的用法 ColorUI uview 使用教程 1.去插件市场找到导入之后把里面一个文件夹uview的复制到自己的项目中 2.main.js引入uVie ...
使用UI框架时 css不生效使用/deep/完美解决避免污染全局样式
使用UI框架时 css不生效完美解决避免污染全局样式使用前端UI框架时在页面上单独修改css 但是不生效都是在 <style scoped> </style>这样的模式 ...
基于H5的机顶盒UI框架create menu DVB
基于H5的机顶盒UI框架 create menu DVB 0.7.6 create menu DVB 0.7.6 代码开源地址 https://github.com/xcdiv/create_menu ...
组件的生命周期，小程序如何引入第三方ui框架
笔记组件开发的三要素 properties //相当于vue中的props接收属性 triggerEvent//相当于vue中是$emit slot//和vue是类似的slot 1.可以通关slot ...
关于 SAP Spartacus UI 框架选型问题
原文目前我们选择的 UI 框架已经污染了所有的 UI 组件.这对不使用或不能使用引导程序的客户来说是不利的.我们希望我们的 UI 层独立于特定的 UI 框架.此外,我们应该避免像 bootstrap ...
带你玩转 ui 框架 ——scoped及样式穿透问题详解
前言在我们前端的开发中经常会使用到各种 ui 框架下面这两个是比较火的,也是我常用的两个ui框架. 问题描述但是在使用框架的时候难免会遇到需要改变组件中的一些样式,当然如果我们所有页面的组件样式 ...
扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
GridView既强大又好用.为了让它更强大.更好用,我们来写一个继承自GridView的控件. [索引页] [×××] 扩展GridView控件(7) - 行的指定复选框选中时改变行的样式作者:w ...
移动开发框架--------基于腾讯手Q样式规范Frozen UI
原文:http://www.cnblogs.com/shanyou/p/4152981.html Frozen UI是一个开源的简单易用,轻量快捷的移动端UI框架.基于手Q样式规范,选取最常用的组件, ...
改变Button的样式
改变Button的样式是很困难的,你改换个思路:使用2个size一样的Button(只是样式不同),通过切换visible达到改变样式目的典型场景:UI说要一个按钮可点击和不可点击时样式不同(肯定要 ...

angular动态绑定样式以及改变UI框架样式的方法

angular动态绑定样式以及改变UI框架样式的方法相关推荐

最新文章

热门文章