Aurelia-CLI (require)

First of all, webpack is highly recommended.

Scaffolding the app

Make sure you have at least version 0.34.0 of Aurelia-CLI installed.

$ au new

Choose Aurelia options as you see fit. In the last step, choose to install all dependencies.

Getting the plugin

In your project install the following via CLI (execution order matters!):

$ au install aurelia-validation
$ au install aurelia-typed-observable-plugin
$ au install tslib
$ au install materialize-css@next
$ au install aurelia-materialize-bridge

Configure your app

1. For Material Design icons include this in your index.html head section:

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. Add this to main.js in your src folder:

   aurelia.use.plugin('aurelia-materialize-bridge', b => b.useAll().preventWavesAttach());

   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('aurelia-materialize-bridge', bridge => {
    bridge
      .useButton()
      .useCollapsible()
      .useModal()
      .useTabs()
      .useWaves().preventWavesAttach();
   });

   At the end of this page is a full list of currently available options. Important: preventWavesAttach is only needed with CLI to prevent dimmed buttons. See this issue for details.

3. Add this to your app.html

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

4. Updateaurelia.json for the typed plugin. The following should already be present in dependencies for the vendor-bundle, in bundles section, just needs a little tweak. If not there you can just add it.

   {
     "name": "aurelia-typed-observable-plugin",
     "path": "../node_modules/aurelia-typed-observable-plugin/dist/amd",
     "main": "index"
   },

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

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

aurelia.use.plugin('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();
});