メッセージングスクリーン

メッセージング画面は、人気のあるビジネスアプリSlackを思わせるいくつかの要素で構成されています。左側のナビゲーションメニューと「チャンネル」メニューを備えたこの機能テンプレートは、使いやすくデザインされた機能豊富なアプリを作成することができます。

コンポーネント

サイドナビゲーション

サイドナビゲーションは、ユーザーがアプリ内を移動する主要な方法です。この場合、2番目のメニューアイテムが強調表示されており、ユーザーがアプリのメッセージング部分にいることを示しています。

このナビゲーションをアプリ全体で利用したい場合は、このコンポーネントを単純にコピーして貼り付け、表示している画面に応じて「アクティブメニューアイテム」を変更してください。

アイコンと一緒にテキストを表示したい場合は、設定をサイドナビゲーション > デスクトップで > ミディアムサイドメニューまたは設定をメニュースタイル > 小さなサイドメニューアイテムテキストに変更してください。

サイドバーグループ

このサイドバーには、複数のコンポーネントが含まれており、テキストコンポーネントとリストコンポーネントが含まれています。リストには、ログインユーザーが所属するすべてのチャンネルが含まれています。

⚡ テキストアクション

「+ チャンネルを追加」テキストには、「チャンネル」画面へのリンクアクションが含まれています。

⚡ リストアクション

リスト内のアイテムをクリックすると、選択したチャンネルのログインユーザー > アクティブチャンネル > チャンネルIDを更新するアクションが実行されます。

トップバーグループ

テキストコンポーネント:

• #Name テキストコンポーネントはMagic Textによって制御されており、情報はデータベースから取得されます。ここに反映されるチャンネル名は、Users Collection内の「Active Channel」プロパティに基づいています。

• Count テキストコンポーネントはMagic Textによって制御されており、チャンネル内のユーザー数をカウントしています。

アイコンコンポーネント

• 検索アイコン

  • ⚡ 「メッセージを検索」画面へのリンクアクション

• More_Vert アイコン

  • ⚡ 「チャンネル編集モーダル」画面へのリンクアクション

メッセージグループ

これはチャンネルメッセージのリストで、ログインユーザー > アクティブチャンネルに属するすべてのチャンネルメッセージでフィルタリングされ、メッセージの作成日によって古いものから新しいものにソートされています。

アイコン — アイコン4

「More Vert」アイコンは、ログインユーザーがメッセージを作成したかどうかに基づいて、時々表示されます。

⚡ アイコンアクション

「メッセージを編集するモーダル」画面へのリンクアクション。

チャットフォームセクション

入力コンポーネント:

入力コンポーネントは、ユーザーがチャンネルに送信するメッセージを入力する場所です。

アイコンコンポーネント:

送信アイコンには、メッセージが作成された後のアクションが含まれています。

⚡ アイコンアクション

「メッセージテキスト」が「入力」、チャンネルが「現在のチャンネル」、ユーザーが「ログイン中のユーザー」であるチャンネルメッセージを作成します。