Lin UI

#
状态展示页 StatusShow

展示页面当前的状态。

# 展示与隐藏状态展示页

设置show属性控制状态展示的隐藏与显示。默认值为false。

# 示例代码

<l-status-show show="{{true}}"></l-status-show>

# 状态展示类型

通过type属性设置为success、error、network、cart、order、address、data、product创建不同类型状态展示页。默认值为success。

# 示例代码

<l-status-show show="{{true}}" type="success"></l-status-show>

# 按钮文案

通过button-text属性设置按钮内的文案。

注意事项

按钮文案存在时按钮才会显示。当type属性设置为cart、network时有默认按钮文案， 可通过button-text属性进行覆盖。

# 示例代码

<l-status-show show="{{true}}" type="success" button-text="返回"></l-status-show>

# 自定义图标及文案描述

通过设置image属性和describe属性设置图片和文案描述。

# 示例代码

<l-status-show show="{{true}}" image="../../image.png" describe="我是描述文案"></l-status-show>

# 自定义背景色

通过设置bg-color属性设置状态展示页背景色。

# 示例代码

<l-status-show bg-color="f3f3f3" show="{{true}}"></l-status-show>

# 自定义状态展示页

通过设置custom属性可设置自定义状态展示页。通过slot传入自定义的状态展示内容。

# 示例代码

<l-status-show show="{{true}}">
  <image src="../../image.png" />
</l-status-show>

# 状态展示页属性

参数 说明 类型 可选值 默认值
show 显示与隐藏状态展示页 Boolean ---- fasle
type 状态展示页类型 String success/error/network/cart/order/address/data success
full-screen 是否全屏显示 Boolean ---- true
button-text 按钮文案 String ---- ---
image 自定义图片 String ---- ---
describe 自定义描述文案 String ---- ---
custom 自定义状态展示页 Boolean ---- false
bg-color 自定义状态展示页背景色 String ---- #fff

# 状态展示页外部样式类

外部样式类名 说明 备注
l-class 覆盖整体的外部样式类 ---
l-image-class 覆盖图片部分的外部样式类 ---
l-describe-class 覆盖文案描述部分的外部样式类 ---
l-button-class 覆盖按钮部分的外部样式类 ---

# 状态展示页事件

事件名称 说明 返回值 备注
bind:lintap 点击按钮触发的事件 --- ---
bind:lincovertap 点击状态页组件触发的事件 --- ---

    ← 标签 Tag →