Open MarcusMorba opened 6 years ago
An additional question: when using Configuration (https://github.com/angular/flex-layout/blob/master/guides/Configuration.md), is it still necessary to enable these custom, responsive selectors and to extend the ShowHideDirective and the LayoutDirective like explained (https://github.com/angular/flex-layout/wiki/Breakpoints).
To be able to "just" overwrite the default breakpoints and add additional custom breakpoints and done would be amazing.
Here an example for a current project I have difficulties getting it work: `const EPO_BREAKPOINTS = [ { alias: 'xs', suffix: 'Xs', mediaQuery: 'screen and (max-width: 1024px)', overlapping: false }, { alias: 'sm', suffix: 'Sm', mediaQuery: 'screen and (min-width: 1025px) and (max-width: 1280px)', overlapping: false }, { alias: 'md', suffix: 'Md', mediaQuery: 'screen and (min-width: 1281px) and (max-width: 1599px)', overlapping: false }, { alias: 'lg', suffix: 'Lg', mediaQuery: 'screen and (min-width: 1600px) and (max-width: 1919px)', overlapping: false }, { alias: 'xl', suffix: 'Xl', mediaQuery: 'screen and (min-width: 1920px) and (max-width: 2250px)', overlapping: false }, { alias: 'xxl', suffix: 'Xxl', mediaQuery: 'screen and (min-width: 2251px) and (max-width: 4096px)', overlapping: false }, { alias: 'lt-sm', suffix: 'LtSm', mediaQuery: 'screen and (max-width: 1024px)', overlapping: false }, { alias: 'lt-md', suffix: 'LtMd', mediaQuery: 'screen and (max-width: 1280px)', overlapping: false }, { alias: 'lt-lg', suffix: 'LtLg', mediaQuery: 'screen and (max-width: 1599px)', overlapping: false }, { alias: 'lt-xl', suffix: 'LtXl', mediaQuery: 'screen and (max-width: 1919px)', overlapping: false }, { alias: 'lt-xxl', suffix: 'LtXxl', mediaQuery: 'screen and (max-width: 2250px)', overlapping: false }, { alias: 'gt-xs', suffix: 'GtXs', mediaQuery: 'screen and (min-width: 1025px)', overlapping: false }, { alias: 'gt-sm', suffix: 'GtSm', mediaQuery: 'screen and (min-width: 1281px)', overlapping: false }, { alias: 'gt-md', suffix: 'GtMd', mediaQuery: 'screen and (min-width: 1600px)', overlapping: false }, { alias: 'gt-lg', suffix: 'GtLg', mediaQuery: 'screen and (min-width: 1920px)', overlapping: false }, { alias: 'gt-xl', suffix: 'GtXl', mediaQuery: 'screen and (min-width: 2251px)', overlapping: false } ];
export const CUSTOM_BREAKPOINTS = { provide: BREAKPOINT, useValue: EPO_BREAKPOINTS, multi: true };`
@CaerusKaru : if you can provide some working app code examples I think I would be able to write some documentation.
We'll be getting this in just as soon as #900 lands.
Proposal
Example use cases for improvements of the custom breakpoints documentation.
What is the summary of the proposal?
Improve the custom breakpoints documentation.
What is the proposal?
First the related flex-layout-version should be named somewhere for all or the related examples to ensure with which version it´s working.
I would like to see the following example use cases:
Is there anything else we should know?