Chat

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

↓

Preview

Taro

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

リサイズ可能

Create Component

Chat(.c--chat)というコンポーネントを作って利用する例を紹介していきます。

Source Code

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

Import

 import jsx from '@/components/lism/Chat/index.jsx';

Props

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

Usage

↓

variant='speak'

Taro

Hanako

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのようなLiberroyの取り組み。

リサイズ可能

<Chat name='Taro' avatar='/img/avatar01.jpg'>
  <Dummy lang='ja' />
</Chat>
<Chat direction='end' name='Hanako' avatar='/img/avatar02.jpg' keycolor='green'>
  <Dummy lang='ja' length='codes' />
</Chat>

↓

variant='think'

Name B

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

Name B

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

リサイズ可能

<Chat variant='think' name='Name B' avatar='/img/avatar01.jpg' keycolor='blue'>
  <Dummy length='s' />
</Chat>
<Chat variant='think' direction='end' name='Name B' avatar='/img/avatar02.jpg' keycolor='purple'>
  <Dummy length='codes' />
</Chat>