परिचय

HMMX एक महान लाइब्रेरी है आपके वेब अनुप्रयोगों को और अधिक गतिशील और संवेदनशील बनाने के लिए. इस पोस्ट में, मैं आपको दिखाता हूँ कि कैसे HMMX का उपयोग करें...... पृष्ठ पर एक जाम सूचना दिखाने के लिए और कुछ सामग्री दिखाने के लिए।

मानक HMAX में 'lannion' का एक हिस्सा है कि केवल आपके पास केवल पीछे से सामग्री की एक टुकड़ा है. लेकिन इस पर जीत हासिल की जा सकती है HX-Trigger शीर्ष और एक छोटा सा जावा स्क्रिप्ट.

टोले

मैं इस सरल जाम सूचना तंत्र के इस योग का उपयोग कर दिया गया है कुछ समय के लिए___ यह एक सरल फंक्शन है जो एक संदेश, अवधि, और प्रकार (काम, त्रुटि, चेतावनी) और पृष्ठ पर एक जाम सूचना लाता है.

प्रतीकों के चारों ओर इस 'creining संस्करण' में कुछ और बबल हो रहा है, एनीमेशन आदि...

जावा स्क्रिप्ट

// HTMX toast notification
// Simple HTMX toast handler for use with hx-on::after-request
window.showToast = (message, duration = 3000, type = 'info') => {
    const toast = document.getElementById('toast');
    const toastMessage = document.getElementById('toast-message');
    const toastText = document.getElementById('toast-text');
    const toastIcon = document.getElementById('toast-icon');

    // Reset classes
    toastMessage.className = 'alert shadow-lg gap-2 transition-all duration-300 ease-in-out cursor-pointer';
    toastIcon.className = 'bx text-2xl';

    // Add DaisyUI alert type
    const alertClass = `alert-${type}`;
    toastMessage.classList.add(alertClass);

    // Add icon class
    const iconMap = {
        success: 'bx-check-circle',
        error: 'bx-error-circle',
        warning: 'bx-error',
        info: 'bx-info-circle'
    };
    const iconClass = iconMap[type] || 'bx-bell';
    toastIcon.classList.add(iconClass);

    // Set the message
    toastText.textContent = message;

    // Add slide-in animation
    toastMessage.classList.add('animate-slide-in');
    toast.classList.remove('hidden');

    // Allow click to dismiss
    toastMessage.onclick = () => hideToast();

    // Auto-dismiss
    clearTimeout(window.toastTimeout);
    window.toastTimeout = setTimeout(() => hideToast(), duration);

    function hideToast() {
        toastMessage.classList.remove('animate-slide-in');
        toastMessage.classList.add('animate-fade-out');
        toastMessage.onclick = null;

        toastMessage.addEventListener('animationend', () => {
            toast.classList.add('hidden');
            toastMessage.classList.remove('animate-fade-out');
        }, { once: true });
    }
};

यह एक छोटा सा एचटीएमएल है जो मैं अपने में पारिभाषित करता हूँ _खाका.cartml फ़ाइल (मेरे पसंदीदा आर्क सीएसएस व गुलजाआई के उपयोग से). अंत में 'क्लासीय ब्लॉक' पर ध्यान दें. यह निश्‍चित करने के लिए एक छोटी सी चाल है कि कक्षा अन्तिम HTML आउटपुट में सुरक्षित रखी जाती है । यह वास्तव में मेरी उंगलियों की दुकान सेटअप के लिए है...... मैं सिर्फ पर देखो के रूप में cshtml.

<div
        id="toast"
        class="toast toast-bottom fixed z-50 hidden w-full md:w-auto max-w-sm right-4 bottom-4"
>
    <div
            id="toast-message"
            class="alert shadow-lg gap-2 transition-all duration-300 ease-in-out cursor-pointer"
    >
        <i id="toast-icon" class="bx text-2xl"></i>
        <span id="toast-text">Notification message</span>
    </div>
</div>

<!-- class-preserving dummy block -->
<div class="hidden">
    <div class="alert alert-success alert-error alert-warning alert-info"></div>
    <i class="bx bx-check-circle bx-error-circle bx-error bx-info-circle bx-bell"></i>
    <div class="animate-slide-in animate-fade-out"></div>
</div>

टिलिया

यहाँ मैं परिभाषित करता हूँ क्या फ़ाइलों को 'ऑजिलिंग' से तथा साथ ही कुछ एनिमेशन क्लासों का उपयोग करने के लिए परिभाषित करता हूँ.

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  content: ["./Views/**/*.cshtml", "./Areas/**/*.cshtml"],
  safelist: ["dark"],
  darkMode: "class",
  theme: {
    extend: {
      keyframes: {
        'slide-in': {
          '0%': { opacity: 0, transform: 'translateY(20px)' },
          '100%': { opacity: 1, transform: 'translateY(0)' },
        },
        'fade-out': {
          '0%': { opacity: 1 },
          '100%': { opacity: 0 },
        },
      },
      animation: {
        'slide-in': 'slide-in 0.3s ease-out',
        'fade-out': 'fade-out 0.5s ease-in forwards',
      },
  },
  plugins: [require("daisyui")],
};

ट्रिगर

यह सब करने का रहस्य इस सब काम का उपयोग कर रहा है HMAX ट्रिगर हेडर कार्य.

अब 'सामान्य रूप से' आप होगा इसे अपने वास्तविक एचटीएमएल / कॉन्फ़िगर करने का कोड पारिभाषित करें:

<div hx-get="/clicked" hx-trigger="click[ctrlKey]">Control Click Me</div>

या फिर आप इसे एक निवेदन घटना के बाद परिभाषित कर सकते हैं. तो तुम कुछ करते हो तो यह एक नई घटना ट्रिगर करता है.

<button 
    hx-get="/api/do-something"
    hx-swap="none"
    hx-on::afterRequest="window.showToast('API call complete!', 3000, 'success')"
    class="btn btn-primary"
>
    Do Something
</button>

यह है अगर आप सिर्फ कुछ करना चाहते हैं 'तो यह किया गया है' लेकिन मेरे मामले में मैं कुछ सामग्री और एक जाम दिखाना चाहते हैं.

            Response.Headers.Append("HX-Trigger", JsonSerializer.Serialize(new
            {
                showToast = new
                {
                    toast = result.Message,
                    issuccess = result.Success
                }
            }));

मेरे मामले में मेरा ट्रिगर नाम है showToast और मैं अपनी तद्बीर कर रहा हूँ तो मैं इस घटना के लिए एक घटना श्रोता को परिभाषित किया है. यह तब होता है जब इसे बुलाया जाता है showToast फंक्शन तथा संदेश में सफलता झंडा आगे बढ़ें.

// Handles HX-Trigger: { "showToast": { "toast": "...", "issuccess": true } }
document.body.addEventListener("showToast", (event) => {
    const { toast, issuccess } = event.detail || {};
    const type = issuccess === false ? 'error' : 'success';
    showToast(toast || 'Done!', 3000, type);
});

यु. पू.

तो मैं यह क्यों इस्तेमाल करते हैं? खैर, हाल ही में एक कार्य परियोजना में मैं एक उपयोगकर्ता पर कुछ कार्यवाही करना चाहता था. मैं एक जाम सूचना दिखाने के लिए चाहता था और नई सामग्री के साथ उपयोक्ता पंक्ति की सामग्री की गणना करना चाहता था.

जैसा कि आप देख सकते हैं कि मेरे पास बटनों के एक टन है जो उपयोक्ता को 'कार्य' करता है. मैं एक जाम सूचना दिखाने के लिए चाहता था और नई सामग्री के साथ उपयोक्ता पंक्ति की सामग्री की गणना करना चाहता था.

तो मेरे नियंत्रण में मैं एक सरल 'स्विच' है जो क्रिया नाम लेता है, सामग्री तब नया निवेदन लौटाता है.

    private async Task ApplyAction(string email, string useraction)
    {
        if (!string.IsNullOrWhiteSpace(useraction) &&
            Enum.TryParse<UserActionType>(useraction, true, out var parsedAction))
        {
            RequestResult result;

            switch (parsedAction)
            {
                case UserActionType.FlipRoles:
                    result = await userActionService.FlipRestaurantPermissions(email);
                    break;
                case UserActionType.UnflipRoles:
                    result = await userActionService.UnFlipRestaurantPermissions(email);
                    break;
                case UserActionType.Enable2FA:
                    result = await userActionService.ToggleMFA(email, true);
                    break;
                case UserActionType.Disable2FA:
                    result = await userActionService.ToggleMFA(email, false);
                    break;~~~~
                case UserActionType.RevokeTokens:
                    result = await userActionService.RevokeTokens(email);
                    break;
                case UserActionType.Lock:
                    result = await userActionService.Lock(email);
                    break;
                case UserActionType.Unlock:
                    result = await userActionService.Unlock(email);
                    break;
                case UserActionType.Nuke:
                    result = await userActionService.Nuke(email);
                    break;
                case UserActionType.Disable:
                    result = await userActionService.DisableUser(email);
                    break;
                case UserActionType.Enable:
                    result = await userActionService.EnableUser(email);
                    break;
                case UserActionType.ResetPassword:
                    result = await userActionService.ChangePassword(email);
                    break;
                case UserActionType.SendResetEmail:
                    result = await userActionService.SendResetEmail(email);
                    break;
                default:
                    result = new RequestResult(false, "Unknown action");
                    break;
                  
            }

            Response.Headers.Append("HX-Trigger", JsonSerializer.Serialize(new
            {
                showToast = new
                {
                    toast = result.Message,
                    issuccess = result.Success
                }
            }));

        }
    }

आप भी मैं जोड़ देख सकते हैं HX-Trigger प्रतिक्रिया पर शीर्षिका. यह एक JSON वस्तु है के साथ showToast कुंजी तथा एक वस्तु का मान toast और issuccess कुंजी. वह toast जाम सूचना और संदेश देने के लिए कुंजी है issuccess कुंजी बुलियन है जो दिखाता है कि क्या क्रिया सफल हुई या नहीं.

तब में _Row आंशिक रूप से मैं HXX (एम.Net के प्रयोग से) कार्रवाई शुरू करने के लिए।

                     <!-- Revoke Login Tokens -->
                            <button class="btn btn-xs btn-error border whitespace-normal text-wrap tooltip tooltip-left" data-tip="Revoke login tokens"
                                    hx-get hx-indicator="#loading-modal" hx-target="closest tr" hx-swap="outerHTML"
                                    hx-action="Row" hx-controller="Users"
                                    hx-route-email="@user.Email" hx-route-useraction="@UserActionType.RevokeTokens"
                                    hx-confirm="Are you sure you want to revoke the login tokens for this user?">
                                <i class="bx bx-power-off"></i> Revoke
                            </button>

आप देख सकते हैं मैं लक्ष्य का उपयोग कर सकते हैं closest tr नई अंतर्वस्तु के साथ पूरी पंक्ति की अदला बदली करने के लिए. यह एक सरल तरीक़ा है कि बिना पूरा पृष्ठ विश्राम करने के बिना पंक्ति की वस्तुओं को अद्यतन करने का यह एक सरल तरीक़ा है ।

आंशिक दृश्य

यह बहुत सरल है और एक महान तकनीक है. HMMAX के साथ NENT कोर. आप वैकल्पिक रूप से HMAX का उपयोग कर सकते हैं.Nets अनुरोध. है HHtexvixvivivix यहाँ लेकिन इस मामले में मैं सिर्फ एक HMAX कॉलबैक से कभी इसका उपयोग करते हैं.

    [Route("row")]
 
    public async Task<IActionResult> Row(string email, string? useraction = null)
    {

        if(!string.IsNullOrEmpty(useraction))
          await ApplyAction(email, useraction);

        var userRow = await userViewService.GetSingleUserViewModel(email);
        return PartialView("_Row", userRow);
    }

इस मामले में आंशिक दृष्टिकोण _Row उपयोक्ता जानकारी तथा बटनों को क्रियाएँ करने के लिए एक सरल तालिका पंक्ति है.

अतिरिक्त HMX विशेषताएँ

मैं उपयोगकर्ता को बेहतर अनुभव करने के लिए और अधिक HMMX विशेषताओं का भी प्रयोग करता हूँ.

लोड हो रहा है

मैं भी एक आसान उपयोग loading modal यह सूचित करने के लिए कि निवेदन प्रगति में है । यह उपयोक्ता को दिखाने का एक सरल तरीका है कि पृष्ठभूमि में कुछ हो रहा है.

<div id="loading-modal" class="modal htmx-indicator">
    <div
        class="modal-box flex flex-col items-center justify-center bg-base-200 border border-base-300 shadow-xl rounded-xl text-base-content dark text-center ">
        <div class="flex flex-col items-center space-y-4">
            <h2 class="text-lg font-semibold tracking-wide">Loading...</h2>
            <span class="loading loading-dots loading-xl text-4xl text-stone-200"></span>
        </div>
    </div>
</div>

पुष्टि करें

मैं भी उपयोग hx-confirm क्रिया किए जाने के पहले पुष्टिकरण संवाद दिखाने के लिए गुण. यह सुनिश्चित करने के लिए एक सरल तरीका है कि उपयोक्ता वास्तव में कार्य करना चाहता है. यह उपयोग स्व- धातु2color पुष्टि संवाद दिखाने के लिए.

अब अगर आप ऐसा नहीं करते हैं, HMAX अभी भी काम करता है लेकिन यह मानक ब्राउज़र 'ठीक' संवाद का उपयोग करता है जो उपयोगकर्ता के लिए एक बिट के लिए जा सकता है.

// HTMX confirm with SweetAlert2
window.addEventListener('htmx:confirm', (e) => {
    const message = e.detail.question;
    if (!message) return;

    e.preventDefault();

    Swal.fire({
        title: 'Please confirm',
        text: message,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes',
        cancelButtonText: 'Cancel',
        theme: 'dark',
    }).then(({ isConfirmed }) => {
        if (isConfirmed) e.detail.issueRequest(true);
    });
});

ऑन्टियम

यह HMMMX का उपयोग करने के लिए एक सरल तरीका है पृष्ठ पर एक फलक सूचना और सामग्री दिखाने के लिए. यह आपके वेब अनुप्रयोगों को अधिक गतिशील और संवेदनशील बनाने का एक महान तरीका है.