Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
Switch branches/tags
v5.0.0-beta.14 v5.0.0-beta.13 v2.0.0-beta.12 v2.0.0-beta.11 v2.0.0-beta.10 v2.0.0-beta.9 v2.0.0-beta.8 v2.0.0-beta.7 v2.0.0-beta.6 v2.0.0-beta.5 v2.0.0-beta.4 v2.0.0-beta.3 v2.0.0-beta.2 v2.0.0-beta.1 v1.0.0-alpha.12 7.0.0-beta.19 6.0.0-beta.18 6.0.0-beta.17 6.0.0-beta.16 6.0.0-beta.15 5.0.0-beta.15 2.0.1-866e0a7 2.0.0-rc.1-f270078 2.0.0-rc.1-eb22fe5 2.0.0-rc.1-eb5cb9f 2.0.0-rc.1-c2463a5 2.0.0-rc.1-ba0d85d 2.0.0-rc.1-3743282 2.0.0-rc.1-044632e 2.0.0-rc.1-2340a19 2.0.0-rc.1-980d412 2.0.0-rc.1-053fa67 2.0.0-rc.1-7cad395 2.0.0-rc.1-5db01e7 2.0.0-beta.11-b8a652d 2.0.0-beta.11-b01c2d7 2.0.0-beta.10-dc23b6d 2.0.0-beta.10-4905443 2.0.0-beta.10-3505185 2.0.0-beta.10-351573a 2.0.0-beta.9-f978b94 2.0.0-beta.9-f19bff2 2.0.0-beta.9-ea26752 2.0.0-beta.9-e461d17 2.0.0-beta.9-e3b2035 2.0.0-beta.9-e3b7fde 2.0.0-beta.9-df46d7a 2.0.0-beta.9-cc12733 2.0.0-beta.9-c3c7151 2.0.0-beta.9-1267972 2.0.0-beta.9-28173c2 2.0.0-beta.9-9133b18 2.0.0-beta.9-5823f4a 2.0.0-beta.9-816d85a 2.0.0-beta.9-481c2d1 2.0.0-beta.9-354f54f 2.0.0-beta.9-301b563 2.0.0-beta.9-99eabfb 2.0.0-beta.9-99e7450 2.0.0-beta.9-66f3717 2.0.0-beta.9-52cfcbe 2.0.0-beta.9-37e5912 2.0.0-beta.9-9d53907 2.0.0-beta.9-8b8b595 2.0.0-beta.9-7dcd97b 2.0.0-beta.9-7a48c25 2.0.0-beta.9-6b457dc 2.0.0-beta.9-5f198a3 2.0.0-beta.9-0e7d2e0 2.0.0-beta.9-0da1f88 2.0.0-beta.8-ffcad3a 2.0.0-beta.8-f5558de 2.0.0-beta.8-f0473e9 2.0.0-beta.8-d171c33 2.0.0-beta.8-d6b45a6 2.0.0-beta.8-beb5ed0 2.0.0-beta.8-bc0c900 2.0.0-beta.8-bbc1ba9 2.0.0-beta.8-b068dd2 2.0.0-beta.8-aa03283 2.0.0-beta.8-a3f2a83 2.0.0-beta.8-3611003 2.0.0-beta.8-771f2c9 2.0.0-beta.8-695bf37 2.0.0-beta.8-635c4f5 2.0.0-beta.8-81b41e6 2.0.0-beta.8-052a4a9 2.0.0-beta.8-45cfd2e 2.0.0-beta.8-40defac 2.0.0-beta.8-37a0b85 2.0.0-beta.8-21c34f7 2.0.0-beta.8-9fb0877 2.0.0-beta.8-6b42a27 2.0.0-beta.8-5ebeb23 2.0.0-beta.8-3e1fcbd 2.0.0-beta.8-0f13b14 2.0.0-beta.8-00ac57a 2.0.0-beta.7-e58330d 2.0.0-beta.7-b48ab7c 2.0.0-beta.6-f721f40
Nothing to show
Clone or download
CaerusKaru feat(core): add ability to override style building (#884)
This change decouples the style-generation from the actual directives, meaning that the library is now composed of the following:

* Directives that respond to inputs and `matchMedia` events
* Style generation providers that return styles when triggered by directives

This allows for end-users or library authors to provide their own unique style generation (even by borrowing or extending our existing library code) for any directive. This is entirely non-mandatory for use of the `BaseDirective`, since the `BaseDirective` need not always use a de-coupled style provider to function.

The canonical example is the following:
```ts
@Injectable()
export class CustomStyleBuilder extends StyleBuilder {
  buildStyles(input: string) {
	return {
		'style1': 'value1',
	};
  }
}

@NgModule({
	...
	providers: [
		provide: <the style builder to orverride, e.g. FlexStyleBuilder>,
		useClass: CustomStyleBuilder,
	],
})
export class MyAppModule {}
```

Fixes #689
Latest commit 9148e87 Nov 13, 2018
Permalink
Failed to load latest commit information.
.circleci build: upgrade to Angular and Material v7 and add strict flags (#855) Oct 5, 2018
.github chore: introduce GitHub Issue and Pull Request templates Jun 7, 2018
docs docs: fix minor grammer and use single-quotes in examples (#883) Nov 11, 2018
guides feat(lib): add config options for flex basis and other tokens May 31, 2018
scripts build: update testing configuration (#793) Jul 25, 2018
src feat(core): add ability to override style building (#884) Nov 14, 2018
test fix(show-hide): work with Angular components and elements without fxL… Nov 13, 2018
tools fix(show-hide): work with Angular components and elements without fxL… Nov 13, 2018
.clang-format update(yarn, build, tests): prepare for testing Nov 4, 2016
.editorconfig chore(config): update development configs (#31) Dec 14, 2016
.gitignore fix(module): do not require breakpoints in withConfig (#853) Oct 5, 2018
.travis.yml build: upgrade to Angular and Material v7 and add strict flags (#855) Oct 5, 2018
CHANGELOG.md chore: update package.json to 7.0.0-beta.19 w/ changelog (#857) Oct 5, 2018
CODE_REVIEWS.md docs: cleanup the Wiki and add missing docs Jan 20, 2018
CODING_STANDARDS.md docs: change reference from RxJS "lettable" to "pipeable" Feb 1, 2018
CONTRIBUTING.md chore: add CONTRIBUTING guidelines Jan 15, 2018
LICENSE chore: bump year Jan 4, 2018
README.md chore: remove Angular v6 instructions from README Jul 2, 2018
build-config.js build: move angular version to package.json (#794) Jul 25, 2018
firebase.json chore(build): update build to match ngM2 build processes (#342) Jul 27, 2017
gulpfile.js chore(build): update build to match ngM2 build processes (#342) Jul 27, 2017
package-lock.json fix(show-hide): work with Angular components and elements without fxL… Nov 13, 2018
package.json fix(show-hide): work with Angular components and elements without fxL… Nov 13, 2018
release chore(release): fetch tags before changelog generation Apr 13, 2018
stylelint-config.json chore(versions): update to Angular v5.2 and update peer dep requirements Jan 16, 2018
tsconfig.json build: upgrade to Angular and Material v7 and add strict flags (#855) Oct 5, 2018
tslint.json build: upgrade to Angular and Material v7 and add strict flags (#855) Oct 5, 2018

README.md

Angular Flex-Layout

npm version Build Status Gitter

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.


Quick Links

Developers

Demos


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