Webpack, Aurelia-CLI (Webpack)

Getting the plugin

In your project install the plugin via npm with the following command:

npm install --save aurelia-validation aurelia-typed-observable-plugin tslib
npm install --save aurelia-materialize-bridge materialize-css@next @types/materialize-css

Make sure you use . In order to do so open your index.html and locate the element with the attribute aurelia-app:
```
<body aurelia-app="main">
```
For Material Design icons include this in your index.html head section:
```
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```

Update main.js in your src folder with following content:

import {PLATFORM} from 'aurelia-pal';  
import 'materialize-css';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    // Install and configure the plugin
    .plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), b => b.useAll());

  return aurelia.start().then(a => a.setRoot());
}

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:

.plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), bridge => {
 bridge
   .useButton()
   .useCollapsible()
   .useModal()
   .useTabs();
});

At the end of this page is a full list of currently available options.

Import css:

<require from="materialize-css/dist/css/materialize.css"></require>

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.

As described above, here is a full list of currently available options:

aurelia.use.plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), bridge => {
  bridge
    .useAutoComplete()
    .useBadge()
    .useBox()
    .useBreadcrumbs()
    .useButton()
    .useAutoButtonWaves(true)
    .useCard()
    .useCarousel()
    .useCharacterCounter()
    .useCheckbox()
    .useChip()
    .useCollapsible()
    .useCollection()
    .useColors()
    .useDatePicker()
    .useDropdown()
    .useFab()
    .useFile()
    .useFooter()
    .useInput()
    .useLookup()
    .useModal()
    .useNavbar()
    .usePagination()
    .useParallax()
    .useProgress()
    .usePushpin()
    .useRadio()
    .useRange()
    .useScrollSpy()
    .useSelect()
    .useSidenav()
    .useSlider()
    .useSwitch()
    .useTabs()
    .useTapTarget()
    .useTimePicker()
    .useTooltip()
    .useWaitCursor()
    .useWaves()
    .useWell();
});

Previous2. Installation NextJSPM

Last updated 7 years ago

Getting the plugin

In your project install the plugin via npm with the following command:

npm install --save aurelia-validation aurelia-typed-observable-plugin tslib
npm install --save aurelia-materialize-bridge materialize-css@next @types/materialize-css

Make sure you use . In order to do so open your index.html and locate the element with the attribute aurelia-app:
```
<body aurelia-app="main">
```
For Material Design icons include this in your index.html head section:
```
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```

Update main.js in your src folder with following content:

import {PLATFORM} from 'aurelia-pal';  
import 'materialize-css';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    // Install and configure the plugin
    .plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), b => b.useAll());

  return aurelia.start().then(a => a.setRoot());
}

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:

.plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), bridge => {
 bridge
   .useButton()
   .useCollapsible()
   .useModal()
   .useTabs();
});

At the end of this page is a full list of currently available options.

Import css:

<require from="materialize-css/dist/css/materialize.css"></require>

. And the for it.

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 , based on Aurelia Skeleton navigation.

As described above, here is a full list of currently available options:

aurelia.use.plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), bridge => {
  bridge
    .useAutoComplete()
    .useBadge()
    .useBox()
    .useBreadcrumbs()
    .useButton()
    .useAutoButtonWaves(true)
    .useCard()
    .useCarousel()
    .useCharacterCounter()
    .useCheckbox()
    .useChip()
    .useCollapsible()
    .useCollection()
    .useColors()
    .useDatePicker()
    .useDropdown()
    .useFab()
    .useFile()
    .useFooter()
    .useInput()
    .useLookup()
    .useModal()
    .useNavbar()
    .usePagination()
    .useParallax()
    .useProgress()
    .usePushpin()
    .useRadio()
    .useRange()
    .useScrollSpy()
    .useSelect()
    .useSidenav()
    .useSlider()
    .useSwitch()
    .useTabs()
    .useTapTarget()
    .useTimePicker()
    .useTooltip()
    .useWaitCursor()
    .useWaves()
    .useWell();
});