GithubHelp home page GithubHelp logo

angular / flex-layout Goto Github PK

View Code? Open in Web Editor NEW
5.9K 184.0 771.0 7.11 MB

Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API

License: MIT License

JavaScript 1.68% HTML 4.10% TypeScript 90.95% Shell 1.28% SCSS 2.00%
flexbox grid responsive layout mediaquery engine angular adaptive

flex-layout's Introduction

Angular Flex-Layout

npm version Build status Gitter

NOTE: The Angular team no longer publishes new releases of this project. Please review this blog post for alternatives, and this article for the explanation and next steps.

Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery. This module provides Angular developers with component layout features using a custom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS stylings.

The Flex Layout engine intelligently automates the process of applying appropriate Flexbox CSS to browser view hierarchies. This automation also addresses many of the complexities and workarounds encountered with the traditional, manual, CSS-only application of box CSS.

The real power of Flex Layout, however, is its responsive engine. The Responsive API enables developers to easily specify different layouts, sizing, visibilities for different viewport sizes and display devices.


Getting Started

Start by installing the Angular Layout library from npm

npm i -s @angular/flex-layout @angular/cdk

Next, you'll need to import the Layout module in your app's module.

app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';
...

@NgModule({
    ...
    imports: [ FlexLayoutModule ],
    ...
});

After that is configured, you can use the Angular Layout attributes in your HTML tags for flex layout:

<div fxLayout="row" fxLayoutAlign="space-between">
</div>

Check out all of the available options for using Angular Layout in your application.


Quick Links

Demos

StackBlitz Templates

Developers


Browser Support

ย  caniuseflexbox



License

The sources for this package are in the Flex Layout repository.
Please file issues and pull requests against that repo.

License: MIT

flex-layout's People

Contributors

alan-agius4 avatar andrewseguin avatar atscott avatar bowenni avatar caeruskaru avatar charsleysa avatar cyrilletuzi avatar dependabot[bot] avatar devversion avatar dodongphure avatar donroyco avatar jelbourn avatar josephperrott avatar joshwiens avatar kara avatar karlhaas avatar mmalerba avatar null-reference avatar peterblazejewicz avatar peterramsing avatar powerkiki avatar robphoenix avatar samuelmarks avatar somombo avatar splaktar avatar taylonr avatar teamop avatar thomasburleson avatar tinayuangao avatar webmaxru avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flex-layout's Issues

Configure SystemJS to use flex-layout.umd.js

Started the demo application and it worked fine. Then, from the dist folder, made a copy of @angular/flex-layout to my running application setup generated from the "Angular Docs 5 Min Quickstart".

Registered FlexLayoutModule on app.module, as described on documentation and added '@angular/flex-layout': 'npm:@angular/flex-layout/flex-layout.umd.js' to mappings on Systemjs.config.js

Unfortunately it returned an "ReferenceError: Invalid left-hand side in assignment" on Chrome, Firefox, IE and Opera BUT worked great on Edge. Any thoughts on how to fix this?

update: 'layout-wrap' injector should support reverse

the LayoutWrap injector should support:

Attribute CSS
layout-wrap flex-wrap : wrap
layout-wrap="no" flex-wrap : nowrap
layout-wrap="nowrap" flex-wrap : nowrap
layout-wrap="none" flex-wrap : nowrap
layout-wrap="reverse" flex-wrap : wrap-reverse

feat(api): improve support for responsive alias

Currently Layout syntax is enhanced with parametric responsive markup (selector suffices):

<div fx-layout="row"> ==> <div fx-layout="column" fx-layout.gt-sm="row">

The directive implementations use faux @Input properties to support easy bindings to these optional parametric expressions/values:

@Directive({
  selector: '[fx-layout]'
})
export class LayoutDirective {
 /**
   * Default layout property with default direction value
   */
  @Input('fx-layout')        layout = 'row';

  // *******************************************************
  // Optional input variations to support mediaQuery triggers
  // *******************************************************

  @Input('fx-layout.xs')     layoutXs;
  @Input('fx-layout.gt-xs')  layoutGtXs;
  @Input('fx-layout.sm')     layoutSm;
  @Input('fx-layout.gt-sm')  layoutGtSm;
  @Input('fx-layout.md')     layoutMd;
  @Input('fx-layout.gt-md')  layoutGtMd;
  @Input('fx-layout.lg')     layoutLg;
  @Input('fx-layout.gt-lg')  layoutGtLg;
  @Input('fx-layout.xl')     layoutXl;

}

To support responsive APIs - within Angular (5.x + 6.x) - these suffices must be hard-coded into the directive. This also means that any new/additionally suffices must be defined in a new sub-class. e.g

@Directive({
  selector: '[fx-layout.sm-landscape, fx-layout.sm-portrait]'
})
export class LayoutWithOrientationDirective extends LayoutDirective {

  // *******************************************************
  // Specify new selectors in subsclass
  // *******************************************************

  @Input('fx-layout.sm-landscape')     layoutSmLandscape;
  @Input('fx-layout.sm-portraint')     layoutSmPortrait;
}

Obviously this ^ is not ideal nor dynamic. A better solution is need that would ideally only require a single @Input:

@Directive({
  selector: '[fx-layout]'
})
export class LayoutDirective {

  @Input('fx-layout')        layout = 'row';

}

problem with gulp build:components

gulp --require ts-node/register build:components

[19:11:41] Requiring external module ts-node/register
/Users/eudago/dev/techangelapp/node_modules/@angular/flex-layout/tools/gulp/gulpfile.ts:1
(function (exports, require, module, __filename, __dirname) { import './tasks/ci';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Module._extensions..js (module.js:580:10)
    at require.extensions.(anonymous function) (/Users/eudago/dev/techangelapp/node_modules/@angular/flex-layout/node_modules/ts-node/src/index.ts:400:14)
    at Object.require.extensions.(anonymous function) [as .ts] (/Users/eudago/dev/techangelapp/node_modules/@angular/flex-layout/node_modules/ts-node/src/index.ts:400:14)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)

My node version is 7.2.1 and npm 3.10.10
Gulp version 3.9.0 but i test with 3.9.1 and not working

(chore): Remove reflect-metadata as a dependency

reflect-metadata is a dependency but it is not needed when used with core-js...

"dependencies": {
    "reflect-metadata": "^0.1.8",
  },

instead use:

import 'core-js/es7/object';
import 'core-js/es7/reflect';

fix(demo): correct demo-app responsive layout issues

These screenshots are on a 425x646 display, but they get worse if you try from a smaller resolution phone.

I noticed this some days ago when the initial announcement was made and the demo shared. Unfortunately I was viewing it on my phone and didn't have time to write up an issue at that point.

Browsers and Operating System
Chrome for Android (7.1.1), Chrome for OS X (El Capitan)

Issues

  • Overlapping text
  • Colored flex areas running out of cards

Responsive demo app: https://tburleson-layouts-demos.firebaseapp.com/#/responsive
screen shot 2016-12-14 at 2 40 21 am
screen shot 2016-12-14 at 2 41 25 am

Static mode: https://tburleson-layouts-demos.firebaseapp.com/#/docs
screen shot 2016-12-14 at 2 40 45 am

I would love to help out with a fix, but my time is very limited atm and I need to focus on paying work to make ends meet.

feat(mediaMatch): add ScreenTypes and more Breakpoints

Add the following screentypes:

const HANDSET_PORTRAIT  = '(orientation: portrait) and (max-width: 599px)';
const TABLET_PORTRAIT   = '(orientation: portrait) and (min-width: 600px) and (max-width: 839px)';
const WEB_PORTRAIT      = '(orientation: portrait) and (min-width: 840px)';

const HANDSET_LANDSCAPE = '(orientation: landscape) and (max-width: 959px)';
const TABLET_LANDSCAPE  = '(orientation: landscape) and (min-width: 960px)  and (max-width: 1279px)';
const WEB_LANDSCAPE     = '(orientation: landscape) and (min-width: 1280px)';

export const SCREEN_TYPES = {
  HANDSET           : `${HANDSET_PORTRAIT}, ${HANDSET_LANDSCAPE}  `,
  TABLET            : `${TABLET_PORTRAIT} , ${TABLET_LANDSCAPE}   `,
  WEB               : `${WEB_PORTRAIT}    , ${WEB_LANDSCAPE}      `,

  HANDSET_PORTRAIT  : `${HANDSET_PORTRAIT}                        `,
  TABLET_PORTRAIT   : `${TABLET_PORTRAIT}                         `,
  WEB_PORTRAIT      : `${WEB_PORTRAIT}                            `,

  HANDSET_LANDSCAPE : `${HANDSET_LANDSCAPE}                       `,
  TABLET_LANDSCAPE  : `${TABLET_LANDSCAPE}                        `,
  WEB_LANDSCAPE     : `${WEB_LANDSCAPE}                           `
};

And the following BreakPoints:

[
{ 'alias': 'handset'            , 'mediaQuery': ScreenTypes.HANDSET           },
{ 'alias': 'handset.landscape'  , 'mediaQuery': ScreenTypes.HANDSET_LANDSCAPE },
{ 'alias': 'handset.portrait'   , 'mediaQuery': ScreenTypes.HANDSET_PORTRAIT  },

{ 'alias': 'tablet'             , 'mediaQuery': ScreenTypes.TABLET          },
{ 'alias': 'tablet.landscape'   , 'mediaQuery': ScreenTypes.TABLET          },
{ 'alias': 'tablet.portrait'    , 'mediaQuery': ScreenTypes.TABLET_PORTRAIT },

{ 'alias': 'web'                , 'mediaQuery': ScreenTypes.WEB           },
{ 'alias': 'web.landscape'      , 'mediaQuery': ScreenTypes.WEB_LANDSCAPE },
{ 'alias': 'web.portrait'       , 'mediaQuery': ScreenTypes.WEB_PORTRAIT  }
]

feat(demo): provide source views and StackBlitz links

Similar to usages on Angular.io and Material.angular.io, we should provide

  • toggle the demo view to show the source or the live demo
  • provide a link to open the demo in a StackBlitz demo.
  • investigate the complexity of embedding StackBlitz demos; see embedded example.

screen shot 2018-03-07 at 1 45 20 pm

Show above is a tabbed view to toggle inline-demo, source view, or jump to StackBlitz.

See https://medium.com/@ericsimons/stackblitz-sdk-instantly-add-live-environments-to-your-docs-blogs-more-73dab05c51ae

gulp build:release error

I'm trying to build the project to use it but getting the below error

My environment is

  • node: 6.5.0
  • typescript: 2.1.4

Thank you for help.

[00:54:04] Using gulpfile ~/dev/flex-layout/gulpfile.js
[00:54:04] Starting 'build:release'...
[00:54:04] Starting 'clean'...
[00:54:04] Finished 'clean' after 52 ms
[00:54:04] Starting ':build:components:ts'...
[00:54:06] Finished ':build:components:ts' after 2.66 s
[00:54:06] Starting ':build:components:rollup'...
[00:54:08] Finished ':build:components:rollup' after 1.28 s
[00:54:08] Starting 'build:components'...
[00:54:08] Finished 'build:components' after 6.85 ฮผs
[00:54:08] Starting ':build:components:ngc'...
TypeError: Cannot read property 'text' of undefined
    at NodeObject.getText (/Users/paulogr/dev/flex-layout/node_modules/typescript/lib/typescript.js:78080:30)
    at Evaluator.evaluateNode (/Users/paulogr/dev/flex-layout/node_modules/@angular/tsc-wrapped/src/evaluator.js:495:66)
    at _loop_1 (/Users/paulogr/dev/flex-layout/node_modules/@angular/tsc-wrapped/src/collector.js:306:54)
    at /Users/paulogr/dev/flex-layout/node_modules/@angular/tsc-wrapped/src/collector.js:365:25
    at visitEachNode (/Users/paulogr/dev/flex-layout/node_modules/typescript/lib/typescript.js:13907:30)
    at Object.forEachChild (/Users/paulogr/dev/flex-layout/node_modules/typescript/lib/typescript.js:14078:24)
    at MetadataCollector.getMetadata (/Users/paulogr/dev/flex-layout/node_modules/@angular/tsc-wrapped/src/collector.js:204:12)
    at MetadataWriterHost.writeMetadata (/Users/paulogr/dev/flex-layout/node_modules/@angular/tsc-wrapped/src/compiler_host.js:111:51)
    at MetadataWriterHost.writeFile (/Users/paulogr/dev/flex-layout/node_modules/@angular/tsc-wrapped/src/compiler_host.js:103:19)
    at Object.writeFile (/Users/paulogr/dev/flex-layout/node_modules/typescript/lib/typescript.js:62522:132)
Compilation failed
[00:54:13] ':build:components:ngc' errored after 5.16 s
[00:54:13] Error: Process failed with code 1
    at formatError (/usr/local/lib/node_modules/gulp/bin/gulp.js:169:10)
    at Gulp.<anonymous> (/usr/local/lib/node_modules/gulp/bin/gulp.js:195:15)
    at emitOne (events.js:101:20)
    at Gulp.emit (events.js:188:7)
    at Gulp.Orchestrator._emitTaskDone (/Users/paulogr/dev/flex-layout/node_modules/orchestrator/index.js:264:8)
    at /Users/paulogr/dev/flex-layout/node_modules/orchestrator/index.js:275:23
    at finish (/Users/paulogr/dev/flex-layout/node_modules/orchestrator/lib/runTask.js:21:8)
    at cb (/Users/paulogr/dev/flex-layout/node_modules/orchestrator/lib/runTask.js:29:3)
    at ChildProcess.<anonymous> (/Users/paulogr/dev/flex-layout/tools/gulp/task_helpers.ts:93:11)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Socket.<anonymous> (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:493:12)
[00:54:13] 'build:release' errored after 9.18 s
[00:54:13] Error in plugin 'run-sequence(:build:components:ngc)'
Message:
    Process failed with code 1
Stack:
    at finish (/Users/paulogr/dev/flex-layout/node_modules/run-sequence/index.js:56:13)
    at Gulp.onError (/Users/paulogr/dev/flex-layout/node_modules/run-sequence/index.js:67:4)
    at emitOne (events.js:101:20)
    at Gulp.emit (events.js:188:7)
    at Gulp.Orchestrator._emitTaskDone (/Users/paulogr/dev/flex-layout/node_modules/orchestrator/index.js:264:8)
    at /Users/paulogr/dev/flex-layout/node_modules/orchestrator/index.js:275:23
    at finish (/Users/paulogr/dev/flex-layout/node_modules/orchestrator/lib/runTask.js:21:8)
    at cb (/Users/paulogr/dev/flex-layout/node_modules/orchestrator/lib/runTask.js:29:3)
    at ChildProcess.<anonymous> (/Users/paulogr/dev/flex-layout/tools/gulp/task_helpers.ts:93:11)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Socket.<anonymous> (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:493:12)```

'@angular/flex-layout' is not in the npm registry.

Hi,

      I have tried to install angular/flex-layout module by using the below command

npm install @angular/flex-layout. it thorws the below error

'@angular/flex-layout' is not in the npm registry.

May I know when is this availble in npm repository

Error encountered resolving symbol values statically.

Getting an error when using the library in my project. Just running ng build and getting an error:

c:\Project>ng build
 10% building modules 2/2 modules 0 activeError encountered resolving symbol val
ues statically. Function calls are not supported. Consider replacing the functio
n or lambda with a reference to an exported function, resolving symbol AppModule
 in c:/Project/src/app/app.module.ts, resolving symbol AppM
odule in c:/Project/src/app/app.module.ts
Error: Error encountered resolving symbol values statically. Function calls are
not supported. Consider replacing the function or lambda with a reference to an
exported function, resolving symbol AppModule in c:/Project
/src/app/app.module.ts, resolving symbol AppModule in c:/Project/src/app/app.module.ts
    at simplifyInContext (c:\Project\node_modules\@angular\
compiler-cli\src\static_reflector.js:475:23)
    at StaticReflector.simplify (c:\Project\node_modules\@a
ngular\compiler-cli\src\static_reflector.js:478:22)
    at StaticReflector.annotations (c:\Project\node_modules
\@angular\compiler-cli\src\static_reflector.js:60:36)
    at AotPlugin.getNgModuleMetadata (c:\Project\node_modul
es\@ngtools\webpack\src\plugin.js:330:41)
    at AotPlugin._processNgModule (c:\Project\node_modules\
@ngtools\webpack\src\plugin.js:271:42)
    at c:\Project\node_modules\@ngtools\webpack\src\plugin.
js:242:39
    at process._tickCallback (internal/process/next_tick.js:103:7)

I can pass the build if just put a comment on FlexLayoutModule.forRoot()

Angular 2.2.3
node 6.9.2
npm 4.0.3
Windows 7 Pro x64

UPDATE 0:
I was being producing the lib using both gulp build:components and gulp build:release but still has the same outcome once I put it it in my project.
UPDATE 1:
I can see you are relying on Anglar "^2.2.4" which is my project is relying on version 2.2.3 is there anyting in 2.2.4 that you rely on, which is not in 2.2.3 ?
UPDATE 2:
Just updated the project to angular 2.2.4 but didn't help.

intercept ng-cloak deactivation

While the Layout directives are initializing and preparing Layout style changes, the ng-cloak deactivation (to show the DOM elements) should be delayed.

chore(npm): Move Dependencies to Peer Dependencies

These dependencies:

"dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "angular-in-memory-web-api": "~0.1.13",
    "core-js": "^2.4.1",
    "es-module-loader": "^1.3.5",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  }

should be moved to peerDependencies.

Directives should support multiple selectors

Currently only a single directive syntax is supported. Consider the Layout directive

@Directive({selector: '[fx-layout]'})
export class LayoutDirective {  
  @Input('fx-layout') layout = 'row';
  @Input('fx-layout.xs') layoutXs;
  @Input('fx-layout.gt-xs') layoutGtXs;
}

and its markup usage:

<div  fx-layout="row" fx-layout.xs="column"></div>

All ^ works fine.

Issue

Consider the use of multiple selectors with non-default used in markup

@Directive({selector: '[fx-layout], [fx-layout.xs], [fx-layout.gt-xs]'})
export class LayoutDirective {  
}

The following does NOT throw any errors:

 <div [fx-layout]="direction" [fx-layout.xs]="'column'"></div>

But consider this scenario:

<div  [fx-layout.xs]="direction"></div>

or

<div  [fx-layout.xs]="'column'"></div>

In ^ this case, the expectation is a Layout directive instance would be created, and the @Input('fx-layout.xs') layoutXs would be assigned the value of the direction variable ( or 'column' string).

Instead, we get this error:

Template parse errors:(โ€ฆ) Error: Template parse errors:
Invalid property name 'fx-layout.xs' ("
          <div [ERROR ->][fx-layout.xs]="direction"></div>

Note that the default value/input @Input('fx-layout') would not need to be defined in the markup, but would still be used (since its default value is assigned).

Desired Result:

This should work without any errors:

<div  [fx-layout.xs]="direction"></div>

Last line alignment of a flex-box grid

Anyone knows how to solve that?

I have a grid with multiple items, the grid layout alignment is set to "space-around", but the last line I want to align left not centered.

screen shot 2016-12-26 at 7 22 37 am

Here it goes a plunker with an example to solve.

https://plnkr.co/edit/TSznXSSxHcExaKSmyzfG

<div class="containerX">
      <div fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="space-around" >
        <div fxFlex="100px" class="item">  flex-item  </div>
        <div fxFlex="100px" class="item">  flex-item  </div>
        <div fxFlex="100px" class="item">  flex-item  </div>
        <div fxFlex="100px" class="item">  flex-item  </div>
        <div fxFlex="100px" class="item">  flex-item  </div>
        <div fxFlex="100px" class="item">  flex-item  </div>
        <div fxFlex="100px" class="item">  flex-item  </div>
        <div fxFlex="100px" class="item">  flex-item  </div>
        <div fxFlex="100px" class="item">  flex-item  </div>
        <div fxFlex="100px" class="item">  flex-item  </div>
      </div>
    </div>

I know this is a very know problem with flex-box grids, and I want to know how angular/flex-layout solve that problem.

Thank you!

template parse error when using only responsive selectors.

Developers currently must use the default API when one or more responsive APIs are defined.

Consider the following scenario where the default is fxShow and the responsive API defined is fxShow.xs:

<div fxShow [fxShow.xs]="menuOpen" class="banner">
  I should hide and show
</div>  

The above ^ works fine. When I do not, however, specify the default non-responsive selector fxShow:

<div [fxShow.xs]="menuOpen" class="banner">
  I should hide and show
</div>  

then a Template Parse error occurs:

Uncaught (in promise): Error: Template parse errors:
Can't bind to 'fxShow.xs' since it isn't a known property of 'div'. ("
    </button>
    
    <div [ERROR ->][fxShow.xs]="menuOpen" class="banner">
      I should hide and show
    </div>  
"): TestApp@5:9
Error: Template parse errors:
Can't bind to 'fxShow.xs' since it isn't a known property of 'div'. ("
    </button>

Here is the Plunkr Demo that shows this.

NOTE: this has also been reported in /angular/issues/13645

failed to build (gulp build:components)

What I done:

  1. git clone https://github.com/angular/flex-layout.git
  2. cd flex-layout
  3. npm install -g yarn
  4. yarn install
  5. gulp build:components

resulting below:

[19:20:23] Starting ':build:components:ts'...
[19:20:24] TypeScript: emit failed
[19:20:24] Finished ':build:components:ts' after 1.14 s
[19:20:24] Starting ':build:components:rollup'...
[19:20:24] ':build:components:rollup' errored after 2.67 ms
[19:20:24] Error: Could not resolve entry (/development/github/flex-layout/dist/@angular/flex-layout/index.js)
at /development/github/flex-layout/node_modules/rollup/dist/rollup.js:7309:28
at process._tickCallback (internal/process/next_tick.js:103:7)

fxHide & fxShow not working

Hi,

if I try to set up a responsive menu using [fx-hide] / [fx-show] the properties of the

do not get updated as the component property changes state. In other words, when the state changes from true--> false --> true it appears that the underlying state is not being reflected in the
.

Here's are the relevant snippets of code:

<button class="nav-trigger" 
            (click)="toggleMenu(!menuOpen)" 
            color="primary" 
            md-icon-button>
     <md-icon class="md-24">menu</md-icon>
</button>

<div fx-layout="row" fx-show="true" [fx-show.xs]="menuOpen">blah</div>
private menuOpen: boolean = true;


toggleMenu(show: boolean) {
        this.menuOpen = show;

    }

Hope this helps

JT

npm support

This is just a preliminary documentation on how to use flex-layout with npm even though it's not yet supported. It's not recommended to use this in production!

Install flex-layout using npm via GitHub

npm install --save https://github.com/angular/flex-layout.git

This will save the current commit as installation candidate. Change this as flex-layout is published officially to npm!

If you use the import as stated in the documentation you will receive an error that it can't find the module.

import { FlexLayoutModule } from '@angular/flex-layout';
// Cannot find module '@angular/flex-layout'.

therefore change the import to

import { FlexLayoutModule } from '@angular/flex-layout/src/lib';

This is for development purposes only! Do not use this in production!

namespace prefix - identify best prefix use in markup and code

The current directives use fx- prefixes with as HTML markup:

  • fx-layout
  • fx-layout-wrap
  • fx-layout-align
  • fx-flex
  • fx-flex-fill
  • fx-flex-order
  • fx-flex-offset
  • fx-flex-align

Questions

  • Is the fx- namespace the best choice ?
  • What about the fxOnMediaQueryChanges lifecycle method ?

install fails!

so I try to install over npm

npm install @angular/flex-layout -save

but I get

'@angular/flex-layout' is not in the npm registry.

camelCase attribute selectors to align with Angular style guide

The official Angular style guide states that attributes should be camel cased.

Should directives such as fx-layout and fx-layout-align be renamed to fxLayout and fxLayoutAlign? Or even flexLayout and flexLayoutAlign?

Fixing existing projects that use flex-layout would be as simple as a series of search/replace steps to camelCase the directive selectors.

feat(api): add new directive 'layout-gap'

The intent is to insert a gap between the immediate flex children of an element defining both the layout and layout-gap attributes. The result is a column or row of items that have an 8px gap between each item but no gap/margin applied to the final element nor to a single item.

[layout=column][layout-gap] > [flex]:not(:last-child) {
  margin-bottom: 8px;
}

[layout=row][layout-gap] > [flex]:not(:last-child) {
  margin-right: 8px;
}

References angular/material#2360

Fast start guide for Webpack v1.X

I'm having trouble getting flex-layout to work as part of my build with webpack, could fast start instructions please be added.

  1. I've forked the flex-layout repo and then cloned it locally.
  2. Then I've ran gulp build:lib to generate the dist/@angular/flex-layout folder.
  3. I've copied the flex-layout folder to my node_modules/@angular folder in my other project.
  4. I've added import {FlexLayoutModule} from "@angular/flex-layout"; to the top of my app.module.ts file.
  5. I've added FlexLayoutModule.forRoot() to my imports array in app.module.ts.
  6. My packages.json looks like;
{
  "name": "pricing-manager",
  "version": "0.0.1",
  "scripts": {
    "start": "webpack-dev-server --progress --inline"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/material": "^2.0.0-alpha.9-experimental-pizza",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "@types/core-js": "^0.9.35",
    "@types/hammerjs": "^2.0.33",
    "@types/jquery": "^2.0.34",
    "@types/node": "^6.0.52",
    "angular2-template-loader": "^0.4.0",
    "animate.css": "^3.5.2",
    "awesome-typescript-loader": "^2.2.4",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "core-js": "^2.4.1",
    "css-loader": "^0.23.1",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.8.5",
    "font-awesome": "^4.7.0",
    "font-awesome-loader": "^1.0.1",
    "hammerjs": "^2.0.8",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.24.1",
    "imports-loader": "^0.6.5",
    "jquery": "^3.1.1",
    "json-loader": "^0.5.4",
    "node-sass": "^3.13.1",
    "node-waves": "^0.7.5",
    "raw-loader": "^0.5.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.1",
    "sass-loader": "^4.1.0",
    "style-loader": "^0.13.1",
    "typescript": "2.1.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "zone.js": "^0.7.2"
  }
}
  1. My webpack.config.js looks like;
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
    // Use the same directory as this file to path to our entry chunks.
    context: process.cwd(),

    // Our entry chunks, with the last being the app start point.
    entry: {
        polyfills: './src/polyfills.ts',
        libs: './src/libs.ts',
        app: './src/main.ts'
    },

    output: {
        path: __dirname + '/dist',
        publicPath: 'http://localhost:8080/',
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].bundle.map',
        chunkFilename: '[name].chunk.js'
    },

    resolve: {
        extensions: ['', '.ts', '.js']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.ts$/,
                include: /node_modules/,
                loader: 'awesome-typescript-loader'
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader'
            },
            {
                test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            },
            {
                test: /global\.scss$/,
                exclude: /node_modules/,
                loaders: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.scss$/,
                exclude: /node_modules|global\.scss$/,
                loaders: ['raw-loader', 'sass-loader']
            },
            {
                test: require.resolve("jquery"),
                loader: "expose-loader?$!expose-loader?jQuery"
            },
            {
                test: require.resolve("node-waves"),
                loader: "expose-loader?Waves"
            },
            {
                test: /\.json$/,
                loader: "json-loader"
            }
        ]
    },

    plugins: [
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery",
            "window.jQuery": "jquery"
        }),

        new webpack.optimize.CommonsChunkPlugin({
            children: true
        }),

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ],

    devtool: 'cheap-module-eval-source-map',

    devServer: {
        historyApiFallback: true,
        stats: {
            version: true,
            errorDetails: false,
            colors: false,
            modules: false,
            reasons: false,
            chunks: true,
            chunkModules: false,
            assets: true
        },
        inline: true,
        port: 8080,
        proxy: {
            '/api': {
                target: 'http://localhost:56074',
                secure: false
            }
        }
    }
};
  1. But when I run npm start I get a console error in chrome as follows;

image

image

Can anyone help me out?

feat(api): layout directives should only affect content children

The layout directives (layout-alignment, layout-gap, layout-padding, layout-margin) affect all element children. This means that these directives - if you used on components that perform content projection - may incorrectly modify the component's view children.

Cannot read property 'inner' of undefined

excute npm run start and open in Browser chrome

EXCEPTION: Error in ./DemoApp class DemoApp - inline template:2:8 caused by: Cannot read property 'inner' of undefined

Npm

Hi guys,
Do you have any timeline to put this project on the npm repository?

Using responsive API with md-sidenav or other html elements

At the moment thanks for Flex-Layout we can easily show or hide an element using the breakpoints.

Is there anyway to use flex-api to open/close the side nav in different resolutions? Something lik:

<md-sidenav opened.gt-sm>side nav contents </md-sidenav]>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.