UI として配置するコンポーネントの追加と、保存する手順について解説します。
コンポーネントを追加して保存する手順
左の部分にコンポーネントがたくさん用意されています。
これをドラッグ・アンド・ドロップして右側に持っていくことで、画面にコンポーネントを追加できます。
タイトルを追加する場合は、「Title」をもってくれば OK です。
![appgyver-add-component-1](https://appgyver-master.com/wp-content/uploads/2020/11/1654261a6b6403f61a4ac34b5e70d131.png)
同様に、文章を追加したい場合は「Paragraph」を追加してください。
![appgyver-add-component-2](https://appgyver-master.com/wp-content/uploads/2020/11/827b163d53304a93e96f5edfdb73d64e.png)
このように、必要なコンポーネントを追加することが可能です。
画面に配置したコンポーネントは、複製と削除も簡単にできるようになっています。
カーソルを当てると表示される右上のアイコンを選択することで、複製と削除ができます。
![appgyver-add-component-3](https://appgyver-master.com/wp-content/uploads/2020/11/92ccdda5311f6dde9d231db198b5a7ff.png)
コンポーネントの細かいプロパティは右の方にまとまっています。
「Content」というプロパティを変更することで、テキストの文言を変更することが可能です。
![appgyver-add-component-4](https://appgyver-master.com/wp-content/uploads/2020/11/f27ecc62ec340f10f4b6da8c87383208.png)
変更ができたら、右上の「SAVE」を押すことで、保存が完了します。
![appgyver-add-component-5](https://appgyver-master.com/wp-content/uploads/2020/11/8b5b1a571b54e4950341f3f994df65e2.png)
これでコンポーネントの追加が完了しました。
項目スタイルの変更
コンポーネントを配置してだけだと、黒文字で背景もなく、質素な見た目になっています。
これは、STYLE というタブから変更することが可能です。
![appgyver-style-change](https://appgyver-master.com/wp-content/uploads/2020/11/776710258c425171d23c562e63fb9283.png)
STYLE タブからは、さまざまな変更ができます。
- フォントサイズや色を変更する
- 背景色を変更する
- コンポーネント自体のサイズを変更する
- テキストの表示位置を変更する
これらは一例で、他にもいろいろなできるので、自分好みのスタイルに変更してみてください。
最後に
ドラッグ・アンド・ドロップで UI の作成ができるので、サクサク作成が進みそうですね。
気になるコントロールがあれば、追加して見てください。
![appgyver-todo-book](https://appgyver-master.com/wp-content/uploads/2020/12/c16e31d6bc7b6df2383c58d4f5023144.png)
AppGyver の Todo アプリの作り方を1冊の本にまとめました。
簡単なアプリを自分で作ってみたい人におすすめです。