マガジンのカバー画像

Protopie Tips

9
ProtopieのTipsをまとめています
運営しているクリエイター

2022年4月の記事一覧

ステータス管理 - 実装編

ステータス管理 - 実装編

前回の記事でステータス管理についてどんなものか簡単にご説明しました。
説明を読んで直感的に理解できない部分もあると思いますので、今回は実際に簡単なステータス管理を実装して理解します。

実装するもの
ユーザーが選択したボタンの番号によって、次の画面で番号の英表記を表示するプロトタイプ

1. 2つのシーンを用意する

お好きなデバイスサイズでシーンを2つ用意します。
1つは、ユーザーが選択するボタ

もっとみる
Scroll Container

Scroll Container

Scroll Containerの作り方
Protopie でスクロールを実装するときは「Scroll Container」を使用します。

↑ Scroll Container を選択し、スクロールさせたいエリア(可動域)を作成します。

↑ スクロールさせたいエリアを作成したら、コンテナの下階層にスクロールさせたいコンテンツを入れます。

↑ Scroll Container を選択し、右ナビ

もっとみる
Alert Dialog

Alert Dialog

OSのSystem Dialogなど、PopUpでDialogを表示するシーンはプロトタイプを作るときに良く登場します。
変数を使わない簡単な設定で実装できますので、覚えておきましょう。

用意する要素Dialog 表示のTriggerとなるUI

画面をカバーするフルスクリーンのOverlay

DialogのUI

実装方法↑ Dialogをコンテンツの上に表示したいので、レイヤー構成は、ov

もっとみる