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
  • Catalog of Materialize controls as Aurelia components.
  • 2.1 Browsing the catalog
  • 2.2 Browsing the catalog's code sections
  1. 1. About this application

1.3 Components catalog

Previous1.2 Navigation guideNext1.4 Internal Structure

Last updated 7 years ago

Catalog of Materialize controls as Aurelia components.

This is the most likely fashion this application is being used. Invoked via URL: the application renders the view shown below, which shows an overview of components provided by this bridge.

Image 1

2.1 Browsing the catalog

The click on Project status menu item (as shown on Image 1 above) results in showing the Aurelia Materialize bridge components overview. Clicking on one of the components, a sample page is shown, containing a basic use example and more insteresting options along with a side-nav navigation on the left edge, showing the other available components.

Image 2

Selecting the Collapsible side-nav item, results with the view of the collapsible page of this catalog (as shown above).

Note the additional sidebar offering implementation options for the current component.

2.2 Browsing the catalog's code sections

Each of the page showing a Materialize control converted to an Aurelia component, has a section that shows the usage of the component (the consumer's view) along with optional view model and css options.

Here are three consecutive screen-shots showing that information for the select control.

Select view

Image 5 **Select view model**

Image 6 **Waves CSS**

Image 7

That side-nav mimics the side-nav of to be easy recognizable by Materialize users.

Materialize website
http://aurelia-ui-toolkits.github.io/demo-materialize/