# JSPM ## Getting the plugin **Important**: Make sure you run jspm version 0.16.15. In your project install the plugin via jspm with the following command: ``` $ jspm install aurelia-materialize-bridge ``` Make sure you also install [Materialize](http://materializecss.com/). There are several options available. Not concerning forks, these are available: npm ``` $ jspm install materialize-css ``` github ``` $ jspm install materialize=github:Dogfalo/materialize ``` #### Materialize >= 0.98.0 Add this override to `package.json` (as a child of the `jspm` property) if you're using the npm version: ```javascript "overrides": { "npm:materialize-css@0.98.0": { "main": "dist/js/materialize", "format": "global", "shim": { "dist/js/materialize": { "deps": [ "jquery", "../css/materialize.css!" ] } } } } ``` Add this override to `package.json`(as a child of the `jspm` property) if you're using the GitHub version: ```javascript "overrides": { "github:Dogfalo/materialize@0.98.0": { "main": "js/materialize", "format": "global", "shim": { "js/materialize": { "deps": [ "jquery", "../css/materialize.css!" ] } }, "dependencies": { "jquery": "jspm:jquery@*", "css": "jspm:css@*" } } } ``` ## Configure your app 1. Make sure you use [manual bootstrapping](http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/4). In order to do so open your `index.html` and locate the element with the attribute aurelia-app: ```markup ... ``` For Material Design icons include this in your `index.html` head section: ```markup ``` 2. Update `main.js` in your `src` folder with following content: ```javascript export function configure(aurelia) { // These variables are only here to be able to distinguish between the two // installation options presented above. // Of course you can use the correct name directly in the import below. let materialize = 'materialize'; // ONLY when using the "github" option above let materialize = 'materialize-css'; // ONLY when using the "npm" option above return aurelia.loader.loadModule(materialize).then(() => { aurelia.use .standardConfiguration() .developmentLogging() // Install and configure the plugin .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() ); return aurelia.start().then(a => a.setRoot()); } } ``` Please make sure that you use **only one** of the imports shown above. **Note:** You could just `import 'materialize'` into your app but since Materialize is not a direct dependency of this bridge anymore, it may get loaded asynchronously. This may lead to Materialize being initialized *after* components are `attached()` which essentally applies Materialize twice. **Note:** The above shows how to use all available controls at once. If you choose to pick which you'd like to use, you can `use` single components like this: ```javascript .plugin('aurelia-materialize-bridge', bridge => { bridge .useButton() .useCollapsible() .useModal() .useTabs(); }); ``` At the end of this page is a full list of currently available options. ### You are done! It is now possible to drop some custom-elements into your DOM. See the other pages on this website for detailed information on how to do this. **Now you might want to do our** [**app developers tutorial**](https://aurelia-ui-toolkits.gitbooks.io/materialize-bridge-docs/content/app_developers_tutorial/introduction.html)**, based on Aurelia Skeleton navigation.** \ Before doing this, make sure you [set up your environment appropriately](http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-jspm). As described above, here is a full list of currently available options: ```javascript aurelia.use.plugin('aurelia-materialize-bridge', bridge => { bridge .useAutoComplete() .useBadge() .useBreadcrumbs() .useBox() .useButton() .useCard() .useCarousel() .useCharacterCounter() .useCheckbox() .useChip() .useCollapsible() .useCollection() .useColors() .useDatePicker() .useDropdown() .useFab() .useFile() .useFooter() .useInput() .useModal() .useNavbar() .usePagination() .useParallax() .useProgress() .usePushpin() .useRadio() .useRange() .useScrollfire() .useScrollSpy() .useSelect() .useSidenav() .useSlider() .useSwitch() .useTabs() .useTooltip() .useTransitions() .useWaves() .useWell(); }); ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://aurelia-ui-toolkits-1.gitbook.io/materialize-bridge-docs/master/2.-installation/jspm.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.