To help you get started, we've collected the most common ways that @material/base is being used within popular public projects.

keemor / quizair / dist / client.64f045a3.js View on Github

* Copyright 2017 Google Inc. All Rights Reserved.
                                                      *
                                                      * Licensed under the Apache License, Version 2.0 (the "License");
                                                      * you may not use this file except in compliance with the License.
                                                      * You may obtain a copy of the License at
                                                      *
                                                      *      http://www.apache.org/licenses/LICENSE-2.0
                                                      *
                                                      * Unless required by applicable law or agreed to in writing, software
                                                      * distributed under the License is distributed on an "AS IS" BASIS,
                                                      * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
                                                      * See the License for the specific language governing permissions and
                                                      * limitations under the License.
                                                      */

class MDCToolbar extends _index.MDCComponent {
  static attachTo(root) {
    return new MDCToolbar(root);
  }

  get firstRowElement_() {
    return this.root_.querySelector(_foundation2.default.strings.FIRST_ROW_SELECTOR);
  }

  get titleElement_() {
    return this.root_.querySelector(_foundation2.default.strings.TITLE_SELECTOR);
  }

  set fixedAdjustElement(fixedAdjustElement) {
    this.fixedAdjustElement_ = fixedAdjustElement;
    this.foundation_.updateAdjustElementStyles();
  }

View more ways to use @material/base

Base

MDC Base contains core foundation and component classes that serve as the base classes for all of MDC Web's foundation classes and components (respectively).

Most of the time, you shouldn't need to depend on mdc-base directly. It is useful however if you'd like to write custom components that follow MDC Web's pattern and elegantly integrate with the MDC Web ecosystem.

Installation

First install the module:

npm install @material/base

Then include it in your code in one of the following ways:

ES Module syntax

import {MDCComponent, MDCFoundation} from '@material/base';

CommonJS

const MDCComponent = require('mdc-base').MDCComponent;
const MDCFoundation = require('mdc-base').MDCFoundation;

AMD

require(['path/to/mdc-base'], function(mdcBase) {
  const MDCComponent = mdcBase.MDCComponent;
  const MDCFoundation = mdcBase.MDCFoundation;
});

Vanilla

const MDCComponent = mdc.base.MDCComponent;
const MDCFoundation = mdc.base.MDCFoundation;

Usage

mdc-base exposes two classes: MDCComponent (the default export) which all components extend from, and MDCFoundation, which all foundation classes extend from. To learn more about foundation classes vs. components, check out our overview on architecture and best practices.

MDCFoundation

MDCFoundation provides the basic mechanisms for implementing foundation classes. Subclasses are expected to:

• Provide implementations of the proper static getters where necessary.
• Provide init() and destroy() lifecycle methods

import {MDCFoundation} from '@material/base/foundation';

export default class MyFoundation extends MDCFoundation {
  static get cssClasses() {
    return {
      ROOT: 'my-component',
      MESSAGE: 'my-component__message',
      BUTTON: 'my-component__button',
      TOGGLED: 'my-component--toggled'
    };
  }

  static get defaultAdapter() {
    return {
      toggleClass: (/* className: string */) => {},
      registerBtnClickHandler: (/* handler: Function */) => {},
      deregisterBtnClickHandler: (/* handler: Function */) => {}
    };
  }

  constructor(adapter) {
    super({...MyFoundation.defaultAdapter, ...adapter});
    const {TOGGLED} = MyFoundation.cssClasses;
    this.clickHandler = () => this.adapter.toggleClass(TOGGLED);
  }

  init() {
    this.adapter.registerBtnClickHandler(this.clickHandler);
  }

  destroy() {
    this.adapter.deregisterBtnClickHandler(this.clickHandler);
  }
}

Static Getters

The static getters specify constants that can be used within the foundation class, its component, and by 3rd-party code. It's important to remember to always put constants into these getters. This will ensure your component can interop in as many environments as possible, including those where CSS classes need to be overwritten by the host library (e.g., Closure Stylesheets), or strings need to be modified (for i18n, for example).

Note that you do not have to explicitly provide getters for constants if your component has none.

The getters which should be provided are specified below:

Lifecycle Methods

Each foundation class has two lifecycle methods: init() and destroy(), which are described below:

MDCComponent

MDCComponent provides the basic mechanisms for implementing component classes.

import MyComponentFoundation from './foundation';

export class MyComponent extends MDCComponent {
  static attachTo(root) {
    return new MyComponent(root);
  }

  getDefaultFoundation() {
    const btn = this.root.querySelector(`.${MyComponentFoundation.cssClasses.BUTTON}`)!;
    return new MyComponentFoundation({
      toggleClass: className => {
        if (this.root.classList.contains(className)) {
          this.root.classList.remove(className);
          return;
        }
        this.root.classList.add(className);
      },
      registerBtnClickHandler: handler => btn.addEventListener('click', handler),
      deregisterBtnClickHandler: handler => btn.removeEventListener('click', handler)
    });
  }
}

Properties

MDCComponent provides the following "private" properties to subclasses:

Methods

MDCComponent provides the following methods to subclasses:

Static Methods

In addition to methods inherited, subclasses should implement the following two static methods within their code:

Foundation Lifecycle handling

MDCComponent calls its foundation's init() function within its constructor, and its foundation's destroy() function within its own destroy() function. Therefore it's important to remember to always call super() when overriding destroy(). Not doing so can lead to leaked resources.

Initialization and constructor parameters

If you need to pass in additional parameters into a component's constructor, you can make use of the initialize method, as shown above. An example of this is passing in a child component as a dependency.

class MyComponent extends MDCComponent {
  initialize(childComponent = null) {
    this.child = childComponent ?
      childComponent : new ChildComponent(this.root.querySelector('.child'));
  }

  getDefaultFoundation() {
    return new MyComponentFoundation({
      doSomethingWithChildComponent: () => this.child.doSomething(),
      // ...
    });
  }
}

You could call this code like so:

const childComponent = new ChildComponent(document.querySelector('.some-child'));
const myComponent = new MyComponent(
  document.querySelector('.my-component'), /* foundation */ undefined, childComponent
);
// use myComponent

> NOTE: You could also pass in an initialized foundation if you wish. The example above simply > showcases how you could pass in initialization arguments without instantiating a foundation.

Best Practice: Keep your adapters simple

If you find your adapters getting too complex, you should consider refactoring the complex parts out into their own implementations.

import MyComponentFoundation from './foundation';
import {toggleClass} from './util';

class MyComponent {
  // ...
  getDefaultFoundation() {
    return new MyComponentFoundation({
      toggleClass: className => util.toggleClass(this.root, className),
      // ...
    });
  }
}

Where ./util could look like:

export function toggleClass(element, className) {
  if (root.classList.contains(className)) {
    root.classList.remove(className);
    return;
  }
  root.classList.add(className);
}

This not only reduces the complexity of your component class, but allows for the functionality of complex adapters to be adequately tested:

test('toggleClass() removes a class when present on an element', t => {
  const root = document.createElement('div');
  root.classList.add('foo');

  util.toggleClass(root, 'foo');

  t.false(root.classList.contains('foo'));
  t.end();
});