Angular----样式
本篇根据Angular官网提供的例子,对Angular涉及到的样式绑定进行说明。
一、提供的CSS样式
.red{
color:red;
}
.green{
color: green;
}
.yellow{
color: yellow;
}
.size{
font-size: 20px;
}
.back{
background-color: gray;
opacity: 0.4;
}
二、绑定样式
(1)、传统的样式绑定-------绑定red size back
<span class="red size back">传统的样式绑定</span>
效果图如下:
(2)、CSS类绑定----添加或删除单个类的最佳途径
CSS类绑定的语法和property绑定类似。但是方括号中的部分不是元素的属性名,而是由class前缀,一个点(.)和css类的名字组成,其中后两部分是可选的,例如:[class.class-name]。借助CSS类绑定,可以从元素的class attribute 上添加和移出css类名。
a、绑定语法1-----用yellow back 替换标准绑定(绑定多个css样式)
首先在组件中定义变量: yellowBack = 'yellow back';
然后给<span>标签绑定上述定义的变量: <span class="red size back" [class]="yellowBack">css类绑定替换传统的样式绑定</span>
通过[ class ]绑定的样式将替换class传统绑定的样式,效果图如下:
b、绑定语法2-----绑定单个css样式----绑定到特定的类名。当[ class.类名] = ‘true|false’,当为真的时候,Angular会添加这个类,否则会移出这个类
首先在组件中定义变量: isRed = true;
然后给<span>标签绑定上述定义的变量: <span [class.red]="isRed">css类绑定red类</span>
效果图如下:
(3)、NgClass----同时添加或移出多个类
a、不简洁的写法(目的是为了加深对 [NgClass] 的理解)
首先在组件中定义几个变量:
isRed = true;
isGreen = true;
isYellow = true;
isBack = true;
isSize: true;
在模板页中写法如下:
<span [ngClass]="{'red':true,'back':true,'size':true}">第一种写法</span>
效果如下所示:
<span [ngClass]="isRed?'red':''">第一种写法的另类风格</span>
效果如下:
b、常规写法----将ngClass绑定到一个键值对对象,键为类名,值为bool类型,如果值为true,则对应的类被加上,否则该类会被移出。
首先在组件中定义变量样式对象:
currentClasses = {
'yellow': true,
'back': false,
'size': true
};
然后在模板页面对该样式对象进行绑定,根据值得true或者false决定对应样式是否会被添加。一般值会在组件中预先定义好,在修改的时候只需要修改预先定义好的变量即可
<span [ngClass]="currentClasses">标准的ngClass</span>
效果图如下所示:
(4)、Style Binding----设置单一样式值的方法。样式绑定的语法与property属性绑定类似。但是方括号中的部分不是元素的属性名,而由style前缀、一个点(.)和css样式的属性名组成,形如:[ style.style-property]。有些样式绑定中的样式带有单位,这种情况,根据条件以‘em’和‘%’来设置字体大小的单位。
<button [style.color]="'red'">Red</button>
<button [style.background-color]="'green'">Save</button>
<button [style.font-size.em]="3">Big</button>
<button [style.font-size.%]="150">Small</button>
效果显示如下:
注意:[ style.style-property]=“ ‘类名这里加单引号’ ”;style-property样式属性命名方法可以用中线命名法,就像这个例子中一样,也可以使用驼峰式命名法,比如fontSize.
(5)、NgStyle----同时设置多个内联样式
首先在组件中定义变量和样式:
isRed = true;
curentStyle = {
'color': this.isRed ? 'red' : 'green',
'border': '1px solid gray',
'fontSize': '20px'
};
在模板中将样式通过 [ ngStyle] 绑定
<span [ngStyle]="curentStyle">NgStyle Binding Test</span>
效果显示如下:
Angular----样式的更多相关文章
- angular 样式属性绑定
<button (click)="onClick($event)">点我</button> <input type="> <ta ...
- Angular 样式绑定
1. style.propertyName [style.Css属性名] = 'Css属性值变量'/"'css属性值'" // app.component.ts export cl ...
- Angular 4 设置组件样式的几种方式
你用Angular吗? 一.介绍 如何只改动最简单的css代码,呈现完全不一样的视图效果. 第一种:最基本的设置: 图1 代码 图2 界面运行效果图 平常,想给一个label或者p等标签添加样 ...
- Angular结构型指令,模块和样式
结构型指令 *是一个语法糖,<a *ngIf="user.login">退出</a>相当于 <ng-template [ngIf]="use ...
- angular中文文档的滚动条样式
个人感觉angular中文文档的滚动条样式非常棒,于是乎就扒了下来 https://www.angular.cn/ body::-webkit-scrollbar { /* 定义了滚动条整体的样式 * ...
- Angular 开发小妙招1:提交表单数据验证不通过,更改输入组件的样式
开发表单时,客户端数据完整性校验是必不可少的,在jquery 时代出现了无数的数据验证插件也很好用,开发Angular 应用时,angular 内置了一些常用的数据验证指令.今天要讲的不是这些指令如何 ...
- angular,vue,react的基本语法—样式处理
基本语法 样式处理: vue: 动态属性: v-bind:class 简写 :class react: 变量:class={selecter} angular: 指令:[ngClass]=" ...
- angular ng-repeat点击切换样式,浅谈track by $index
前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...
- angular学习笔记(九)-css类和样式3
再来看一个选择li列表的例子: 点击li中的任意项,被点击的li高亮显示: <!DOCTYPE html> <html ng-app> <head> <tit ...
- angular学习笔记(九)-css类和样式2
在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error ...
随机推荐
- 第一章、Go安装与Goland破解
1.1.安装Go 安装包下载:https://studygolang.com/dl 一直点下一步安装即可,默认是安装在“C:\Go”,如果自己换成其它目录则需添加环境变量. 1.2.Liteide l ...
- xshell 与服务器断开连接后 服务停止500internal error
看某教程用uwsgi +nginx运行django项目,但是xshell关掉之后服务会停止. 大佬一席话,胜趟十天坑. 把supervisor配置好之后正常运行. 如何配置?百度啊! 附录一个好的教程 ...
- java的GUI之SWT框架 配置开发环境(包含但不限于WindowBuilder完整教程,解决Unknown GUI toolkit报错,解决导入SWT包错误)
官网(资料挺多的,API文档截图以及示例都有):https://www.eclipse.org/swt/ 克隆官方仓库 git clone --depth=1 git://git.eclipse.or ...
- Java后端传Long类型给前端导致的精度丢失
问题:实体属性是Long类型,在后端值本来是1119102511023023410,但是返回给前端的却是1119102511023023400 解决方案:添加序列化注解 import com.fast ...
- UDF——读取文件作为边界条件(类似profile的效果)
本文编译工具:VC++ UDF Studio 该插件可以直接在Visual Studio中一键编译.加载.调试UDF源码,极大提高编写排错效率,且支持C++,MFC,Windows API和第三方库, ...
- 利用Jenkins打包并远程部署SpringBoot应用
本文Jenkins版本2.190.2,为19年11月最新 1.安装Jenkins.Git.Maven和JDK Jenkins安装参考:https://www.cnblogs.com/zhi-leaf/ ...
- mysql 基本操作 三
1.alter 创建测试表 MariaDB [jason]> create table testalter_tbl(i )); Query OK, rows affected (0.08 sec ...
- elasticsearch配置集群+elk报错总结
配置ELK的时候,我平常遇到了以下几种报错情况,整理如下(持续更新中): elasticsearch启动失败 # systemctl start elasticsearch Job for elast ...
- 【已解决】C#导入音频文件
C#导入音频文件,找到Resources.resx,再进行导入. 直接添加文件到Resources是不能使用的. 解决的具体步骤: 引用音频文件核心代码: //播放背景音乐 SoundPlayer m ...
- CentOS安装vsftpd FTP后修改默认21端口方法
第一步:修改配置文件 vi /etc/vsftpd/vsftpd.conf 首先需要在vsftpd配置文件中添加: listen_port=1802pasv_enable=YESpasv_min_po ...