Vuetify-изменить стиль загрузки карты?


Vuetify-изменить стиль загрузки карты?

25.04.2020 04:56:11 Просмотров 42 Источник

Мне нравится этот вариант

<v-card :loading="loading">...

но я хотел бы изменить стиль с линейного индикатора выполнения на (например) наложение. Я знаю, что могу менять цвета, связывая цвет вместо логического (true).

<v-card :loading="'red'">...

Но могу ли я изменить поведение таким образом? Либо сделать полосу толще, либо лучше, чтобы показать наложение при loading=true?

У вопроса есть решение - Посмотреть?

Ответы - Vuetify-изменить стиль загрузки карты? / Vuetify - change card loading style?

Является ответом!
balexandre

25.04.2020 05:34:25

помимо взлома CSS и изменения с v-progress-linear на v-progress-overlay и надежды, что все работает так, как ожидалось, у вас будет не так много других вариантов

в документации говорится, что для слотов v-card:

  • Название: прогресс
  • Описание: слот для пользовательских прогресс линейный (отображается при загрузке опора не совпадает с логическим значением false)

таким образом, вы можете работать с template, но ваши возможности ограничены "линейным прогрессом"

<v-card :loading="loading">
    <template slot="progress">
        <v-progress-linear color="red" indeterminate></v-progress-linear>
    </template>
    ...
</v-card>

как пример в CodePen

Anees Hameed

26.04.2020 08:32:09

Из документа vuetify следует, что загрузочный реквизит может быть либо строкой, указывающей цвет, либо логическим значением.

Таким образом, вы можете легко установить цветовую анимацию загрузки с помощью

<v-card :loading="loading ? 'red': null">
...
</v-card>
MAW

26.11.2020 10:30:36

Используйте слот прогресса на v-карте, чтобы показать наложение с вашим вкусом индикатора загрузки

Документация Vuetify слоты для v-карт

<v-card class="ma-auto" width="300" height="300" :loading="loading">
    <template slot="progress">
        <v-overlay absolute class="d-flex flex-column text-center">
            <div>
                <v-progress-circular size="75" color="accent " :value="loadingProgress" indeterminate>
                    <span>Loading</span>
                </v-progress-circular>
            </div>
            <div>
                <v-btn text dark @click="loading = false" class="mt-3">Deactivate loading</v-btn>
            </div>
        </v-overlay>
    </template>
    <v-card-title></v-card-title>
    <v-card-text></v-card-text>
    <v-card-actions class="justify-center">
        <v-btn @click="loading = true">Activate loading</v-btn>
    </v-card-actions>
</v-card>
Помочь в развитии проекта:
Закрыть X