Chat Message
写真、テキスト、画像、配信時間、ステータスなどの対話型コンテンツを表示します。
ChatMessageは、通知またはチャット画面に会話の投稿を表示するために使用します。
使用方法
-
ChatMessageパターンをプレビューにドラッグします。
-
プレースホルダに必要なコンテンツを設定します。
-
パブリッシュしてテストします。
入力パラメータ
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| IsRight | Trueに設定されている場合、パターンの位置を右に合わせます。 | Boolean | No | なし |
| IsInline | Trueに設定すると、チャットバルーンスタイルが投稿パターンと似たスタイルに変更されます。 | Boolean | No | False |
| Color | 背景色を設定します。 | Color Identifier | No | Entities.Color.Neutral3 |
| ExtendedClass | このブロックにカスタムスタイルクラスを追加します。 | Text | No | なし |
レイアウトおよびクラス
イベント
| イベント名 | 説明 | 必須 |
|---|---|---|
| OnClick | ユーザーがメッセージコンテナをクリックしたときにトリガーされるイベント。 | False |
CSSセレクタ
| 要素 | CSSクラス | 説明 |
|---|---|---|
| .chat-message-actions | is--hidden | ToggleChatActionsサーバーアクションでコンテンツを非表示にする場合 |
| .chat-message-actions | is--visible | ToggleChatActionsサーバーアクションでコンテンツを表示する場合 |
高度なユースケース
ChatMessageスタイルをユーザーに応じて変更する
-
チャットユーザーをSource Record Listにして、ListRecordsウィジェットをプレビューにドラッグします。
-
ListRecordsウィジェットに、ChatMessageパターンをドラッグします。
-
IsRightパラメータに「
If(Chat.List.Current.ChatUser.Sender, True, False)」と入力し、アクティブなユーザーの右側にメッセージが表示されるようにします。 -
Colorパラメータに「
If(Chat.List.Current.ChatUser.Sender, Entities.Color.Primary, Entities.Color.Neutral3)」と入力し、ユーザーに応じて背景を変更します。 -
ExtendedClassプロパティで「
If(Chat.List.Current.ChatUser.Sender, "color-neutral-0", "")」を使用し、背景が初期色の場合にテキストを白色に変更します。初期色が白色の場合、上記のコードを「color-neutral-10」に変更します。 -
UserInitialsパターンで、［Image］プレースホルダ内のColorパラメータを「
If(Chat.List.Current.ChatUser.Sender, Entities.Color.Primary, Entities.Color.Neutral3)」に設定します。これはテキスト色を上記で設定した条件と合わせるためです。 -
IsLightパラメータを「
If(Chat.List.Current.ChatUser.Sender, True, False)」に設定します。 -
パブリッシュしてテストします。
結果は以下のようになります。
クリック時に［Actions］プレースホルダを表示または非表示にする
- ChatMessageパターンをプレビューにドラッグします。
- パターンの名前を入力します。
- Eventsプロパティで、ハンドラの新しい画面アクションを選択します。
-
この新しいアクションに、ToggleChatActionsをドラッグします。これは［Logic］タブのOutSystemsUIWeb - ChatMessageフォルダにあります。
-
WidgetIdパラメータで、ChatMessageパターンの名前を入力します。
- パブリッシュしてテストします。
結果は以下のようになります。
