视觉规范 Visual Guidelines

空白状态 Empty State

  1. 有按钮
  2. 无按钮
  3. Vue.js Reference
  4. React Native Reference

当前页面数据为空或错误的时候，使用空白页样式。 使用简单插画形式和简要文字叙述标明当前状态，有助于减轻用户焦虑，帮助用户理解状况和引导下一步操作。 如需新增样式，插画风格应参考现有空白页插画风格。 空白页依有无按钮共分为两种样式。

有按钮

当前空白页包含一个操作，例如刷新、跳转等，统一使用带一个按钮的空白页样式。

<up-emptystates :image="image" text="没有网络连接，要不要再试试？">
	<up-button @click="handleBtn">刷新</up-button>
</up-emptystates>

<script>
export default {
  data () {
    return {
      image:require("../img/empty_img1.svg")
    }
  },
  methods:{
    handleBtn(){
      console.log('刷新')
    }
  }
}
</script>

import {EmptyState} from 'up-qp-dls';

<View style={{flex:1, flexDirection:'column', justifyContent:'center'}}>
	<EmptyState image={require('../img/emptyState1.png')} text="没有网络连接，要不要再试试？" button={<Button title='刷新' type='primary' onPress={() => {}} />} />
      </View>

无按钮

当前空白页仅表明状态，无相关操作。

<up-emptystates :image="image" text="您还没有积分"></up-emptystates>

<script>
export default {
  data () {
    return {
      image:require("../img/empty_img2.svg")
    }
  }
}
</script>

import {EmptyState} from 'up-qp-dls';

<View style={{flex:1, flexDirection:'column', justifyContent:'center'}}>
	<EmptyState image={require('../img/emptyState2.png')} text="您还没有积分" />
</View>

Vue.js Reference

属性 说明 类型 可选值 默认值
image 图片地址 String - -
text 描述文字 String - -

插槽

名字 说明 参数
默认插槽 可传入按钮组件，不传入则不显示按钮 -

React Native Reference

属性 说明 类型 可选值 默认值
image 图片资源 Image.propTypes.source, PropTypes.element - -
text 描述文字 String, Number - -
button 可传入按钮组件，不传入则不显示按钮。 PropTypes.element - -