Materialize Bridge Docs
v1
v1
  • Intro
  • 1. About this application
    • 1.1 Introduction
    • 1.2 Navigation guide
    • 1.3 Components catalog
    • 1.4 Internal Structure
    • 1.5 Installation
    • 1.6 Project status
    • 1.7 Color switcher
  • 2. Installation
    • Webpack, Aurelia-CLI (Webpack)
    • JSPM
    • Aurelia-CLI (require)
    • Fuse-box 2.x
  • 3. App developers tutorial
    • 3.1 Introduction
    • 3.2 Setup
    • 3.3 Select component
    • 3.4 Button component
    • 3.5 Slider component
    • 3.6 Collapsible component
    • 3.7 What you need to know
  • 4. App developers notes
    • 4.1 On bundling
    • 4.2 Using your own SASS with JSPM
  • 5. Contributing (bridge developers notes)
    • Cloning and running the code
    • Creating samples
  • 6. About Aurelia
    • 5.1 Key Features
  • 7. About Materialize
    • 7.1 Integrated with Aurelia
    • 7.2 Why choose Materialize
Powered by GitBook
On this page
  • Getting the plugin
  • Configure your app
  • You are done!
  1. 2. Installation

JSPM

PreviousWebpack, Aurelia-CLI (Webpack)NextAurelia-CLI (require)

Last updated 7 years ago

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 

$ jspm install npm:materialize-css@next

Configure your app

  1. 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">

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

    export function configure(aurelia) {
 return aurelia.loader.loadModule("materialize-css").then(() => {
   aurelia.use
     .standardConfiguration()
     .developmentLogging()
     // Install and configure the plugin
     .plugin('aurelia-materialize-bridge', bridge => bridge.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('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.

As described above, here is a full list of currently 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();
});

Now you might want to do our , based on Aurelia Skeleton navigation. Before doing this, make sure you .

Materialize
manual bootstrapping
app developers tutorial
set up your environment appropriately