このページは Cloud Translation API によって翻訳されました。

toast コンポーネントの作成

アダプティブでアクセス可能なトーストコンポーネントを作成する方法の基本概要。

Adam Argyle

この投稿では、トーストコンポーネントを作成する方法について考えを共有したいと思います。ぜひお試しください。 demo。

</ph>

</ph> デモ

動画で視聴したい場合は、この投稿の YouTube バージョンをご利用ください。

概要

トーストは、ユーザー向けの非インタラクティブかつ受動的な非同期の短いメッセージです。一般的に、ユーザーに通知するためのインターフェースのフィードバックパターンとして使用されます。アクションの結果に関するものです

インタラクション数

トーストは通知とは異なりアラートとプロンプトを作成します。インタラクティブではありません破棄したり存続させたりする意図はありません。通知は、より重要な情報に関するものです。（ページレベルではなく）インタラクション、またはシステムレベルのメッセージが必要な場合。トーストは、他の通知戦略よりも受動的です。

マークアップ

「 <output> 要素はトーストに適しています。できます。正しい HTML があれば、JavaScript と多数の JavaScript が存在します。

トースト

<output class="gui-toast">Item added to cart</output>

より包括的 role="status" を追加します。これによりブラウザが <output> 要素に暗黙的な指定を行わなかった場合は、暗黙的にロール使用できます。

<output role="status" class="gui-toast">Item added to cart</output>

トーストコンテナ

一度に複数のトーストを表示できます。複数のアプリケーションをコンテナが使用されます。このコンテナは、画像のサイズもトーストが画面に表示されます。

<section class="gui-toast-group">
  <output role="status">Wizard Rose added to cart</output>
  <output role="status">Self Watering Pot added to cart</output>
</section>

レイアウト

トーストを inset-block-end トーストが追加されると、その画面の端から積み重ねられます。

GUI コンテナ

トーストコンテナは、トーストを表示するためのレイアウト作業をすべて行います。です。 fixed でビューポートに移動し、論理プロパティを使用します。 inset: さらに、同じ block-end の端からわずかに padding が加わりました。

.gui-toast-group {
  position: fixed;
  z-index: 1;
  inset-block-end: 0;
  inset-inline: 0;
  padding-block-end: 5vh;
}

DevTools のボックスサイズとパディングが .gui-toast-container 要素にオーバーレイされているスクリーンショット

トーストコンテナは、ビューポート内に配置するだけでなく、トーストを配置して分配できるグリッドコンテナです。アイテムは、 justify-content でグループ化し、個別に justify-items で中央に配置しています。トーストが触れないように gap を少し入れてください。

.gui-toast-group {
  display: grid;
  justify-items: center;
  justify-content: center;
  gap: 1vh;
}

トーストグループに CSS グリッドオーバーレイが表示されているスクリーンショット
トーストの子要素間のスペースとギャップがハイライト表示されます。

GUI トースト

個々のトーストには padding があり、角が柔らかく、 border-radius, と min() 関数を使用して、モバイルとパソコンでのサイズ調整に役立ちます次の CSS のレスポンシブサイズトーストがビューポートの 90% を超えて拡大するのを防ぎます。 25ch。

.gui-toast {
  max-inline-size: min(25ch, 90vw);
  padding-block: .5ch;
  padding-inline: 1ch;
  border-radius: 3px;
  font-size: 1rem;
}

パディングと枠線がある単一の .gui-toast 要素のスクリーンショット
表示されます。

スタイル

レイアウトと配置を設定したら、ユーザーへの適応をサポートする CSS を追加する設定や操作を行えます

トーストコンテナ

トーストはインタラクティブではありません。タップやスワイプでは何も起こりませんが、現在、ポインタイベントを消費しています。トーストによるデータの窃取を防ぐ次の CSS でクリックするだけです

.gui-toast-group {
  pointer-events: none;
}

GUI トースト

カスタムプロパティ、HSL、カスタムプロパティを使用して、トーストにライトまたはダークのアダプティブテーマを設定します。優先メディアクエリです。

.gui-toast {
  --_bg-lightness: 90%;

  color: black;
  background: hsl(0 0% var(--_bg-lightness) / 90%);
}

@media (prefers-color-scheme: dark) {
  .gui-toast {
    color: white;
    --_bg-lightness: 20%;
  }
}

アニメーション

新しいトーストが画面に入ると、アニメーションとともに表示されます。モーションの低減に対応するには、次の方法で translate 値を 0 に設定します。ただし、モーション設定メディアでモーションの値を長さに更新する queryすべてのユーザーにアニメーションが表示されますが、トーストの移動が表示されるのは一部のユーザーに限られます移動します

トーストアニメーションで使用されるキーフレームは次のとおりです。CSS が入口、待ち時間、トーストの出口を 1 つのアニメーションでまとめて表示します。

@keyframes fade-in {
  from { opacity: 0 }
}

@keyframes fade-out {
  to { opacity: 0 }
}

@keyframes slide-in {
  from { transform: translateY(var(--_travel-distance, 10px)) }
}

次に、トースト要素が変数を設定し、キーフレームをオーケストレートします。

.gui-toast {
  --_duration: 3s;
  --_travel-distance: 0;

  will-change: transform;
  animation: 
    fade-in .3s ease,
    slide-in .3s ease,
    fade-out .3s ease var(--_duration);
}

@media (prefers-reduced-motion: no-preference) {
  .gui-toast {
    --_travel-distance: 5vh;
  }
}

JavaScript

スタイルとスクリーンリーダーのアクセス可能な HTML を準備したら、ユーザーに応じたトーストの作成、追加、破棄をオーケストレートするできます。トーストコンポーネントのデベロッパーエクスペリエンスは最小限にし、簡単に使い始めることができます。

import Toast from './toast.js'

Toast('My first toast')

トーストグループとトーストの作成

トーストモジュールが JavaScript から読み込まれるときに、トーストコンテナを作成する必要がありますページに追加しますbody より前に要素を追加したので、次のようになります。コンテナが対象のコンテナより上にあるため、z-index のスタックに関する問題が生じる可能性は低くなります。すべての本文の要素が含まれます

const init = () => {
  const node = document.createElement('section')
  node.classList.add('gui-toast-group')

  document.firstElementChild.insertBefore(node, document.body)
  return node
}

head タグと body タグの間のトーストグループのスクリーンショット。

init() 関数がモジュールに対して内部で呼び出され、要素がスタッシュされる Toaster として:

const Toaster = init()

トースト HTML 要素を作成するには、createToast() 関数を使用します。「トースト用のテキストが必要で、<output> 要素が作成され、装飾されます。それをクラスと属性とともに指定し、テキストを設定してノードを返します。

const createToast = text => {
  const node = document.createElement('output')
  
  node.innerText = text
  node.classList.add('gui-toast')
  node.setAttribute('role', 'status')

  return node
}

1 つまたは複数のトーストを管理する

JavaScript により、トーストを格納するためのコンテナがドキュメントに追加され、トーストを追加できますaddToast() 関数は、1 つのリクエストに対するトーストを多数開発できますまずトーストの数とモーションに問題がないか確認しますこの情報を使ってトーストを追加するか他のトーストが「スペースを作りたい」ように見えるアニメーションにする新しいトーストを作成します

const addToast = toast => {
  const { matches:motionOK } = window.matchMedia(
    '(prefers-reduced-motion: no-preference)'
  )

  Toaster.children.length && motionOK
    ? flipToast(toast)
    : Toaster.appendChild(toast)
}

最初のトーストを追加するとき、Toaster.appendChild(toast) はトーストを追加します。 CSS アニメーションをトリガーするページ: アニメーションイン、待機 3s、アニメーションアウト。 flipToast() は、次の手法を使用して、既存のトーストがある場合に呼び出されます。「FLIP」作成者: Lewis。考え方としてはコンテナの位置（新しいトーストを追加する前と後）に配置します。トースターが現在どこにあるか、これからどこに行くかを示すものと考えてください。移動することもできます

const flipToast = toast => {
  // FIRST
  const first = Toaster.offsetHeight

  // add new child to change container size
  Toaster.appendChild(toast)

  // LAST
  const last = Toaster.offsetHeight

  // INVERT
  const invert = last - first

  // PLAY
  const animation = Toaster.animate([
    { transform: `translateY(${invert}px)` },
    { transform: 'translateY(0)' }
  ], {
    duration: 150,
    easing: 'ease-out',
  })
}

CSS グリッドがレイアウトのリフトを行います。新しいトーストが追加されるとスペースを入れておきます。一方、ウェブアニメーション元の位置からコンテナをアニメーション化します。

すべての JavaScript のまとめ

Toast('my first toast') が呼び出されると、トーストが作成され、ページに追加されます（新しいトーストに合わせてコンテナがアニメーション化されている可能性もあります）。 Promise 返され、作成されたトーストが視聴: Promise の解決のための CSS アニメーション完了（3 つのキーフレームアニメーション）。

const Toast = text => {
  let toast = createToast(text)
  addToast(toast)

  return new Promise(async (resolve, reject) => {
    await Promise.allSettled(
      toast.getAnimations().map(animation => 
        animation.finished
      )
    )
    Toaster.removeChild(toast)
    resolve() 
  })
}

このコードでわかりにくい部分は Promise.allSettled() 関数にあるように感じたと toast.getAnimations() のマッピングを行います。今回は複数のキーフレームアニメーションを使ったトーストのすべての処理が終了したことを確信するには、リクエストの各メソッドと、 finished 完了がモニタリングされます。 allSettled すべての Promise が処理できたら完了として自身を解決します。満たされていることを示します。await Promise.allSettled() を使用すると、次のようになります。コードを使用して確実に要素を削除し、トーストが処理を完了したことを説明します。最後に、resolve() を呼び出すことで高レベルの Toast Promise が満たされるため、トーストが表示された後、デベロッパーはクリーンアップやその他の作業を行うことができます。

export default Toast

最後に、Toast 関数がモジュールからエクスポートされ、他のスクリプトがインポートして使用します。

トーストコンポーネントの使用

トースト、つまりトーストのデベロッパーエクスペリエンスを使用するには、 Toast 関数を呼び出して、メッセージ文字列で呼び出します。

import Toast from './toast.js'

Toast('Wizard Rose added to cart')

開発者がクリーンアップ処理などを行う場合は非同期と RNN のどちらを使用しても待機。

import Toast from './toast.js'

async function example() {
  await Toast('Wizard Rose added to cart')
  console.log('toast finished')
}

まとめ

どのようにやり方をしたかわかったので、どのように感じますか？ ‽ 🙂?

アプローチを多様化して、ウェブで構築するすべての方法を学びましょう。デモを作成し、ツイートしてリンクを送ってください下の [コミュニティリミックス]セクションにアクセスしてください

コミュニティリミックス

@_developit（HTML/CSS/JS を使用）: demo &コード
Joost van der Schee（HTML/CSS/JS を使用）: デモとコード

toast コンポーネントの作成

概要

インタラクション数

マークアップ

トースト

トースト コンテナ

レイアウト

GUI コンテナ

GUI トースト

スタイル

トースト コンテナ

GUI トースト

アニメーション

JavaScript

トースト グループとトーストの作成

1 つまたは複数のトーストを管理する

すべての JavaScript のまとめ

トースト コンポーネントの使用

まとめ

コミュニティ リミックス

トーストコンテナ

トーストコンテナ

トーストグループとトーストの作成

トーストコンポーネントの使用

コミュニティリミックス