チャットバブル

送信者の配置、アバター、タイムスタンプを備えた会話メッセージの表示。 ラウンドスタイルはiMessage風のカラーバブルと角丸を再現。フラットスタイルは Slack風のインライン名、タイムスタンプ、インデント付きテキストのレイアウトです。

ラウンド

カラー背景と角丸を備えたiMessage風チャットバブル

オプション

名前 デフォルト 説明
messages * Array 必須 Array of hashes with :user_name, :content, :timestamp, :sent (Boolean)
show_avatars Boolean true Show avatar circles with initials
show_timestamps Boolean true Show timestamps below messages
grouped Boolean false Group consecutive same-user messages with reduced spacing

フラット

インライン名とタイムスタンプを備えたSlack風のフラットメッセージ

オプション

名前 デフォルト 説明
messages * Array 必須 Array of hashes with :user_name, :content, :timestamp, :sent (Boolean)
show_avatars Boolean true Show avatar squares with initials
show_timestamps Boolean true Show timestamps inline with names
grouped Boolean false Group consecutive same-user messages under one header

変更履歴 v1.0.0

- v1.0.0: Initial release with rounded and flat styles

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得