技術記事

micomia株式会社の井上です。今回はClear Text Fieldについて解説していきます。

初心者にもわかりやすく解説しているのでぜひご一読ください。

1. Clear Text Fieldとは

Clear Text Fieldは、Text Fieldに入力したものを全て削除する機能です。

例えば、連続して何か入力したいときにText Fieldに長文を入力してしまっていると削除するのがかなり大変になります。そういった際に一発で削除できるのがClear Text Fieldです。

2. Clear Text Fieldの実装方法

Clear Text FieldはActionとして実装します。

今回はText Fieldの下にあるButtonを押した際にClear Text Fieldが実行される仕様にしたいので、ButtonのActionとしてClear Text Fieldを追加します。

また、Text Fieldの設定でShow Clear Field IconをONにするとText Fieldに×アイコンが表示されます。これをONにすることで表示される×アイコンにはClear Text Fieldと同じ機能が自動的に実装されます。

このアイコンのサイズやカラーに関する設定はAdditional Propertiesの箇所からできます。

3. さいごに

今回はClear Text Fieldについて解説していきました。Text Fieldを実装する際にこの機能があるとUXの向上につながるのでぜひ本記事を参考に実装してみてください。

本記事の内容を動画で観たい方は以下をご覧ください。