Chat

チャットツールの会話のようなコンポーネントを作成する例を紹介します。

↓

variant='speak'

Taro

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

リサイズ可能

<Chat name='Taro' avatar='/img/avatar01.jpg'>
  <Dummy lang='ja' />
</Chat>

Import

ソースコードを手動でコピー&ペーストしてご利用ください。

Props

プロパティ	説明
`avatar`	チャットアバター画像のsrcを指定します。
`name`	チャットに表示する名前を指定します。
`variant`	チャットタイプを指定できます。`speak` または `think` を例では用意しています。
`direction`	チャットの表示位置を指定します。`start`または`end`を指定します。
`keycolor`	チャットボックスのキーカラーを指定します。

Examples

↓

variant='speak'

Taro

Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

Hanako

Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet.

Lorem ipsum…
Lorem ipsum…
Lorem ipsum…

リサイズ可能

<Chat name='Taro' avatar='/img/avatar01.jpg' keycolor='green' footer='Footer text...'>
  <Dummy length='codes' />
  <Dummy length='s' />
</Chat>
<Chat direction='end' name='Hanako' avatar='/img/avatar02.jpg' keycolor='red' footer='Footer text...'>
  <Dummy length='codes' />
</Chat>

↓

variant='think'

Name B

Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

Name B

Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

Lorem ipsum dolor sit amet.

リサイズ可能

<Chat variant='think' name='Name B' avatar='/img/avatar01.jpg' keycolor='blue'>
  <p>Lorem ipsum...</p>
</Chat>
<Chat variant='think' direction='end' name='Name B' avatar='/img/avatar02.jpg' keycolor='purple'>
  <p>Lorem ipsum...</p>
</Chat>