空态 Empty
空态占位图，常用于加载失败、加载数据为空等场景。
使用
API用法示例
基本用法
<ti-empty></ti-empty>
设置标题
<ti-empty title="空态页说明文案"></ti-empty>
设置标题,副标题
<ti-empty title="空态页说明文案" sub-title="补充说明文案请尽量简短"></ti-empty>
设置 ext-style 样式
<ti-empty title="空态页说明文案" ext-style="margin:20rpx 0 "></ti-empty>
设置 ext-class
<ti-empty title="空态页说明文案" ext-class="ext-class"></ti-empty>
设置 size
<ti-empty title="空态页说明文案" size="big"></ti-empty>
设置 image
<ti-empty title="空态页说明文案" image="https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png"></ti-empty>
ti-empty API
属性 Properties
| 名称 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| image | string | 否 | https://cdn2.weimob.com/saas/saas-fe-sirius-orion-node/production/145/searchwithnoresult.png | 图片网址 | |
| size | medium | big | 否 | medium | 尺寸 | |
| title | string | 否 | - | 标题 | - |
| sub-title | string | 否 | - | 副标题 | - |
| use-image-slot | boolean | 否 | false | 是否启用 image 插槽 | - |
| use-title-slot | boolean | 否 | false | 是否启用 title 插槽 | - |
| ext-style | string | 否 | - | 容器样式 | - |
插槽 Slots
| 名称 | 说明 | 备注 |
|---|---|---|
| image | 自定义图片展示 | - |
| title | 自定义标题块展示 | - |
| bottom | 自定义底部块展示 | - |
外部样式类 External Classes
| 名称 | 说明 | 备注 |
|---|---|---|
| ext-class | 根节点可扩展的类名 | - |
CSS 变量 CSS Variables
| 变量 | 默认值 | 说明 | 备注 |
|---|---|---|---|
--empty-medium-size | 200px | 中间尺寸下图片大小 | - |
--empty-big-size | 240px | 大尺寸下图片大小 | - |
--empty-middle-gap | theme.spacing.vertical.v7 | 标题距离图片的间距（size = 中号 medium） | - |
theme.spacing.vertical.v8 | 标题距离图片的间距（size = 大号 big） | - | |
--empty-title-color | theme.color.gray.texticon.550 | 标题区文字颜色 | - |
--empty-sub-title-color | theme.color.gray.texticon.250 | 副标题区文字颜色 | - |
--empty-min-width | 100% | 最小宽度 | - |
--empty-min-height | 485px | 最小高度 | - |
--empty-width | 100% | 宽度 | - |
--empty-height | 100% | 高度 | - |