angular2-组件样式
组件样式:
:host 选择器
使用:host
伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素)
这是我们能以宿主元素为目标的唯一方式。除此之外,我们将没办法指定它, 因为宿主不是组件自身模板的一部分,而是父组件模板的一部分
要把宿主样式作为条件,就要像函数一样把其它选择器放在:host
后面的括号中
在下一个例子中,我们又一次把宿主元素作为目标,但是只有当它同时带有active
CSS 类的时候才会生效
:host(.active) {
border-width: 3px;
}
:host-context 选择器
有时候,基于某些来自组件视图外部的条件应用样式是很有用的。 例如,在文档的<body>
元素上可能有一个用于表示样式主题 (theme) 的 CSS 类,而我们应当基于它来决定组件的样式
可以使用:host-context()
伪类选择器。它也以类似:host()
形式使用。它在当前组件宿主元素的祖先节点中查找 CSS 类, 直到文档的根节点为止
例子中,只有当某个祖先元素有 CSS 类theme-light
时,我们才会把background-color
样式应用到组件内部的所有<h2>
元素中
:host-context(.theme-light) h2 {
background-color: #eef;
}
模板中的link标签
这个 link 标签的href
指向的 URL 也是相对于应用的根目录的,而不是组件文件
@Component({ selector: 'app-hero-team', template: ` <link rel="stylesheet" href="assets/hero-team.component.css"> <h3>Team</h3> <ul> <li *ngFor="let member of hero.team"> {{member}} </li> </ul>` })
元数据中指定样式表的URL
通过在组件的@Component
装饰器中添加styleUrls
属性,我们可以从外部CSS文件中加载样式
@Component({ selector: 'app-hero-details', template: ` <h2>{{hero.name}}</h2> <app-hero-team [hero]=hero></app-hero-team> <ng-content></ng-content> `, styleUrls: ['./hero-details.component.css'] }) export class HeroDetailsComponent { }
CSS @imports 语法
我们还可以利用标准的 CSS @import
规则来把其它 CSS 文件导入到我们的 CSS 文件中,URL 是相对于我们执行导入操作的 CSS 文件的:
@import 'hero-details-box.css';
控制视图的封装模式:原生 (Native)、仿真 (Emulated) 和无 (None)
组件的 CSS 样式被封装进了自己的视图中,而不会影响到应用程序的其它部分
在组件的元数据上设置视图封装模式,我们可以分别控制每个组件的封装模式。 可选的封装模式一共有如下几种:
Native
模式使用浏览器原生的 Shadow DOM 实现来为组件的宿主元素附加一个 Shadow DOM。组件的样式被包裹在这个 Shadow DOM 中。(译注:不进不出,没有样式能进来,组件样式出不去。)Emulated
模式(默认值)通过预处理(并改名)CSS 代码来模拟 Shadow DOM 的行为,以达到把 CSS 样式局限在组件视图中的目的。 更多信息,见附录 1 。(译注:只进不出,全局样式能进来,组件样式出不去)None
意味着 Angular 不使用视图封装。 Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。 从本质上来说,这跟把组件的样式直接放进 HTML 是一样的。(译注:能进能出。)- 通过组件元数据中的
encapsulation
属性来设置组件封装模式
import { Component, OnInit, ViewEncapsulation } from '@angular/core'; @Component({ encapsulation: ViewEncapsulation.None, selector: 'enroll-member', templateUrl: './enroll-member.component.html', styleUrls: ['./enroll-member.component.less'] })
angular2-组件样式的更多相关文章
- Angular2 组件
1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...
- 微信小程序覆盖自定义组件样式
小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式. 修改https://weapp. ...
- Vue+element-ui 重置组件样式的写法
两种方式实现element-ui组件的样式 方案1:重置的公共组件样式的写法如下 然后在main.js中引入 import '@/assets/css/element.css' 方案2:每个.vu ...
- vue scoped 穿透_vue 修改内部组件样式问题
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
- Mockplus组件样式库一键解决风格复用
在Mockplus3.3版本中,新增了组件样式库,可以快速复用组件风格,同时可以将组件风格保存到库中. 官网地址:https://www.mockplus.cn 1. 保存样式 选中组件,设置好该组件 ...
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- 修改elementUI组件样式无效的问题研究
问题背景:el-tabs的选项卡默认字体是14px,大了,想改成12px,结果在style里面加样式总是不生效. 解决:样式放到app.vue里面,样式就生效了 .panel-content .el- ...
- vue中修改子组件样式
一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...
- vue+Elment-UI,修改element组件样式
在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该 ...
- 解决angular+element原有组件样式不能覆盖element自带样式问题
在对应的组件中写入 ::ng-deep + 想要改变的element组件样式名即可
随机推荐
- Ubuntu1804登录界面闪退
目前主力机操作系统已经由Ubuntu 16.04 lts升级到Ubuntu 18.04 lts.由于是跨版本升级过来,而且由unity(个人觉得挺好)替换成了gnome3,经常出点小问题.这次由于安装 ...
- luogu2486 [SDOI2011]染色
link 题目大意:给定一个N个点的树,每个点有一个颜色 有M次操作,每次可以修改树某条链所有点变成一个颜色,查询某条链上点的颜色段数 树剖,线段树维护区间合并 我的代码记录的是某个区间左端点颜色.右 ...
- CF708B Recover the String 构造
For each string s consisting of characters '0' and '1' one can define four integers a00, a01, a10 an ...
- swift -- 单例+ lazy懒加载 + 第三方库
//工具类单例 static let goods : NHGoods = { let good = NHGoods() return good }() //懒加载 lazy var registerB ...
- Qt 学习之路 2(11):布局管理器
Home / Qt 学习之路 2 / Qt 学习之路 2(11):布局管理器 Qt 学习之路 2(11):布局管理器 豆子 2012年9月4日 Qt 学习之路 2 70条评论 所谓 GUI 界 ...
- C语言中函数声明、形参、实参
函数原型: 原型prototype是函数的声明:描述了函数的返回值与参数: 函数原型说明了两点: 1.该函数的返回值 2.该函数的参数及其类型 ++++++++++++++++++++++++++++ ...
- Java的JsonHelper
<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson --> <dependency> <g ...
- php __CLASS__、get_class()与get_called_class()的区别
__CLASS__获取当前的类名, get_class()与上面一样,都是获取当前的类名 get_called_class()获取当前主调类的类名 当涉及到继承时,在方法中使用类名.直接贴图了 MVC ...
- http文件上传/下载
package unit; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileOutputSt ...
- appium使用常见问题汇总--持续更新
问题1:使用adb devices查看连接设备,提示unauthorized 解决方案:进入进程管理,关闭adb进程,然后再查看连接设备 问题2:adb connect ip提示远程计算机积极拒绝,无 ...