经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
Angular----样式
来源:cnblogs  作者:笑苍茫  时间:2019/7/22 10:45:16  对本文有异议

本篇根据Angular官网提供的例子,对Angular涉及到的样式绑定进行说明。

一、提供的CSS样式

  1. 1 .red{
  2. 2 color:red;
  3. 3 }
  4. 4 .green{
  5. 5 color: green;
  6. 6 }
  7. 7 .yellow{
  8. 8 color: yellow;
  9. 9 }
  10. 10 .size{
  11. 11 font-size: 20px;
  12. 12 }
  13. 13 .back{
  14. 14 background-color: gray;
  15. 15 opacity: 0.4;
  16. 16 }

二、绑定样式

(1)、传统的样式绑定-------绑定red  size   back

 1 <span class="red size back">传统的样式绑定</span> 

 效果图如下:

 

(2)、CSS类绑定----添加或删除单个类的最佳途径

CSS类绑定的语法和property绑定类似。但是方括号中的部分不是元素的属性名,而是由class前缀,一个点(.)和css类的名字组成,其中后两部分是可选的,例如:[class.class-name]。借助CSS类绑定,可以从元素的class attribute 上添加和移出css类名。

         a、绑定语法1-----用yellow back 替换标准绑定(绑定多个css样式)

         首先在组件中定义变量: 1 yellowBack = 'yellow back'; 

         然后给<span>标签绑定上述定义的变量: 1 <span class="red size back" [class]="yellowBack">css类绑定替换传统的样式绑定</span> 

         通过[ class ]绑定的样式将替换class传统绑定的样式,效果图如下:

 

        b、绑定语法2-----绑定单个css样式----绑定到特定的类名。当[ class.类名] = ‘true|false’,当为真的时候,Angular会添加这个类,否则会移出这个类

        首先在组件中定义变量: 1 isRed = true; 

        然后给<span>标签绑定上述定义的变量: 1 <span [class.red]="isRed">css类绑定red类</span> 

        效果图如下:

 

(3)、NgClass----同时添加或移出多个类

      a、不简洁的写法(目的是为了加深对 [NgClass] 的理解)

      首先在组件中定义几个变量:

  1. 1 isRed = true;
  2. 2 isGreen = true;
  3. 3 isYellow = true;
  4. 4 isBack = true;
  5. 5 isSize: true;

     在模板页中写法如下:

 1 <span [ngClass]="{'red':true,'back':true,'size':true}">第一种写法</span> 

效果如下所示:

 1 <span [ngClass]="isRed?'red':''">第一种写法的另类风格</span> 

效果如下:

 

    b、常规写法----将ngClass绑定到一个键值对对象,键为类名,值为bool类型,如果值为true,则对应的类被加上,否则该类会被移出。

          首先在组件中定义变量样式对象:

  1. 1 currentClasses = {
  2. 2 'yellow': true,
  3. 3 'back': false,
  4. 4 'size': true
  5. 5 };

          然后在模板页面对该样式对象进行绑定,根据值得true或者false决定对应样式是否会被添加。一般值会在组件中预先定义好,在修改的时候只需要修改预先定义好的变量即可

  1. 1 <span [ngClass]="currentClasses">标准的ngClass</span>

效果图如下所示:

 

(4)、Style Binding----设置单一样式值的方法。样式绑定的语法与property属性绑定类似。但是方括号中的部分不是元素的属性名,而由style前缀、一个点(.)和css样式的属性名组成,形如:[ style.style-property]。有些样式绑定中的样式带有单位,这种情况,根据条件以‘em’和‘%’来设置字体大小的单位。

  1. 1 <button [style.color]="'red'">Red</button>
  2. 2 <button [style.background-color]="'green'">Save</button>
  3. 3 <button [style.font-size.em]="3">Big</button>
  4. 4 <button [style.font-size.%]="150">Small</button>

效果显示如下:

注意:[ style.style-property]=“ ‘类名这里加单引号’ ”;style-property样式属性命名方法可以用中线命名法,就像这个例子中一样,也可以使用驼峰式命名法,比如fontSize.

 

(5)、NgStyle----同时设置多个内联样式

   首先在组件中定义变量和样式:

  1. 1 isRed = true;
  2. 2 curentStyle = {
  3. 3 'color': this.isRed ? 'red' : 'green',
  4. 4 'border': '1px solid gray',
  5. 5 'fontSize': '20px'
  6. 6 };

   在模板中将样式通过 [ ngStyle]  绑定

  1.  1 <span [ngStyle]="curentStyle">NgStyle Binding Test</span> 
    效果显示如下:

  1.  

 

原文链接:http://www.cnblogs.com/WangYujie1994/p/11211222.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号