web-dev-qa-db-ja.com

読み取り専用ラベルを表示する方法:マテリアルデザインのテキスト

マテリアルデザインコンポーネント、具体的には テキスト入力フィールド を見ると、入力フィールドのガイドラインは非常に明確です。

ただし、非入力テキストフィールドのレイアウト方法は不明確です。

次のようなフォームがあるとします。

enter image description here

ユーザーがすべてのフィールドを編集することを期待している場合は問題ありませんが、私はこの種の情報を読み取り専用にすることがよくあります(または、操作または計算から情報を報告する場合のように編集することは意味がありません。 )

ただし、「入力フィールド」の「ラベル」という概念が確立されています。概説された入力テキストボックスを使用しなかった場合、たとえば、従業員番号とフロア領域しか編集できない場合など、すべてを組み合わせると、ひどく厄介なものになってしまいます。

enter image description here

または、ユーザーエントリを示すために、下の線なしで「フローティングラベル」をエミュレートする必要がありますか?

enter image description here

11
Joe

一貫性が重要です。

角度材料-デモ-入力

2番目の画像は、フォームで強化された一貫したビジュアルを壊します。 「フローティングラベル」エミュレーションは一貫性を保ちますが、入力の下線を削除しただけでは、建物が編集可能なフィールドでないことを明確に表示できない場合があります。

おそらく、フローティングラベルに似たテキストをグレー表示にします。これは必須ではなく、フィールドの下線を省略するだけで十分な場合があります。リンクしたマテリアルデモの無効な入力フィールドの例を見ると、値がグレー表示されているが、点線で下線が引かれていることがわかります。グレー表示されたテキストは、入力が現在編集できないことをユーザーに通知します。点線は、ユーザーが将来変更できる可能性があることを示します。

また、入力ラベルを「Building Name」ではなく「Building」にしたいと思います。最初の2つの画像にはありますが、3番目の画像にはありません。

お役に立てれば!

3
Tory

色は、編集可能フィールドと読み取り専用フィールドに違いがあることをユーザーに示す最も明白な方法です。残念ながら、あなたが説明したオプションはすべて私にはばらばらに見えます。各エントリに下線を付ける必要があると思います。そうしないと、非フォームアイテム(タイトルなど)とフォームアイテムの違いを見分けるのが難しくなります。

前景色をライトグレーに変更してみることもできますが、タイトルには別の色を見つける必要があります(おそらくアプリの原色ですか?グレースケール以外の何か)。

2

無効になっているテキストフィールドコンポーネントを使用できます。 MD仕様に従って:

無効にしたテキストフィールドは編集できません。入力ラインが点線で不透明度が低く、タップしにくいように見えます。

enter image description here

リファレンス: https://material.io/guidelines/components/text-fields.html#text-fields-states

1
Meli