多行混排(aip-inline-view)

不同于aip-view默认使用块状布局,aip-inline-view提供给开发者行内布局的排版方式。其内部可以包裹aip-inline-view-textaip-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

aip-inline-view

内联容器

  • 必须在最外层声明 aip-inline-view 才能使用 aip-inline-view-imageaip-inline-view-text
  • 支持直接嵌套文本内容

aip-inline-view-text

内联文本,仅支持文本子节点

aip-inline-view-image

内联图片,与 aip-image 支持参数不同,仅支持 srcwidthheight,不支持 mode,不支持子节点

属性名称类型必填说明
srcstring该属性与 img 标记中的 src 属性类似。该属性的值必须是指向可公开缓存的图片文件的网址。提取 AIP 文件以指向相应图片的缓存版本时,缓存提供商可能会重写这些网址。
height/widthnumber/string图片的确切尺寸,供 AIP 框架用于在不抓取图片的情况下确定图片宽高比。
Last Updated: 2022/7/15 下午7:22:06