Package Exports

ember-cli-mdc-layout
ember-cli-mdc-layout/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ember-cli-mdc-layout) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ember-cli-mdc-layout

ember-cli support addon for layout-based logic

Installation

ember install ember-cli-mdc-layout

Services

This package contains the following services.

layout

Layout Service

The layout service is used to query information about the current device layout. Its primary purpose is to support device-specific layouts in template definitions. The layout service has the following properties:

isPhone - Test if the current layout is for a phone
isTablet - Test if current layout is for a tablet
isDesktop - Test if the current layout is for a desktop

Usage

You use the layout service by injecting it into either a controller or component. Here is a controller were we inject the layout service.

// controllers/index.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default Controller.extend ({
  layout: service ()
});

We can then use the layout service to add conditional blocks based on different device layouts.

// templates/index.js
<div>We are now viewing this applicaiton on a 
  {{#if layout.isPhone}}
  phone.
  {{else if layout.isTablet}}
  tablet.
  {{else if layout.isDesktop}}
  desktop.
  {{/if}}
</div>