“Spinner только в модальном режиме в LWC: руководство по реализации индикаторов загрузки”

В этой статье блога мы рассмотрим различные способы добавления счетчика или индикатора загрузки специально в модальное окно в веб-компонентах Lightning (LWC). Мы рассмотрим примеры кода и в разговорной речи обсудим, как можно реализовать эту функциональность. К концу этого руководства у вас будет несколько вариантов реализации индикаторов загрузки в модальных окнах LWC.

Метод 1: Условный рендеринг
Один простой подход — использовать условный рендеринг для отображения счетчика только при необходимости. В модальном компоненте LWC вы можете определить логическое свойство, назовем его showSpinner, для управления видимостью счетчика. Вот пример того, как это можно реализовать:

// modalComponent.js
import { LightningElement, track } from 'lwc';
export default class ModalComponent extends LightningElement {
    @track showSpinner = false;
    // Method to show the spinner
    showLoadingSpinner() {
        this.showSpinner = true;
    }
// Method to hide the spinner
    hideLoadingSpinner() {
        this.showSpinner = false;
    }
}

<!-- modalComponent.html -->
<template>
    <div class="modal-container">
        <!-- Your modal content here -->
        <lightning-spinner if:true={showSpinner}></lightning-spinner>
    </div>
</template>

Вызывая методы showLoadingSpinner()и hideLoadingSpinner(), вы можете контролировать, когда счетчик отображается или скрывается в вашем модальном окне.

Метод 2: наложение с помощью Spinner
Другой подход заключается в наложении всего модального окна на прозрачный элемент div, содержащий счетчик. Таким образом, счетчик визуально размещается поверх модального окна и обеспечивает четкую индикацию загрузки. Вот пример того, как этого можно добиться:

<!-- modalComponent.html -->
<template>
    <div class="modal-container">
        <!-- Your modal content here -->
        <div class="overlay" if:true={showSpinner}>
            <lightning-spinner></lightning-spinner>
        </div>
    </div>
</template>

/* modalComponent.css */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

Если для свойства showSpinnerустановлено значение true, наложенный элемент div со счетчиком будет отображаться поверх модального окна, указывая на то, что идет загрузка.

Метод 3: пользовательская CSS-анимация
Если вам нужен больший контроль над внешним видом и поведением счетчика, вы можете создать собственную CSS-анимацию. Это позволяет вам определять уникальные анимации загрузки, адаптированные к вашему модальному модулю. Вот пример:

<!-- modalComponent.html -->
<template>
    <div class="modal-container">
        <!-- Your modal content here -->
        <div class="custom-spinner" if:true={showSpinner}></div>
    </div>
</template>

/* modalComponent.css */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.custom-spinner {
    border: 16px solid #f3f3f3; /* Light gray */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    margin: 0 auto;
}

Если применить класс custom-spinnerи установить для showSpinnerзначение true, пользовательская анимация счетчика будет отображаться в вашем модальном окне.

В этом руководстве мы рассмотрели три различных метода добавления счетчика или индикатора загрузки специально в модальное окно в LWC. Используя условный рендеринг, наложение с помощью счетчика или создание собственной CSS-анимации, вы можете улучшить взаимодействие с пользователем и обеспечить визуальную обратную связь во время операций загрузки. Выберите метод, который лучше всего соответствует вашим требованиям, и придайте своим модальным компонентам LWC профессиональный вид!