- nvue的css仅支持flex布局,是webview的css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然flex足以排布出各种页面,只是写法需要适应。
- 在选择器方面支持的较少,只支持简单的
class="classA"
。 - class 进行绑定时只支持数组语法。
- 不支持媒体查询
- 不支持复合样式,不支持简写
- 不能在 style 中引入字体文件
- 布局不能使用百分比,如
width:100%
; - 有些web的css属性在nvue里无法支持,比如背景图。但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念
- nvue 的各组件在安卓端默认是透明的,如果不设置
background-color
,可能会导致出现重影的问题 - 文字内容,必须只能在
text
组件下,text
组件不能换行写内容,否则会出现无法去除的周边空白 - 只有
text
标签可以设置字体大小,字体颜色
下面有些正确和错误的写法示例对比:
- 选择器仅支持class 选择器
/* 错误 */
#id {}
.a .b .c {}
.a > .b {}
/* 正确 */
.class {}
- 不支持简写
/* 错误 */
.class {
border: 1px red solid;
}
/* 正确 */
.class {
border-width: 1px;
border-style: solid;
border-color: red;
}
/* 错误 */
.class {
background: red;
}
/* 正确 */
.class {
background-color: red;
}
- nvue的
uni-app
编译模式下,App.vue 中的样式,会编译到每个 nvue文件。对于共享样式,如果有不合法属性控制台会给出警告,可以通过条件编译APP-PLUS-NVUE
屏蔽 App 中的警告。
/* 错误 */
/* 控制台警告:
WARNING: `border` is not a standard property name (may not be supported)
WARNING: `-webkit-transform` is not a standard property name (may not be supported)
*/
.class {
border: 1px red solid;
-webkit-transform: scaleY(.5);
}
/* 正确 */
.class {
border-width: 1px;
border-style: solid;
border-color: red;
/* #ifndef APP-PLUS-NVUE */
-webkit-transform: scaleY(.5);
/* #endif*/
}
nvue盒模型基于 CSS 盒模型,每个 nvue 元素都可视作一个盒子。我们一般在讨论设计或布局时,会提到「盒模型」这个概念。
盒模型描述了一个元素所占用的空间。每一个盒子有四条边界:外边距边界 margin edge
, 边框边界 border edge
, 内边距边界 padding edge
与内容边界 content edge
。这四层边界,形成一层层的盒子包裹起来,这就是盒模型大体上的含义。
nvue盒模型的
box-sizing
默认为border-box
,即盒子的宽高包含内容、内边距和边框的宽度,不包含外边距的宽度。
在 Android 平台,nvue只支持
overflow:hidden
。
在 iOS 上,nvue支持
overflow:hidden
和overflow:visible
,默认是overflow:visible
。
<template>
<view>
<image style="width: 400rpx; height: 200rpx; margin-left: 20rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/9c877c50-2f0c-11eb-899d-733ae62bed2f.png"></image>
</view>
</template>
可选值 | 描述 |
---|---|
width {length} | 宽度,默认值 0 |
height {length} | 高度,默认值 0 |
padding {length}:内边距,内容和边框之间的距离,默认值 0。与标准 CSS 类似,padding 支持简写,也可分解为以下四个:
可选值 | 描述 |
---|---|
padding {length} | 上、右、下、左四边内边距,默认值 0 |
padding-left {length} | 左内边距,默认值 0 |
padding-right {length} | 右内边距,默认值 0 |
padding-top {length} | 上内边距,默认值 0 |
padding-bottom {length} | 下内边距,默认值 0 |
border-style
设定边框样式,如果四个方向的边框样式不同,可分别设置:
可选值 | 描述 |
---|---|
border-left-style {string} | 可选值为 solid , dashed , dotted ,默认值 solid |
border-top-style {string} | 可选值为 solid , dashed , dotted ,默认值 solid |
border-right-style {string} | 可选值为 solid , dashed , dotted ,默认值 solid |
border-bottom-style {string} | 可选值为 solid , dashed , dotted ,默认值 solid |
可选值 | 描述 |
---|---|
solid | 实线边框,默认值 solid |
dashed | 方形虚线边框 |
dotted | 圆点虚线边框 |
border-width
:设定边框宽度,非负值, 默认值 0,如果四个方向的边框宽度不同,可分别设置:
可选值 | 描述 |
---|---|
border-width {length} | 非负值, 默认值 0 |
border-left-width {length} | 非负值, 默认值 0 |
border-top-width {length} | 非负值, 默认值 0 |
border-right-width {length} | 非负值, 默认值 0 |
border-bottom-width {length} | 非负值, 默认值 0 |
border-color
:设定边框颜色,默认值 #000000
,如果四个方向的边框颜色不同,可分别设置:
可选值 | 描述 |
---|---|
border-color {color} | 默认值 #000000 |
border-left-color {color} | 默认值 #000000 |
border-top-color {color} | 默认值 #000000 |
border-right-color {color} | 默认值 #000000 |
border-bottom-color {color} | 默认值 #000000 |
border-radius
:设置边框的圆角,默认值 0,如果四个方向的圆角弧度不同,可分别设置:
可选值 | 描述 |
---|---|
border-radius {length} | 非负值, 默认值 0 |
border-bottom-left-radius {length} | 非负值, 默认值 0 |
border-bottom-right-radius {length} | 非负值, 默认值 0 |
border-top-left-radius {length} | 非负值, 默认值 0 |
border-top-right-radius {length} | 非负值, 默认值 0 |
border-radius
和border-width
定义了圆心角为90度的椭圆弧的长轴和半长轴的大小。如果邻接两边border-radius
(或border-width
不一致,nvue绘制的边框曲线可能不够平滑。
margin {length}:外边距,元素和元素之间的空白距离,默认值 0。与标准 CSS 类似,margin 支持简写,也可分解为四边:
可选值 | 描述 |
---|---|
margin {length} | 上、右、下、左四边外边距,默认值 0 |
margin-left {length} | 左外边距,默认值 0 |
margin-right {length} | 右外边距,默认值 0 |
margin-top {length} | 上外边距,默认值 0 |
margin-bottom {length} | 下外边距,默认值 0 |
尽管 overflow: hidden
在 Android 上是默认行为,但只有下列条件都满足时,一个父 view 才会去剪切它的子 view
。
- 父view是
view
,cell
,refresh
或loading
。 - 系统版本是 Android 4.3 或更高。
- 系统版本不是 Andorid 7.0。
- 父 view 没有
background-image
属性或系统版本是 Android 5.0 或更高。
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
nvue布局模型基于 CSS Flexbox,以便所有页面元素的排版能够一致可预测,同时页面布局能适应各种设备或者屏幕尺寸。Flexbox 包含 flex 容器和 flex 成员项。如果一个nvue元素可以容纳其他元素,那么它就成为 flex 容器。
文档中未说明的 flexbox 属性均不支持:如
order
、flex-grow
、flex-shrink
、flex-basis
、align-content
、align-self
等。
在 nvue中,Flexbox 是默认且唯一的布局模型,所以你不需要手动为元素添加 display: flex;
属性。
定义了 flex 容器中 flex 成员项的排列方向,默认值为 column
可选值 | 描述 |
---|---|
column | 竖排,从上到下排列 |
column-reverse | 反向竖排,排布方向与flex-direction:column 相反 |
row | 横排,从左到右排布 |
row-reverse | 反向横排,排布方向与flex-direction:row 相反 |
决定了 flex 成员项在一行还是多行分布,默认值为nowrap
可选值 | 描述 |
---|---|
nowrap | 不换行,flex 成员项在一行排布,排布的开始位置由direction指定 |
wrap | 换行,第一行在上方,flex 成员项在多行排布,排布的开始位置由direction指定 |
wrap-reverse | 换行,第一行在下方,行为类似于wrap ,排布方向与其相反 |
定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。默认值为 flex-start
可选值 | 描述 |
---|---|
flex-start | 左对齐,所有的 flex 成员项都排列在容器的前部 |
flex-end | 右对齐,则意味着成员项排列在容器的后部 |
center | 居中,即中间对齐,成员项排列在容器中间、两边留白 |
space-between | 两端对齐,空白均匀地填充到 flex 成员项之间 |
space-around | 表示 flex 成员项两侧的间隔相等,所以,成员项之间的间隔比成员项与边框的间隔大一倍 |
定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。默认值为 stretch。
可选值 | 描述 |
---|---|
stretch | 即拉伸高度至 flex 容器的大小 |
flex-start | 上对齐,所有的成员项排列在容器顶部 |
flex-end | 下对齐,所有的成员项排列在容器底部 |
center | 中间对齐,所有成员项都垂直地居中显示 |
flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。 flex {number}:值为 number 类型。
- 如果所有的成员项设置相同的值 flex: 1,它们将平均分配剩余空间。
- 经常用作自适应布局,将父容器的display:flex,侧边栏大小固定后,将内容区flex:1,内容区则会自动放大占满剩余空间。
- 如果一个成员项设置的值为 flex: 2,其它的成员项设置的值为 flex: 1,那么这个成员项所占用的剩余空间是其它成员项的 2 倍。
注意
Flex 成员项暂不支持 flex-shrink
、 flex-basis
、align-content
属性。
该属性不支持 flex: flex-grow | flex-shrink | flex-basis 的简写。
//Gird布局
<template>
<view>
<view v-for="(v, i) in list" class="row">
<view v-for="(text, k) in v" class="item">
<view>
<text>{{text}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
['A', 'B', 'C'],
['D', 'E', 'F'],
['G', 'H', 'I']
]
}
}
}
</script>
<style scoped>
.row {
flex-direction: row;
height: 80px;
}
.item {
flex: 1;
justify-content: center;
align-items: center;
border-width: 1;
border-style: solid;
border-color: #FFFFFF;
background-color: #00AAFF;
}
</style>
//等高模块
<template>
<view>
<view style="width:300px; height:100px;">
<view style="flex: 1;background-color:blue"></view>
<view style="flex: 1;background-color:red"></view>
<view style="flex: 1;background-color:yellow"></view>
</view>
</view>
</template>
设置定位类型。默认值为 relative
。
可选值 | 描述 |
---|---|
relative | 是默认值,指的是相对定位 |
absolute | 绝对定位,以元素的容器作为参考系 |
fixed | 固定定位,保证元素在页面窗口中的对应位置显示,即使窗口是滚动的它也不会移动 |
sticky | 指的是仅当元素滚动到页面之外时,元素会固定在页面窗口的顶部,达到吸顶效果/粘性定位(布局) |
运用 position:sticky或position: fixed 可实现头部导航栏固定(吸顶效果)
//水平垂直居中
<template>
<view class="wrapper">
<view class="box"></view>
</view>
</template>
<style scoped>
.wrapper{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #cccccc;
justify-content: center;
align-items: center;
}
.box{
width: 200px;
height: 200px;
background-color: #fc0000;
}
</style>
Android 兼容性
如果定位元素超过容器边界,在 Android 下,超出部分将不可见,原因在于 Android 端元素 overflow
默认值为 hidden
,但目前 Android 暂不支持设置 overflow: visible
。
transition
允许 CSS 的属性值在一定的时间区间内平滑地过渡。
设置过渡动画的属性名,设置不同样式 transition
效果的键值对,默认值为空,表示不执行任何过渡效果
参数名 | 描述 |
---|---|
width | 宽度参与过渡动画 |
height | 高度参与过渡动画 |
top | 顶部距离参与过渡动画 |
bottom | 底部距离参与过渡动画 |
left | 左侧距离参与过渡动画 |
right | 右侧距离参与过渡动画 |
background-color | 背景颜色参与过渡动画 |
opacity | 不透明度参与过渡动画 |
transform | 变换类型参与过渡动画 |
指定过渡的持续时间 (单位是毫秒),默认值是 0,表示没有动画效果。
指定请求过渡操作到执行过渡之间的时间间隔 (单位是毫秒或者秒),默认值是 0,表示没有延迟,在请求后立即执行过渡。
描述过渡执行的速度曲线,用于使过渡更为平滑。默认值是 ease
。下表列出了所有合法的属性:
参数名 | 描述 |
---|---|
ease | transition 过渡逐渐变慢的过渡效果 |
ease-in | transition 过渡慢速开始,然后变快的过渡效果 |
ease-out | transition 过渡快速开始,然后变慢的过渡效果 |
ease-in-out | transition 过渡慢速开始,然后变快,然后慢速结束的过渡效果 |
linear | transition 过渡以匀速变化 |
cubic-bezier(x1, y1, x2, y2) | 使用三阶贝塞尔函数中自定义 transition 变化过程,函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 cubic-bezier和 Bézier curve |
<template>
<view class="row">
<view class="box" :class="{'active':isActive}" @click="isActive = !isActive">
<image class="img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/9c877c50-2f0c-11eb-899d-733ae62bed2f.png" mode="aspectFill"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
"isActive":false
}
}
}
</script>
<style scoped>
.row{
align-items: center;
justify-content: center;
}
.box{
margin:20px;
align-items: center;
justify-content: center;
border-radius: 10px;
width:200rpx;
height:200rpx;
background-color: #007AFF;
transition-property: width, height, background-color;
transition-duration:0.3s;
transition-delay:0.1s;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}
.active{
width:300rpx;
height:300rpx;
background-color: #6bd8ff;
}
.img{
width:80rpx;
height:80rpx;
}
</style>
应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
参数名 | 描述 |
---|---|
translateX({<length/percentage>}) | X 轴方向平移,支持长度单位或百分比。 |
translateY({<length/percentage>}) | Y 轴方向平移,支持长度单位或百分比。 |
translate({<length/percentage>} {<length/percentage>}) | X 轴和 Y 轴方向同时平移,translateX + translateY 简写。 |
scaleX() | X 轴方向缩放,值为数值,表示缩放比例,不支持百分比。 |
scaleY() | Y 轴方向缩放,值为数值,表示缩放比例,不支持百分比。 |
scale() | X 轴和 Y 轴方向同时缩放,scaleX + scaleY 简写。 |
rotate(<angle/degree>) | 将元素围绕一个定点(由 transform-origin 属性指定)旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正,则顺时针方向旋转,否则逆时针方向旋转。 |
rotateX(<angle/degree>) | X 轴方向的旋转。 |
rotateY(<angle/degree>) | Y 轴方向的旋转。 |
rotateZ(<angle/degree>) | Z 轴方向的旋转。 |
perspective() | 指定了观察者与 z=0 平面的距离,使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大,而 z<0 时则比正常小,大小程度由该属性的值决定。Android 4.1及以上版本支持。 |
transform-origin {length/percentage/关键字(top/left/right/bottom)}: | 设置一个元素变形的原点,仅支持 2D 坐标。 |
除了
perspective
和transform-origin
,transition
支持了transform
的全部能力。 其中transform的rotate
和rotatez
等效.
<template>
<view class="card">
<view class="box">
<view class="row-box">
<view @click="isRotate = !isRotate" class="fill row-rotate " :class="{'rotate':isRotate}"></view>
</view>
<text>rotate(45deg) </text>
</view>
<view class="box">
<view class="row-box">
<view @click="isScale = !isScale" class="fill row-scale" :class="{'scale':isScale}"></view>
</view>
<text>scale(2)</text>
</view>
<view class="box">
<view class="row-box">
<view @click="isTranslateX = !isTranslateX" class="fill row-translateX" :class="{'translateX':isTranslateX}"></view>
</view>
<text>translateX(45px)</text>
</view>
<view class="box">
<view class="row-box">
<view @click="isTranslateY = !isTranslateY" class="fill row-translateY" :class="{'translateY':isTranslateY}"></view>
</view>
<text>translateY(45px)</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
"isRotate": false,
"isScale":false,
"isTranslateX":false,
"isTranslateY":false
}
},
}
</script>
<style>
.card {
width:710rpx;
margin:20rpx;
flex-direction:row;
flex-wrap: wrap;
}
.box{
width:355rpx;
height:355rpx;
justify-content: center;
align-items: center;
}
.row-box{
width:200rpx;
height:200rpx;
margin:10rpx;
background-color: #DDDDDD;
}
.fill{
width:200rpx;
height:200rpx;
position: relative;
background-color: #03A9F4;
opacity: 0.5;
}
.row-rotate{
transition-duration:0.3s;
transform:rotate(0deg);
}
.rotate{
transition-duration:0.3s;
transform:rotate(45deg);
}
.row-scale{
transition-duration:0.3s;
transform:scale(1);
}
.scale{
transform:scale(2);
}
.row-translateX{
transition-duration:0.3s;
transform:translateX(0px);
}
.translateX{
transform:translateX(45px);
}
.row-translateY{
transition-duration:0.3s;
transform:translateY(0px);
}
.translateY{
transform:translateY(45px);
}
</style>
参数名 | 描述 |
---|---|
active | 所有组件都支持 |
focus | 只有 input 组件和 textarea 组件支持 |
disabled | 只有 input 组件和 textarea 组件支持 |
enabled | 只有 input 组件和 textarea 组件支持 |
注意
同时生效的时候,优先级高覆盖优先级低。 例如:
input:active:enabled
和input:active
同时生效,前者覆盖后者
- 互联规则如下所示
所有组件均支持线性渐变。CSS3 渐变
你可以通过 background-image
属性创建线性渐变。
background-image:linear-gradient(to bottom right,#AD18F9,#05DFC7);
只支持两种颜色的渐变,渐变方向如下:
渐变方向 | 描述 |
---|---|
to right | 从左向右渐变 |
to left | 从右向左渐变 |
to bottom | 从上到下渐变 |
to top | 从下到上渐变 |
to bottom right | 从左上角到右下角 |
to top left | 从右下角到左上角 |
注意
background-image
优先级高于background-color
,这意味着同时设置background-image
和background-color
,background-color
被覆盖。background
不支持简写。目前暂不支持 radial-gradient(径向渐变)。
{box-shadow:inset offset-x offset-y blur-radius color}
{box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色}
参数 | 描述 |
---|---|
inset(可选) | 默认阴影在边框外。使用 inset 后,阴影在边框内(即使是透明边框),背景之上内容之下。 |
offset-x | 设置水平偏移量,如果是负值则阴影位于元素左边。 |
offset-y | 设置垂直偏移量,如果是负值则阴影位于元素上面。 |
blur-radius | 设置模糊半径,px 单位长度值,值越大,模糊面积越大,阴影就越大越淡。不能为负值。默认为0,此时阴影边缘锐利。 |
color | 设置阴影颜色 |
示例
.box4 {
box-shadow: inset 3px 5px 20px rgb(255, 69, 0);
}
注意
- 目前仅 iOS 支持
box-shadow
属性,Android 暂不支持,可以使用elevation
或者图片代替。 - 每个元素只支持设置一个阴影效果,不支持多个阴影同时作用于一个元素。
Android平台weex对阴影样式(box-shadow)支持不完善,如设置圆角边框时阴影样式显示不正常、设置动画时在Android7上显示不正常、在Android10上出现闪烁现象等。
为解决这些问题,从HBuilderX 2.4.7起,新增elevation属性(组件的属性,不是css样式)设置组件的层级,Number类型,层级值越大阴影越明显,阴影效果也与组件位置有关,越靠近页面底部阴影效果越明显
用法
<view elevation="5px"></view>
- 设置
elevation
属性产生的阴影暂时无法修改颜色 - 设置
elevation
后当前组件的层级会高于其他未设置elevation组件的层级,都设置elevation
值域越大则层级越高!组件覆盖的场景需要留意 - 为了避免
elevation
属性的阴影效果与阴影样式(box-shadow
)冲突,设置elevation
属性后box-shadow
样式失效 - 使用
elevation
需要阴影元素的父元素大于阴影范围,否则会对阴影进行裁剪 - IOS不支持
elevation
属性,请使用box-shadow
设置阴影
color {color}:文字颜色,支持如下字段:
- RGB( rgb(255, 0, 0) )
- RGBA( rgba(255, 0, 0, 0.5) )
- 十六进制( #ff0000 );
- 精简写法的十六进制( #f00 )
- 色值关键字(red)
只有
text
标签可以设置字体颜色
font-size {number}:文字大小,只有text
标签可以设置字体大小
font-style {string}:字体类别。可选值 normal
| italic
,默认为 normal
。
font-weight {string}:字体粗细程度。默认值: normal
;
- 可选值:
normal
,bold
, 100, 200, 300, 400, 500, 600, 700, 800, 900 normal
等同于 400,bold
等同于 700;- iOS 支持 9 种
font-weight
值;Android 仅支持 400 和 700, 其他值会设为 400 或 700 - 类似
lighter
,bolder
这样的值暂时不支持
text-decoration {string}
:字体装饰。默认值为 none
。
可选值 | 描述 |
---|---|
none | 默认。定义标准的文本 |
underline | 定义文本下的一条线 |
line-through | 定义穿过文本下的一条线 |
只支持
text
和ricthext
不支持
text-decoration:overline
text-align {string}
:对齐方式。默认值为 left
。
可选值 | 描述 |
---|---|
left | 把文本排列到左边 |
center | 把文本排列到中间 |
right | 把文本排列到右边 |
不支持
text-align:justify
font-family {string}
:设置字体。这个设置不保证在不同平台,设备间的一致性。
如所选设置在平台上不可用,将会降级到平台默认字体。
如果需要加载自定义字体,请参考相关DOM.addRule
text-overflow {string}
:设置内容超长时的省略样式。
可选值 | 描述 |
---|---|
clip | 修剪文本 |
ellipsis | 显示省略符号来代表被修剪的文本 |
只支持
text
和ricthext
lines {number}
: 正整数,指定最大文本行数,默认lines
值为0,表示不限制最大行数lines
。如果文本不够长,实际展示行数会小于指定行数。
line-height {length}: 正整数,每行文字高度。line-height
是 top 至 bottom的距离。
line-height
与font-size
没有关系,因为line-height
被 top 和 bottom 所限制,
font-size
被 glyph 所解析。line-height
和font-size
相等一般会导致文字被截断。
word-wrap:<string>
对nvue来说 anywhere
表示在以字符为最小元素做截断换行,其它值或不指定该属性,都以英文单词为单位进行换行。
可选值 | 描述 |
---|---|
break-word | 在长单词或 URL 地址内部进行换行 |
normal | 只在允许的断字点换行 |
anywhere | 以字符为最小元素做截断换行 |