Form項目のUIを変更したい

YUKIです!いつもお世話になってます!
今回は会員登録してくれた方のプロフィール作成ページに関しての質問になります!皆さんの知恵をお貸しください!

現状はADD SCREENのFormを使ってプロフィールページを作成してますが、それだとInput Typeが二つからしか選べず、入力しづらいUIになってます。

しかし、Adaloの公式ページや他の方が作成したアプリを覗くと大きめの入力Formになっていて「どうやっているんだろう?」と疑問に思いました。
どなたか知っている方がいれば教えて欲しいです :bowing_man:t2:

説明が下手で分かりづらいと思いますが、よろしくお願いします :sob:

定型のFormを使わずに自分でFormを作ることも出来ます。(カスタムFormという名前で呼ぶことにします)カスタムFormはText Inputとボタンを配置して作ります。(カテゴリーの部分は選択になるのでDropDownMenuを使用します)

(イメージ)

ボタンを選択してCreateのActionを設定します。上図を参考に設定をしてみて下さい。
Text Inputは広げたり、延ばしたりできるのでお好きなサイズにして下さい。配置も自由です。自己アピールの部分は枠を大きく取って文章全体が見えるような入力に出来ます。

1 Like

分かりやすい解説、ありがとうございます!
カスタムFrom。また一つ、成長してしまいました :relaxed:

実際に作業してみて詰まったところがあるんですが、ボックス内の文字が上手く整列できないでいます。理想としては左上に揃えたいと考えているんですが、現状だと見切れてしまいます・・・・何か解決策はりませんか? :sob:


上手くできなかったんですが0941さんのマネをしてみました! :triumph:

Placeholderの位置を左上にしたい場合は以下のように設定して下さい。
(最終イメージ)

(やり方)
Placeholderの文字位置を左上に持ってくるにはEDIT STYLEにあるMulti-lineにチェックを入れて下さい。それだけで左上に文字が移動します。作成画面では文字が長いと途中で切れてしまうように見えますがプレビュー画面で見ると、きちんと画面右端で折り返されて複数行の文章になっています。

1 Like

0941さん、本当にありがとうございます!無事に出来ました!

お陰さまで着々とアプリ開発が進んでいるので仕事中も「早く帰ってアプリを作りたい!」と興奮する日々です。笑
次はチャットページに画像を添付できる機能を持たせようと思ってます!YouTubeなどで勉強しながらやってますが、また不明な点があれば相談させて下さい :bowing_man:t2:

本当にありがとうございました :relaxed: