【问题标题】:Vuetify button with loader with text inline带有内嵌文本的加载器的 Vuetify 按钮
【发布时间】:2018-12-29 06:29:22
【问题描述】:

我正在尝试在按钮内使用加载器以及文本。我已经修改了 vuetify 文档中的示例:

 <span slot="loader">
   <v-icon light class="custom-loader">cached</v-icon> 
    Loading...
 </span>

codepen

点击事件按钮文本更改并出现加载程序。但是按钮的内容不是内联的。

请告知如何使按钮内容内联且独立于文本宽度?

【问题讨论】:

  • 你需要吗?通过删除 display: flex; 内的 .custom-loader?
  • @Sphinx 是的,它使内容内联,但仅适用于按钮内的短文本。我需要在插槽中放置比初始按钮文本更长的文本

标签: css vue.js vuetify.js


【解决方案1】:

演示:https://codepen.io/anon/pen/ejgEoO

我为 vuetify 使用的类添加了样式:.v-btn__loading.v-btn--loader .v-btn__content:所以你的 CSS 变成了:

.v-btn__loading {
  position: relative;
}

.v-btn--loader .v-btn__content {
  display: none;
}

.custom-loader {
  animation: loader 1s infinite;
}

@-moz-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@-o-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-04-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-07-06
    • 2020-07-10
    • 2020-11-30
    • 1970-01-01
    相关资源
    最近更新 更多