Chat

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

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

↓

Preview

Taro

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ可能

Create Component

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

Source Code

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

Import

import { Chat } from '@lism-css/ui/react';

Props

プロパティ	説明
`avatar`	チャットアバター画像のsrcを指定します。
`name`	チャットに表示する名前を指定します。
`variant`	チャットタイプを指定できます。`speak` または `think` を例では用意しています。
`direction`	チャットの表示位置を指定します。`start`または`end`を指定します。
`keycolor`	チャットボックスのキーカラーを指定します。
`flow`	コンテンツを囲む要素(`c--chat_content`)に渡されます

Usage

↓

variant='speak'

Taro

Hanako

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

リサイズ可能

<Chat name='Taro' avatar='https://cdn.lism-css.com/img/avatar/a-01.jpg'>
  <Dummy lang='ja' />
</Chat>
<Chat direction='end' name='Hanako' avatar='https://cdn.lism-css.com/img/avatar/a-02.jpg' keycolor='green'>
  <Dummy lang='ja' length='codes' />
</Chat>

↓

variant='think'

Name B

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

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='https://cdn.lism-css.com/img/avatar/a-01.jpg' keycolor='blue'>
  <Dummy length='s' />
</Chat>
<Chat variant='think' direction='end' name='Name B' avatar='https://cdn.lism-css.com/img/avatar/a-02.jpg' keycolor='purple'>
  <Dummy length='codes' />
</Chat>