Layout Service

## Service Injection
The layout service is automatically injected into all layout templates, and you can access it as `FlexiLayout`. If you would like to use it elsewhere, you can always inject it manually. For example, in a component:
﻿
​x
 
export default Ember.Component.extend({
  layoutService: Ember.inject.service('device/layout')
});
## Layout Booleans
Layout booleans are available for use in any layout template. They will be of the format `is{breakpointName}` For instance, for the mobile breakpoint, you can include:
﻿
xxxxxxxxxx
 
{{#if FlexiLayout.isMobile}}
​
{{/if}}
There are also `isAtLeast` variants of these booleans. If you wanted to conditionally render something from tablet breakpoint up, you could do:
﻿
xxxxxxxxxx
 
{{#if FlexiLayout.isAtLeastTablet}}
​
{{/if}}
## Events
The layout service now uses `Evented` and triggers events you can subscribe to when width or height change.
The available events are:
`width-change`
`height-change`
`resize`
﻿
xxxxxxxxxx
 
import Component from 'ember-component';
import service from 'ember-service/inject';
​
export default Component.extend({
  layoutService: service('device/layout'),
  init() {
    this._super();
    
    this.get('layoutService').on('width-change', function() {
      console.log('Width changed!');
    });
    
    this.get('layoutService').on('height-change', function() {
      console.log('Height changed!');
    });
    
    this.get('layoutService').on('resize', function() {
      console.log('Width and/or height changed!');
    });
  }
});
﻿
No results