代码拉取完成,页面将自动刷新
空状态组件,用于在数据为空时展示。
import { Empty } from "@ls-design/ui-react";
<Empty />
<Empty title="描述文字" desc="快去添加数据吧~" />
<Empty title="暂无数据" desc="快去添加数据吧~" buttontext="快去下单吧" />
<Empty
title="暂无数据"
desc="快去添加数据吧~"
buttontext="快去下单吧"
type="local"
/>
通过 imagesize
属性图片的大小。
<!-- 不指定单位,默认为 px -->
<Empty desc="描述文字" imagesize="100" />
<!-- 指定单位,支持 rem, vh, vw -->
<Empty desc="描述文字" imagesize="100rem" />
通过 image
属性中传入任意图片 URL。
<Empty
desc="描述文字"
imagesize="100"
image="https://m.hellobike.com/resource/helloyun/13459/fkntv_custom-empty-image.png"
/>
<Empty desc="快去下一单吧" title="没有历史订单">
<div slot="footer">
<div>自定义底部</div>
</div>
</Empty>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题文字 | string |
|
desc | 描述文字 | string |
|
image | 图片 url | string |
|
imagesize | 图片大小 | string |
|
buttontext | 底部按钮文字 | string |
|
type | 全局空白页 or 局部空白页 | string |
global |
组件提供了以下 CSS变量,可用于自定义样式
名称 | 说明 | 默认值 |
---|---|---|
--empty-padding |
空白页容器内边距 | 32px 0 |
--empty-title-font-size |
标题字体大小 | 16px |
--empty-image-width |
图片宽度 | 191px |
--empty-title-color |
标题字体颜色 | #242729 |
--empty-title-line-height |
标题字体行高 | 22px |
--empty-title-white-space |
标题是否换行 | pre-wrap |
--empty-desc-font-size |
描述字体大小 | |
--empty-desc-color |
描述字体颜色 | #969799 |
--empty-desc-line-height |
描述字体行高 | 20px |
--empty-desc-width |
描述字体最大宽度 | |
--empty-desc-white-space |
描述是否换行 | pre-wrap |
--empty-button-font-size |
按钮文字大小 | 16px |
--empty-button-text-color |
按钮文字颜色 | #fff |
--empty-button-margin-top |
按钮文字间距 | 20px |
--empty-button-background-color |
按钮背景色 | #0088ff |
--empty-button-line-height |
按钮文字行高 | 22px |
--empty-button-padding-column |
按钮上下内边距 | 9px |
--empty-button-padding-row |
按钮左右内边距 | 34px |
--empty-button-border-radius |
按钮圆角 | 20px |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。