Chat
チャットの会話のような見た目でコンテンツを表示するコンポーネントです。
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
<Chat name="Taro" avatar="https://cdn.lism-css.com/img/avatar/a-01.jpg"> <p> ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。 </p></Chat>How to use
@lism-css/ui パッケージでChat(c--chat)として提供しています。
Import
import { Chat } from '@lism-css/ui/react';Props
| プロパティ | 説明 |
|---|---|
| avatar | チャットアバター画像のsrcを指定します。 |
| name | チャットに表示する名前を指定します。 |
| variant | チャットタイプを指定できます。speak または think を例では用意しています。|
| direction | チャットの表示位置を指定します。startまたはendを指定します。 |
| keycolor | チャットボックスのキーカラーを指定します。|
| flow |コンテンツを囲む要素(c--chat_content)に渡されます|
ソースコード
ソースコードは GitHub で公開しています。
Examples
<Chat>の使用例ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
<Chat name="Taro" avatar="https://cdn.lism-css.com/img/avatar/a-01.jpg"> <DummyText lang="ja" /></Chat><Chat direction="end" name="Hanako" avatar="https://cdn.lism-css.com/img/avatar/a-02.jpg" keycolor="green"> <DummyText lang="ja" length="codes" /></Chat>Opt-in
variant=“think”
発言ではなく心の中で思っていることを表現する場合に使用できるようなスタイルを追加する例です。
variant='think'Lorem ipsum dolor sit amet.
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"> <DummyText length="xs" /></Chat><Chat variant="think" direction="end" name="Name B" avatar="https://cdn.lism-css.com/img/avatar/a-02.jpg" keycolor="purple"> <DummyText length="codes" /></Chat>