Topic: How to init modal
Expected behavior Able to init a modal.
Actual behavior Not working.
Hi, I used to work with modals like this: in functions.php I register and enqueue the file like:
wp_register_script( 'mdb', site_url() . '/MDB5-STANDARD-UI-KIT-Pro-Advanced-6-4-1/js/mdb.min.js', array(), _S_VERSION, true );
In my html:
data-mdb-toggle="modal"
Now I noticed updated documentation - with things like 'ES', 'UMD' and
import { Modal, initMDB } from "mdb-ui-kit";
initMDB({ Modal });
For me as a beginner it is hard because I don't find any explanation on the MDB website like:
- where do I need to exactly put the import code?
- why has this changed and can't I use data-mdb-toggle="modal" anymore?
For me it feels like only half of the required info is explained, even in the /learn page nothing is told about how to import exactly.
I tried to use the sandbox but that also gives errors like
Cannot use import statement outside a module
I am a bit disappointed because every time I want to use MDB for an (at 1st sight) easy job, like the simplest possible modal, I get stuck in importing issues. Note: I don't use bundlers etc, just enqueueing the minified js file.
Some help would be appreciated!
Firs of all. Do you want to swtch to v7. It you want to keep working on current version you still can access previous documentation:
Here is a link to legacy docs: https://v5-standard-6.legacydocs.mdbootstrap.com/docs/standard/
You can access it from the changelog.
If yo prefer to upgrade to v7 but use umd format you do not need to add this in your code
import { Modal, initMDB } from "mdb-ui-kit";
initMDB({ Modal });
This import "mdb-ui-kit" need to be dded in the JS file of your choice. Preferably file that agregate all imports.
If you want to see example setup be have Vite starter that shows and explains import: https://mdbootstrap.com/docs/standard/getting-started/vite-integration/#section-vite-starter
stefanvd pro premium priority commented 9 months ago
Hi Kamila,
Thanks for your support. And thanks for the way to access the legacy docs, very helpful. About import "mdb-ui-kit" - the string between the "" (so: mdb-ui-kit): what I do is extracting my download and then the name of the folder is: MDB5-STANDARD-UI-KIT-Pro-Advanced-6-4-1
Does this mean: import "MDB5-STANDARD-UI-KIT-Pro-Advanced-6-4-1" ?
Or in other words, how can ' import "mdb-ui-kit" ' do something in my situation?
Finally, thanks for the link to the starter documentation!
Kind regards, Stefan
Kamila Pieńkowska staff commented 9 months ago
Here is how you can import mdb: https://v5-standard-6.legacydocs.mdbootstrap.com/docs/standard/pro/installation/
ps, I noticed the page
https://mdbootstrap.com/docs/standard/getting-started/migration-guide/
accidentally. I totally missed this... apologies!
Is it a good idea to add to the pages like this one:
https://mdbootstrap.com/docs/standard/components/modal/
that this info is for V7, with a link to the migration page?
For me, still the question remains, where to exactly put this code:
import { Modal, initMDB } from "mdb-ui-kit";
initMDB({ Modal });
or:
import "mdb-ui-kit"
Thanks!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.4.1
- Device: pc
- Browser: chrome
- OS: windows 10
- Provided sample code: No
- Provided link: No