Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(core): add support for default unit for unitless values #1384

Merged
merged 1 commit into from
Jan 3, 2022

Conversation

CaerusKaru
Copy link
Member

@CaerusKaru CaerusKaru commented Jan 3, 2022

If a user specifies a value for a directive without a unit, either
intentionally or otherwise, we currently error out for most cases.
Therefore, we introduce a config option that by default appends
a unit to unitless values. The built-in default is px, but could
just as easily be set to % or vh depending on a user's app.

Currently, the only supported directive for this feature is
fxLayoutGap, but not in grid mode.

To use, follow this syntax:

@NgModule{{
  imports: [
    FlexLayoutModule.withConfig({defaultUnit: '%'}),
  ],
})
export class MyAppModule {}

Then use the following HTML:

<div fxLayoutGap="5">
  <div>Line one</div>
  <div>Line two</div>
</div>

This would result in the following markup:

<div fxLayoutGap="5">
  <div style="margin-right: 5%">Line one</div>
  <div>Line two</div>
</div>

Fixes #1093

If a user specifies a value for a directive without a unit, either
intentionally or otherwise, we currently error out for most cases.
Therefore, we introduce a config option that by default appends
a unit to unitless values. The built-in default is `px`, but could
just as easily be set to `%` or `vh` depending on a user's app.

Currently, the only supported directive for this feature is
`fxLayoutGap`, but _not_ in `grid` mode.

To use, follow this syntax:

```ts
@NgModule{{
  imports: [
    FlexLayoutModule.withConfig({defaultUnit: '%'}),
  ],
})
export class MyAppModule {}
```

Then use the following HTML:

```html
<div fxLayoutGap="5">
  <div>Line one</div>
  <div>Line two</div>
</div>
```

This would result in the following markup:

```html
<div fxLayoutGap="5">
  <div style="margin-right: 5%">Line one</div>
  <div>Line two</div>
</div>
```
@CaerusKaru CaerusKaru force-pushed the adam/fix-issue-1093 branch from 3ef5b08 to c470ebd Compare January 3, 2022 04:30
@CaerusKaru CaerusKaru merged commit 80b4e5a into master Jan 3, 2022
@CaerusKaru CaerusKaru deleted the adam/fix-issue-1093 branch January 3, 2022 04:36
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 3, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

FxLayoutGap doesnt work when no measurement unit is provided
1 participant