模板样式 - NVeiw模板 - wap2app教程

NView模板中，控件样式需通过控件标签的style属性定义，类似HTML的内联样式，语法如下：

    <element style="property1:value1;property2:value2;">

NView模板的样式属性是CSS的子集，本文主要介绍NView模板支持的样式定义。

Tips：所有样式定义均需通过标签的style属性设置，目前不支持link外部css文件，也不支持style标签（）定义内部样式；

align（对齐）

定义NView控件元素在水平、垂直方向的对齐方式，目前支持的属性包括：

• align
• vertical-align

align

控件元素在父容器中的水平对齐方式，可取值：

• left - 水平居左对齐；
• center - 水平居中对齐；
• right - 水平居右对齐

默认值为center。

vertical-align

控件元素在父容器中的垂直对齐方式，可取值：

• top - 垂直居顶对齐；
• middle - 垂直居中对齐；
• bottom - 垂直居底对齐

默认值为middle

background（背景）

定义NView控件元素的背景颜色，目前仅支持background-color一个属性，示例：

    <nview id="nview1" style="background-color: #56C1FF;"></nview>

颜色值有两种方式：

• 十六进制，如："#ff0000";
• RGBA方式，如："rgba(255,0,0,0.8)"

border（边框）

定义NView控件元素边框的样式和颜色，目前支持的属性包括：

• border-color
• border-radius
• border-width

border-color

控件边框的颜色，可取值：

• 十六进制，如："#ff0000";
• RGBA方式，如："rgba(255,0,0,0.8)"

默认值为控件的背景颜色值。

border-radius

控件圆角半径像素值，数字加"px"格式字符串，如"5px"。

border-width

控件边框宽度像素值，数字加"px"格式字符串，如"1px"。

font（字体）

定义NView控件元素的文字颜色、带下、加粗等样式，目前支持的属性包括：

• color
• font-size
• font-weight
• font-style
• text-overflow
• white-space

color

文本字体颜色，可取值：

• 十六进制，如："#ff0000";
• RGBA方式，如："rgba(255,0,0,0.8)"

默认值为"#000000"（黑色）

font-size

文本字体大小，可取值：字体高度像素值，数字加"px"格式字符串，如"12px"。 默认值为"16px"。

font-style

文本字体样式，可取值：

• normal - 正常字体样式；
• italic - 斜体样式。

默认值为normal。

font-weight

文本字体粗细，可取值：

• normal - 普通字体；
• bold - 粗字体

默认值为normal。

text-overflow

文本内容超出显示区域时处理方式，可取值：

• clip - 超出显示区域时内容裁剪；
• ellipsis - 超出显示区域时尾部显示省略标记（...）

默认值为clip。

Tips：text-overflow属性在richtext容器下无效。

white-space

文本换行模式，可取值：

• nowrap - 不换行，将所有文本在一行中绘制，忽略换行符("\n")；
• normal - 自动换行，当指定的宽度无法绘制所有文本时自动换行绘制，碰到'\n'字符时强制换行。

默认值为nowrap。

position（定位）

定义NView控件元素的位置信息，目前支持的属性包括：

• top
• height
• bottom
• left
• width
• right
• position

Tips：richtext标签下的元素为流式布局，不支持通过如上属性设置位置信息；

top

NView模板控件元素相对于父容器的向下的偏移量，可取值：

• 像素值，如"100px"；
• 百分比，如"10%"，相对于父容器的高度自动计算；

height

NView模板控件元素的高度，可取值：

• 像素值，如"100px";
• 百分比，如"10%"，相对于父容器的高度进行计算

bottom

NView模板控件元素相对于父容器向上的偏移量，可取值：

像素值，如"100px";
百分比，如"10%"，相对于父容器的高度计算。

控件元素的垂直位置，可以通过top/height/bottom三个属性共同确定，其中：

• 当设置了top和height值时，忽略bottom属性值；
• 当未设置top值时，可通过bottom和height属性值来确定垂直位置；
• 当未设置height值时，可通过top和bottom属性值来确定元素的高度

left

NView模板控件元素相对于父容器的向右的偏移量，可取值：

• 像素值，如"100px"；
• 百分比，如"10%"，相对于父容器的宽度自动计算；

width

NView模板控件元素的宽度，可取值：

• 像素值，如"100px";
• 百分比，如"10%"，相对于父容器的宽度进行计算

right

NView模板控件元素相对于父容器向左的偏移量，可取值：

• 像素值，如"100px";
• 百分比，如"10%"，相对于父容器的宽度

控件元素的水平位置，可以通过left/width/right三个属性共同确定，其中：

• 当设置了left和width值时，忽略right属性值；
• 当未设置left值时，可通过right和width属性值来确定水平位置；
• 当未设置width值时，可通过left和right属性值来确定元素的宽度

position

nview控件在webview中的排版方式，可取值：

• static - View控件在页面中正常定位，如果页面存在滚动条，则View控件跟随窗口内容一起滚动；
• absolute - Veiw控件在页面中绝对定位，如果页面存在滚动条，View控件显示在屏幕固定位置，不随窗口内容滚动，常用于底部选项卡、购物车等固定显示在特定位置的场景；

注意：position属性仅对标签元素有用，区别于css中的position属性，NView模板中的position仅表示NView控件是否随着webview页面内容一起滚动，默认为static（随着webview一起滚动）；在static排版方式下，依然可以通过坐标位置确定NView控件的位置信息。