मैं मॉड्यूल के साथ सिर्फ बूटस्ट्रैप 5 और वेनिला जेएस का उपयोग करके एक वेबसाइट बनाने की कोशिश कर रहा हूं, लेकिन मुझे बूटस्ट्रैप टोस्ट का उपयोग करने में समस्या हो रही है। मैंने सफलतापूर्वक उदाहरण बनाया है, लेकिन जब मैं दिखाने के लिए फ़ंक्शन को कॉल करता हूं, तो कुछ भी नहीं होता है।

मेरे पास एक मॉड्यूल आयात किया गया है जो इस बूटस्ट्रैप तत्व को लौटाता है: import toast from "../../components/toast/toast.js";

जब मैं toast() को कॉल करता हूं तो यह HTML तत्व लौटाता है:

<div aria-atomic="true" aria-live="assertive" 
     class="toast" role="alert">
    <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button aria-label="Close" class="btn-close" 
                data-bs-dismiss="toast" type="button">
        </button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>

मैं एक मॉड्यूल के रूप में बूटस्ट्रैप का उपयोग कर रहा हूँ: import { Toast } from '../../plugins/bootstrap-5.0.0-beta1-dist/js/bootstrap.esm.js'

और इस तरह मेरा टोस्ट बनाना:

    const toastEl = toast();
    const myToast = new Toast(toastEl);
    myToast.show();

डिबगिंग में, मैं देख सकता हूँ कि मेरा उदाहरण 'myToast' निम्नलिखित लौटाता है।

टोस्ट {_element: div.toast, _config: {…}, _timeout: null}config: {एनिमेशन: ट्रू, ऑटोहाइड: ट्रू, डिले: 5000}तत्व: div.toast_timeout: null__proto: बेसकंपोनेंट

1
Allan Albuquerque 28 पद 2020, 21:00

1 उत्तर

सबसे बढ़िया उत्तर

सुनिश्चित करें कि टोस्ट() से लौटा हुआ टोस्ट() डोम में जोड़ा गया है ...

var toastEl = toast();
document.body.appendChild(toastEl)
const myToast = new Toast(toastEl);
myToast.show();

https://codeply.com/p/E1wLnVcX0J

प्रतिक्रिया के साथ बूटस्ट्रैप 5 का उपयोग करने के बारे में और पढ़ें

0
Zim 8 जून 2021, 20:01