ActivityIndicator 活动指示器

QR

扫二维码查看演示效果

活动指示器

Code Example

<template>
  <div>
    <WingBlank>
      <h3>基本</h3>
      <p>Without text</p>
      <ActivityIndicator></ActivityIndicator>
      <p>With text</p>
      <ActivityIndicator text="loading..." size="small" />
      <p>With large size and customized text style</p>
      <ActivityIndicator size="large" />
      <div>Loading...</div>

      <ActivityIndicator toast :animating="isAnimating" text="Loading" />
    </WingBlank>
    <WhiteSpace size="xl" />
    <Button :onClick="showToast">click to show Toast</Button>
  </div>
</template>

<script>
  import WingBlank from '@/components/wing-blank'
  import Button from '@/components/button'
  import WhiteSpace from '@/components/white-space'
  import ActionSheet from '@/components/action-sheet'
  import ActivityIndicator from '@/components/activity-indicator'

  export default{
    components: {
      WingBlank,
      ActionSheet,
      Button,
      WhiteSpace,
      ActivityIndicator
    },
    data () {
      return {
        isAnimating: false
      }
    },
    methods: {
      showToast () {
        this.isAnimating = true
        setTimeout(() => {
          this.isAnimating = false
        }, 1000)
      }
    }
  }
</script>

<style scoped>
p {
  color: #888;
}
</style>

props

属性	说明	类型	默认值
animating	显隐状态	boolean	true
size	spinner大小，可选small/large	string	small
text	loading文本	string	loading...
toast	loading样式类型	boolean	false
align	垂直排列还是水平排列，可选值horizontal，vertical	string	horizontal
textStyle	自定义文本样式	string	无

https://ladybirddev.github.io/ui-nuclear-mobile-demo/#/activity-indicator