チャットレイアウトを作成する方法

This article was originally published on my blog.
TailWindCSSはあなたのウェブサイトやアプリケーションの迅速な開発とスタイリングを可能にするユーティリティクラスを提供します.
この簡単な記事では、CookGridユーティリティクラスを使用してTalWindCSSとのチャットレイアウトを構築する方法を示します.
レッツゴー!

技術スタック次世代JSと
続ける前に、次に注意することが重要です.JSは、このチャットアプリケーションを構築するためにsupabaseと組み合わせて使用されています.
フロントエンドのフレームワークとデータベースの選択は、スタイリング自体とは無関係ですが、このテクノロジスタックを使用して、Supabaseデータベースからメッセージをプルし、メッセージが現在ログインしているユーザーに属しているかどうかを検出します.詳細は1分で.

チャットアプリケーションのマークアップ
チャットアプリケーションのレイアウトのマークアップに注意してみましょう.レイアウト全体を2つのコンポーネントで処理します.MessageList and Message.
MessageListコンポーネント
トップレベルのコンポーネントは、メッセージを保持し、ページ上のリストをレンダリングする責任が必要です.次のコードでは、コンポーネントと呼ばれるコンポーネントを作成しましたMessageList メッセージのデータベースを問い合わせると、ページの上にリストされていないリストでそれらを一覧表示し、各メッセージを個人に渡すMessage コンポーネント.

export const MessageList = () => {
  const { messages } = useFeed(); // Retrieve messages from database

  return (
    <ul>
      {messages && messages.map((message) => <Message message={message} />)}
    </ul>
  );
};

メッセージコンポーネント
The Message コンポーネントは単にコンテンツが小道具によって渡され、それに応じてスタイルされますが表示されます.

export const Message = ({ message }) => {
  const { user } = useAuth(); // the currently logged in user

  function isMessageFromUser() {
    return user?.id === message.user_id;
  }

  return (
    <div>
      <div>{message.message}</div>
    </div>
  );
};

注意すべきこと

The useAuth フックは現在のログインしたユーザをプルするために使用されます

The isMessageFromUser メッセージがユーザからログインされた場合、迅速に評価するために使用されます.

上のマークアップをちらりと見た後に、あなたはなぜ我々が余分の親を必要とするかについて疑問に思うかもしれませんdiv にMessage コンポーネント.我々は余分が必要div スタイリング目的のために;すぐにその上で.

チャットのレイアウトを作成する
あなたはそれがチャットのレイアウトになるときに何を期待するかを知っている.あなたが画面を見ている場合は、他の人によって送信されるすべてのメッセージが左に配置されている間、あなたが送るメッセージが右に整列表示されます.
どのように我々はTreeWindCSSでこれを達成するのですか?
真実は、これにアプローチするための一握りの方法があると言われる.
空を埋めるために余裕を使うことができました.私たちはflexboxを使うことさえできました.
私の意見では、しかし、CSSのグリッドは、最も簡単なソリューションを提供するときにチャットアプリケーションの期待レイアウトを作成しようとします.
gist :

我々はトップレベルをターゲットにCSSグリッドを使用しますul 要素と単一の列のグリッドレイアウトを作成します.

次に、子要素(個々のメッセージ)は、誰がメッセージを送ったかに応じて、左または右に整列します.現在ログインしているユーザがメッセージを送ったなら、place-self-end ユーティリティクラスで右側に並びます.そうでなければ、我々は使用しますplace-self-start 左に並べる.

簡単、右?何が起こるかを強化するのを助けるグラフィックは、ここにあります.


MessageListコンポーネントのスタイル設定
上記の計画の後で、我々がする必要があるすべては、目標ですul 要素と次のユーティリティークラスを適用します.

<ul className="space-y-12 grid grid-cols-1">
  {messages && messages?.map((message) => <Message message={message} />)}
</ul>

私の使用space-y-12 各メッセージに垂直軸に呼吸室を与える.
それだ!我々の注意を向けましょうMessage コンポーネント.

メッセージコンポーネントのスタイル
このコンポーネントは、スタイルを動的に適用する必要がありますユーザーがメッセージを送ったなら、それは右側に整列しなければなりません、さもなければ、それは左に整列しなければなりません.
覚えてisMessageFromUser ヘルパー機能我々は上記を作成?これにより、いくつかの条件付きチェックをインラインにし、評価に基づいてユーティリティクラスを適用できるようになります

<div
  className={`${
    isMessageFromUser() ? 'place-self-end' : 'place-self-start'
  } space-y-2`}
>
  <div className={`bg-white p-5 rounded-2xl`}>{message.message}</div>
</div>

これで、各メッセージが正しく整列する必要があります!

メッセージ足
最後の仕上げを追加するには、メッセージの足からメッセージが来ている側を強化するためのメッセージの足を追加しましょう.もう一度、我々はスタイルを支援するヘルパー機能をCA.

<div
  className={`${
    isMessageFromUser() ? 'place-self-end' : 'place-self-start'
  } space-y-2`}
>
  <div
    className={`bg-white p-5 rounded-2xl ${
      isMessageFromUser() ? 'rounded-tr-none' : 'rounded-tl-none'
    }`}
  >
    {message.message}
  </div>
</div>

そして、それで、我々のチャットアプリケーションはこのように見える!


結論
TailWindCSSは超簡単にスタイルをWebページやアプリケーションになります.そして、Flexboxがこのような仕事のためのオプションへのあなたの試みであったかもしれない間、私の望みは、この記事がCSS格子でチャットレイアウトをつくることがどれくらい簡単であるかについて示したということです!
あなたが最終版をチェックアウトしたいならば、私は下記のCodepenデモをリンクしました!
あなたが読書を楽しんでいるならば、私が私が他のCSSチップとトリックを共有する私の会報のためにサインアップすることを考えてください!
https://www.getrevue.co/profile/braydoncoyer