页面样式

在 AIP 页面中，你可以快速对类和样式进行绑定，因为广告页面是十分重视样式的场景，而传统的类和样式书写较为麻烦，所以 AIP 页面对类和样式进行的增强处理。

样式基准

AIP 中所有的 CSS 样式定义都需要内联使用，并且所有样式写在 <style aip-custom></style> 中，注意：该 style 标签仅允许出现一次。

例子：

<style aip-custom>
    .page-title {
        color: red;
    }
</style>

1
2
3
4
5

AIP 页面主要场景是移动端，所以新增了 rpx 单位来进行移动端适配。

在 rpx 布局中，开发者无论设备的真实分辨率，均将其当做 iPhone 8 的 750 屏幕实现，组件缩放比例均保持一致。

在 rpx 布局中，1 rpx 长度 = 1/750 * 屏幕宽度

因此对应 375pt 的 Figma 设计稿，在书写样式代码时，若原有的长度为 n，则样式为 (2n) rpx

/* 375设计稿 40x40的盒子 */
.box {
    width: 80rpx;
    height: 80rpx;
}

1
2
3
4
5

原生的 HTML 仅支持字符串的类名，每个类名需要用空格隔开，而 AIP 提供了对象和数组的支持，你可以直接写一个对象或数组。

采用中括号 [] 绑定 class 属性，代表其对应的值是需要执行的，这时候可以填写一个对象，当对象的值为真值时，对应的键的名称会被当做类名加入到元素中：

<div [class]="{ green: true }"></div>

上面的示例最终会给 div 元素加上 green 类。

AIP 同时支持数组类型的类绑定，最终会将数组展开绑定到元素的类上。

<div [class]="['green']"></div>

你也可以书写表达式：

<div [class]="[ isGreen ? 'green' : 'default']"></div>

原生的 HTML 仅支持字符串的样式，每个样式名需要用;隔开，而 AIP 提供了对象和数组的支持，你可以直接写一个对象或数组。

采用中括号 [] 绑定 style 属性，代表其对应的值是需要执行的，这时候可以填写一个对象：

<div [style]="{ color: 'green', fontSize: '16px' }">绿色中型按钮</div>

上面的示例最终会渲染为：

<div style="color:green;fontSize:16px">绿色中型按钮</div>

AIP 同时支持数组类型的样式绑定，最终会将数组中的样式合并到一个样式中：

<div [style]="[{color:'green'}, {fontSize:'16px'}]">绿色中型按钮</div>