1 Star 0 Fork 0

LS/ls-design

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
zh-CN-react.md 3.37 KB
一键复制 编辑 原始数据 按行查看 历史

Empty


简介

空状态组件,用于在数据为空时展示。

安装使用

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>

Props

参数 说明 类型 默认值
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
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/LShere/ls-design.git
git@gitee.com:LShere/ls-design.git
LShere
ls-design
ls-design
master

搜索帮助