多行混排(aip-inline-view)
不同于aip-view默认使用块状布局,aip-inline-view
提供给开发者行内布局的排版方式。其内部可以包裹aip-inline-view-text
和aip-inline-view-image
进行文字或图片的行内拍牌不,实现多行图文混排的效果。
示例
<aip-inline-view>
外部文本内容
<aip-inline-view-text style="color: red;"> 文本内容 </aip-inline-view-text>
<aip-inline-view-image width="100rpx" height="30rpx" src="http://example.com/a.jpg">
</aip-inline-view-image>
</aip-inline-view>
1
2
3
4
5
6
2
3
4
5
6
aip-inline-view
内联容器
- 必须在最外层声明
aip-inline-view
才能使用aip-inline-view-image
和aip-inline-view-text
- 支持直接嵌套文本内容
aip-inline-view-text
内联文本,仅支持文本子节点
aip-inline-view-image
内联图片,与 aip-image
支持参数不同,仅支持 src
、width
、height
,不支持 mode
,不支持子节点
属性名称 | 类型 | 必填 | 说明 |
---|---|---|---|
src | string | 是 | 该属性与 img 标记中的 src 属性类似。该属性的值必须是指向可公开缓存的图片文件的网址。提取 AIP 文件以指向相应图片的缓存版本时,缓存提供商可能会重写这些网址。 |
height/width | number/string | 是 | 图片的确切尺寸,供 AIP 框架用于在不抓取图片的情况下确定图片宽高比。 |