VEUI

VEUI on GitHub
Play!中文

Loading

Examples

Style Variants

Available style variants for the ui prop: normal / strong / reverse.

Normal
Strong
Reverse
Edit this demo on GitHubEdit
<template>
<article>
  <veui-loading
    class="loading"
    loading
    ui="normal"
  >
    Normal
  </veui-loading>
  <veui-loading
    class="loading"
    loading
    ui="strong"
  >
    Strong
  </veui-loading>
  <veui-loading
    class="loading reverse"
    loading
    ui="reverse"
  >
    Reverse
  </veui-loading>
</article>
</template>

<script>
import { Loading } from 'veui'

export default {
  components: {
    'veui-loading': Loading
  }
}
</script>

<style lang="less" scoped>
.loading {
  margin-left: 1em;
}

.reverse {
  background: #ccc;
  padding: 8px;
}
</style>

Size Variants

Available size variants for the ui prop: s / m / l.

s
m
l
s
m
l
s
m
l
Edit this demo on GitHubEdit
<template>
<article>
  <div class="container">
    <veui-loading
      class="loading"
      loading
      ui="s"
    >
      s
    </veui-loading>
    <veui-loading
      class="loading"
      loading
      ui="m"
    >
      m
    </veui-loading>
    <veui-loading
      class="loading"
      loading
      ui="l"
    >
      l
    </veui-loading>
  </div>
  <div class="container">
    <veui-loading
      class="loading"
      loading
      ui="strong s"
    >
      s
    </veui-loading>
    <veui-loading
      class="loading"
      loading
      ui="strong m"
    >
      m
    </veui-loading>
    <veui-loading
      class="loading"
      loading
      ui="strong l"
    >
      l
    </veui-loading>
  </div>
  <div class="container">
    <veui-loading
      class="loading reverse"
      loading
      ui="reverse s"
    >
      s
    </veui-loading>
    <veui-loading
      class="loading reverse"
      loading
      ui="reverse m"
    >
      m
    </veui-loading>
    <veui-loading
      class="loading reverse"
      loading
      ui="reverse l"
    >
      l
    </veui-loading>
  </div>
</article>
</template>

<script>
import { Loading } from 'veui'

export default {
  components: {
    'veui-loading': Loading
  }
}
</script>

<style lang="less" scoped>
.reverse {
  background: #ccc;
  padding: 8px;
}

.loading {
  margin-left: 1em;
}

.container {
  margin-bottom: 2em;
}
</style>

Layout

Available layout variant for the ui prop: vertical.

Horizontal
Vertical
Edit this demo on GitHubEdit
<template>
<article class="container">
  <veui-loading
    class="loading"
    loading
  >
    Horizontal
  </veui-loading>
  <veui-loading
    loading
    ui="vertical"
  >
    Vertical
  </veui-loading>
</article>
</template>

<script>
import { Loading } from 'veui'

export default {
  components: {
    'veui-loading': Loading
  }
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  align-items: flex-end;

  .loading {
    margin-left: 1em;
  }
}
</style>

Custom Spinner

Customize the loading spinner by using the spinner slot.

Custom icon-star:
loading...
Custom icon-sync:
loading...
Custom icon-clockwise:
loading...
Edit this demo on GitHubEdit
<template>
<article>
  <section>
    Custom icon-star:
    <veui-loading
      loading
      ui="strong"
    >
      <template #spinner>
        <veui-icon
          spin
          name="star"
        />
      </template>
      loading...
    </veui-loading>
  </section>
  <section>
    Custom icon-sync:
    <veui-loading loading>
      <template #spinner>
        <veui-icon
          spin
          name="sync"
        />
      </template>
      loading...
    </veui-loading>
  </section>
  <section>
    Custom icon-clockwise:
    <veui-loading
      loading
      ui="reverse"
      class="reverse"
    >
      <template #spinner>
        <veui-icon
          spin
          name="clockwise"
        />
      </template>
      loading...
    </veui-loading>
  </section>
</article>
</template>

<script>
import { Icon, Loading } from 'veui'
import 'veui-theme-dls-icons/sync'
import 'veui-theme-dls-icons/star'
import 'veui-theme-dls-icons/clockwise'

export default {
  components: {
    'veui-icon': Icon,
    'veui-loading': Loading
  }
}
</script>

<style lang="less" scoped>
.reverse {
  background: #ccc;
  padding: 8px;
}

.section {
  margin-bottom: 20px;
}
</style>

API

Props

NameTypeDefaultDescription
uistring-

Preset style variants. A combination of space-separated enum values.

ValueDescription
strongStronger visual style.
reverseReverse visual style, for use on dark backgrounds.
verticalVertical layout style.
sSmall size variant.
mMedium size variant.
lLarge size variant.
loadingbooleanfalseWhether the component is in the loading state.

Slots

NameDescription
spinnerCustom loading spinner.
defaultText to display while loading.
Edit this page on GitHubEdit
© Baidu, Inc. 2024