跳到主要内容

空态 Empty

空态占位图,常用于加载失败、加载数据为空等场景。

安装使用

import { TiEmpty } from '@titian-design/mobile-react';

用法示例

基本用法

const App: React.FC = () => {
return (
<>
<TiEmpty />
</>
)
}

设置标题

const App: React.FC = () => {
return (
<>
<TiEmpty title="空态页说明文案" />
</>
)
}

设置标题、副标题

const App: React.FC = () => {
return (
<>
<TiEmpty title="空态页说明文案" subTitle="补充说明文案请尽量简短" />
</>
)
}

设置 ext-style 样式

const App: React.FC = () => {
return (
<>
<TiEmpty title="空态页说明文案" extStyle="margin:20px 0 " />
</>
)
}

设置 ext-class

const App: React.FC = () => {
return (
<>
<TiEmpty title="空态页说明文案" extClass="ext-class" />
</>
)
}

设置 size

const App: React.FC = () => {
return (
<>
<TiEmpty title="空态页说明文案" size="big" />
</>
)
}

设置 image

const App: React.FC = () => {
return (
<>
<TiEmpty title="空态页说明文案" image="https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png" />
</>
)
}

TiEmpty API

属性 Properties

名称类型必填默认值说明备注
imagestringhttps://cdn2.weimob.com/saas/saas-fe-sirius-orion-node/production/145/searchwithnoresult.png图片网址
sizemedium | bigmedium尺寸
titlestring-标题-
subTitlestring-副标题-
useImageSlotbooleanfalse是否启用 image 插槽-
useTitleSlotbooleanfalse是否启用 title 插槽-
extStylestring-容器样式-

插槽 Slots

名称说明备注
image自定义图片展示-
title自定义标题块展示-
bottom自定义底部块展示-

外部样式类 External Classes

名称说明备注
extClass根节点可扩展的类名-

CSS 变量 CSS Variables

变量默认值说明备注
--empty-medium-size200px中间尺寸下图片大小-
--empty-medium-title-margin-top@gap-28中间尺寸下标题距离图片的上外边距-
--empty-big-size240px大尺寸下图片大小-
--empty-big-title-margin-top@gap-32大尺寸下标题距离图片的上外边距-
--empty-title-colorvar(--neutral-color-2, #757575)标题区文字颜色-
--empty-sub-title-colorvar(--neutral-color-4, #c4c4c4)副标题区文字颜色-
--empty-min-width100%empty 最小宽度-
--empty-min-height485pxempty 最小高度-
--empty-width100%empty 宽度-
--empty-height100%empty 高度-