angular / angular/components

Form field Floating labels gaps not customizable and not taking into account the label actual size

オープン
#16,411 コメント 16 件 リアクション 15 件 担当者 0 名 GitHub で見る
area: material/form-field feature P5
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

#### Feature Description
So here is the thing. Since no dense mode and since we have a custom looking material inputs, I had to make my own customization on the scss theme of the form field. The problem appeared when I changed the font size and the font itself of the floating label. Suddenly I saw that the borders are overlapping the text.
```
const floatingLabelScale = 0.75;
const outlineGapPadding = 5;
```
these values are based on some assumption that the label size will never be customized.
Now, in order to override this behavior I had to create my own directive that changes the values
and recalculate the gaps.
So I would like to request a change of this logic to calculate gaps dynamically, or to expose these 2 numbers as inputs or something that can be changed from outside. I'm ok with an injection token as well.

#### Use Case

In order to allow more customization features and be able to change the font-size of the floating label.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず、フローティングラベルのスケーリングとアウトラインのギャップ値を定義している Angular Material form-field の実装箇所を特定し、次にカスタムのラベルフォントとサイズで問題を再現します。ギャップを動的に計算すべきか、設定用に公開すべきかを判断します。カスタマイズしたラベルが境界線と重ならなくなれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, scss, typescript
領域
frontend
issue の種類
機能追加
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
42/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。