空态 Empty

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

使用

API

安装使用

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

用法示例

基本用法

基本用法

单独使用

codesanbox

copy

code

import React from 'react';
import { TiEmpty } from 'titian-h5-react';

export default function App() {
  return (
    <div className="empty-content">
      <TiEmpty />
    </div>
  );
}

使用ExtStyle样式

• App.jsx
• style.module.scss

code

codesanbox

copy

code

import React from 'react';
import { TiEmpty } from 'titian-h5-react';
import './style.module.scss';

export default function App() {
  return (
    <div className="empty-content">
      <TiEmpty title="空态页说明文案" extStyle="margin:20px 0 " />
    </div>
  );
}

codesanbox

copy

code

.empty-content {
  width: 100%;
  padding: 16px;
  background-color: #fff;
}

.ext-class {
  margin: 20px 0;
}

使用ExtClass样式

• App.jsx
• style.module.scss

code

codesanbox

copy

code

import React from 'react';
import { TiEmpty } from 'titian-h5-react';
import './style.module.scss';

export default function App() {
  return (
    <div className="empty-content">
      <TiEmpty title="空态页说明文案" extClass="ext-class" />
    </div>
  );
}

codesanbox

copy

code

.empty-content {
  width: 100%;
  padding: 16px;
  background-color: #fff;
}

.ext-class {
  margin: 20px 0;
}

使用标题、副标题

• App.jsx
• style.module.scss

code

codesanbox

copy

code

import React from 'react';
import { TiEmpty } from 'titian-h5-react';
import './style.module.scss';

export default function App() {
  return (
    <div className="empty-content">
      <TiEmpty title="空态页说明文案" subTitle="补充说明文案请尽量简短" />
    </div>
  );
}

codesanbox

copy

code

.empty-content {
  width: 100%;
  padding: 16px;
  background-color: #fff;
}

.ext-class {
  margin: 20px 0;
}

使用Size

codesanbox

copy

code

import React from 'react';
import { TiEmpty } from 'titian-h5-react';

export default function App() {
  return (
    <div className="empty-content">
      <TiEmpty title="空态 size=big" size="big" />
      <TiEmpty title="空态 size=medium" size="medium" />
    </div>
  );
}

使用自定义图片

• App.jsx
• style.module.scss

code

codesanbox

copy

code

import React from 'react';
import { TiEmpty } from 'titian-h5-react';
import './style.module.scss';

export default function App() {
  return (
    <div className="empty-content">
      <TiEmpty
        title="空态页说明文案"
        image="https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png"
      />
    </div>
  );
}

codesanbox

copy

code

.empty-content {
  width: 100%;
  padding: 16px;
  background-color: #fff;
}

.ext-class {
  margin: 20px 0;
}

TiEmpty API

属性 Properties

名称	类型	必填	默认值	说明	备注
image	string	否	https://cdn2.weimob.com/saas/saas-fe-sirius-orion-node/production/145/searchwithnoresult.png	图片网址
size	medium | big	否	medium	尺寸
title	string	否	-	标题	-
subTitle	string	否	-	副标题	-
useImageSlot	boolean	否	false	是否启用 image 插槽	-
useTitleSlot	boolean	否	false	是否启用 title 插槽	-
extStyle	string	否	-	容器样式	-

插槽 Slots

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

外部样式类 External Classes

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

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%	高度	-