question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature Request: Multiplier value for FxLayoutGap

See original GitHub issue

Feature Request

What is the desired behavior?

FxLayoutGap should have multiplier for attaining a pixel value.

What is the use-case or motivation for the desired behavior?

Well this is an Angular library. Many people who use Angular use Angular Material. Was just playing around with the idea of fxLayoutGap taking in a multiplier. So for instance, Angular Material Layout is generally in multiples of 8, with the exception of icons which can be 4. So fxLayoutGap="1x" would be 8px. fxLayoutGap="2x" would be 16px

Is there anything else we should know?

Nothing other than this is just an idea. Using flex in a css setting, allows us to set a constant that is there already at build time. It’s comforting knowing that if we need to change the value across the board, we can do that for our entire app. Right now just throwing out having a default value based on material. However, having a multiplier based on one’s style sheet is just a cool idea. Having a multiplier for fxLayoutGap that is stamped with the performance stamp of approval, would be fantastic. Thank you!

// Gutter variables, for padding + margin
// function to take in multiplier(8), which must emit one of the values within fx-space-amounts
@function fx-space-multiplier($n) {
  $fx-space-amounts: (
    0,
    4,
    8,
    16,
    24,
    32,
    40,
    48,
    56,
    64
  );
  $fx-space-multiplier: 8;

  @if (index($fx-space-amounts, ($n * $fx-space-multiplier))) {
    @return #{$n * $fx-space-multiplier}px;
  } @else {
    @error 'Must contain one of the following numbers: #{$fx-space-amounts}.';
  }
}

^ something equivalent to above, but for fxLayoutGap

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:4
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
ThomasBurlesoncommented, Jan 4, 2019

@CharlieGreenman - please send me your email to ThomasBurleson@gmail.com

1reaction
CaerusKarucommented, Dec 13, 2018

Sounds good on making it only apply to those two directives, and probably also gdGap.

I was thinking maybe we would add this to LayoutConfigOptions. And that maybe we wouldn’t throw an error for non-integer values, but those would obviously render weirdly when the values get applied.

Do you want to put together a PR for this, or would you rather we implement it? If you want the commit credit, I think you deserve it!

Read more comments on GitHub >

github_iconTop Results From Across the Web

fxLayoutGap API in Angular flex layout
In this tutorial we will learn how to use fxLayoutGap API in Angular flex layout with examples.
Read more >
@angular/flex-layout | Yarn - Package Manager
Fast, reliable, and secure dependency management.
Read more >
Angular UI/Material Design Flashcards by uday A - Brainscape
This module provides Angular developers with component layout features using a custom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS ...
Read more >
https://raw.githubusercontent.com/angular/flex-lay...
... ([80b4e5a](https://github.com/angular/flex-layout/commit/80b4e5af9291c02e9092de46407f2f79fe7170b1)) * **core:** add value multiplication suffix feature ...
Read more >
(PDF) Angular Development with Typescript Sec v6 MEAP
You'll also learn how discard unwanted HTTP requests with the RxJS ... we like Angular because it's a feature-complete framework that allows you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found