替换初始加载微调器

Question

有没有办法在初始加载时替换加载微调器gif？

我想为我的应用定制一个。

Answer 1

这是主题中包含的gif，是的，您可以轻松替换它。 spinner gif图像在.v-app-loading::before CSS规则中定义（至少对于valo主题），您实际上可以通过以下方式覆盖它：

假设我们想使用gif ring.gif作为spinner imange，这个gif放在img目录下的主题中。这是你主题的主题scss，名为“mytheme.scss”

@import "../valo/valo";
// import other scss files here

// do valo variables customization here

@mixin mytheme {
  @include valo;
  // include other scss mixins here 

  // customized spinner
  .v-app-loading::before {
    width: 36px;
    height: 36px;
    background: url(img/ring.gif) no-repeat 50%;
  }
}

在.v-app-loading::before之后放置@include valo;非常重要，否则无效......

有关主题的更多信息：https://vaadin.com/docs/-/part/framework/themes/themes-overview.html