Angular-样式 - Powered by Discuz! Archiver

一甲易学 發表於 2019-7-19 11:18:00

Angular----样式

本篇根据Angular官网提供的例子，对Angular涉及到的样式绑定进行说明。
一、提供的CSS样式
<div class="cnblogs_code">
<pre> 1 .red{
 2 color:red;
 3 }
 4 .green{
 5 color: green;
 6 }
 7 .yellow{
 8 color: yellow;
 9 }
10 .size{
11 font-size: 20px;
12 }
13 .back{
14 background-color: gray;
15 opacity: 0.4;
16 }</pre>
</div>
二、绑定样式
（1）、传统的样式绑定-------绑定red  size   back
 1 <span class="red size back">传统的样式绑定</span> 
 效果图如下：
<img src="https://img2018.cnblogs.com/blog/1562037/201907/1562037-20190719085100567-881672799.png">
 
（2）、CSS类绑定----添加或删除单个类的最佳途径
CSS类绑定的语法和property绑定类似。但是方括号中的部分不是元素的属性名，而是由class前缀，一个点（.）和css类的名字组成，其中后两部分是可选的，例如：。借助CSS类绑定，可以从元素的class attribute 上添加和移出css类名。
         a、绑定语法1-----用yellow back 替换标准绑定（绑定多个css样式）
         首先在组件中定义变量： 1 yellowBack = 'yellow back'; 
         然后给标签绑定上述定义的变量： 1 css类绑定替换传统的样式绑定 
         通过[ class ]绑定的样式将替换class传统绑定的样式，效果图如下：
<img src="https://img2018.cnblogs.com/blog/1562037/201907/1562037-20190719090132249-1471752088.png">
 
        b、绑定语法2-----绑定单个css样式----绑定到特定的类名。当[ class.类名] = ‘true|false’，当为真的时候，Angular会添加这个类，否则会移出这个类
        首先在组件中定义变量： 1 isRed = true; 
        然后给标签绑定上述定义的变量： 1 css类绑定red类 
        效果图如下：
<img src="https://img2018.cnblogs.com/blog/1562037/201907/1562037-20190719090630365-1241248965.png">
 
（3）、NgClass----同时添加或移出多个类
      a、不简洁的写法（目的是为了加深对的理解）
      首先在组件中定义几个变量：
<div class="cnblogs_code">
<pre>1 isRed = true;
2 isGreen = true;
3 isYellow = true;
4 isBack = true;
5 isSize: true;</pre>
</div>
     在模板页中写法如下：
 1 第一种写法 
效果如下所示：
<img src="https://img2018.cnblogs.com/blog/1562037/201907/1562037-20190719095424886-608948139.png">
 1 <span ="isRed?'red':''">第一种写法的另类风格</span> 
效果如下：
<img src="https://img2018.cnblogs.com/blog/1562037/201907/1562037-20190719095519657-940100241.png">
 
    b、常规写法----将ngClass绑定到一个键值对对象，键为类名，值为bool类型，如果值为true，则对应的类被加上，否则该类会被移出。
          首先在组件中定义变量样式对象：
<div class="cnblogs_code">
<pre>1 currentClasses = {
2 'yellow': true,
3 'back': false,
4 'size': true
5 };</pre>
</div>
          然后在模板页面对该样式对象进行绑定，根据值得true或者false决定对应样式是否会被添加。一般值会在组件中预先定义好，在修改的时候只需要修改预先定义好的变量即可
<div class="cnblogs_code">
<pre>1 <span ="currentClasses">标准的ngClass</span></pre>
</div>
效果图如下所示：
<img src="https://img2018.cnblogs.com/blog/1562037/201907/1562037-20190719100422083-8388619.png">
 
（4）、Style Binding----设置单一样式值的方法。样式绑定的语法与property属性绑定类似。但是方括号中的部分不是元素的属性名，而由style前缀、一个点（.）和css样式的属性名组成，形如：[ style.style-property]。有些样式绑定中的样式带有单位，这种情况，根据条件以‘em’和‘%’来设置字体大小的单位。
<div class="cnblogs_code">
<pre>1 <button ="'red'">Red</button>
2 <button ="'green'">Save</button>
3 <button ="3">Big</button>
4 <button ="150">Small</button></pre>
</div>
效果显示如下：
<img src="https://img2018.cnblogs.com/blog/1562037/201907/1562037-20190719103807682-1367861863.png">
注意：[ style.style-property]=“ ‘类名这里加单引号’ ”；style-property样式属性命名方法可以用中线命名法，就像这个例子中一样，也可以使用驼峰式命名法，比如fontSize.
 
（5）、NgStyle----同时设置多个内联样式
   首先在组件中定义变量和样式：
<div class="cnblogs_code">
<pre>1 isRed = true;
2 curentStyle = {
3 'color': this.isRed ? 'red' : 'green',
4 'border': '1px solid gray',
5 'fontSize': '20px'
6 };</pre>
</div>
   在模板中将样式通过 [ ngStyle]  绑定
<pre> 1 <span ="curentStyle">NgStyle Binding Test</span>  效果显示如下：</pre>
<img src="https://img2018.cnblogs.com/blog/1562037/201907/1562037-20190719111734061-701451943.png">
<pre></pre>
 

</div>
<div id="MySignature" role="contentinfo">
图片、jQuery资料下载地址：QQ群694406023（百度云资料太浪费内存了~~~~~~~~）
备注：一般代码中总会引入JQuery包，复制代码过程中请注意。用到的外部包文件群文件中都已上传。 
来源：https://www.cnblogs.com/WangYujie1994/p/11211222.html

頁: [1]

琼殿技术论坛's Archiver

Angular----样式