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

タブコンポーネントの作成

iOS アプリや Android アプリのものと同様のタブコンポーネントを作成する方法について、基本的な概要を示します。

Adam Argyle

この投稿では、ウェブ用のタブコンポーネントの構築に関する考え方を共有します。応答性に優れ、複数のデバイス入力をサポートし、ブラウザで動作します。デモをお試しください。

</ph>

</ph> デモ

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

概要

タブはデザインシステムの一般的なコンポーネントですが、さまざまな形状やフォームです。最初は、<frame> 要素に基づくデスクトップタブがありましたが、物理特性に基づいてコンテンツをアニメーション化する、バターのようなモバイルコンポーネント。どれも同じこと、「スペースの節約」を目指しています。

現在、タブのユーザーエクスペリエンスに不可欠なのはボタンナビゲーション領域です表示フレーム内のコンテンツの表示 / 非表示を切り替えます。多岐にわたるコンテンツ領域は同じスペースを共有しますが、各コンテンツ領域は、指定した基準に従って移動することもできます。

ウェブがコンポーネントのコンセプトに適用しているスタイルの非常に多様性により、コラージュはかなり混乱しています。 — </ph> 過去 10 年間に登場したタブコンポーネントのウェブデザインスタイルのコラージュ

ウェブ戦術

まとめると、このコンポーネントはとても簡単にビルドできウェブプラットフォームの重要な機能:

scroll-snap-points: スマートなスワイプ操作とキーボード操作適切なスクロール停止位置
ディープリンク - URL ハッシュを使用: ブラウザ処理、ページ内スクロールのアンカーと共有のサポート
<a> 要素と id="#hash" 要素のマークアップでのスクリーンリーダーのサポート
prefers-reduced-motion: クロスフェード遷移とインスタント検索を有効にしますページ内スクロール
下書きの @scroll-timeline ウェブ機能。動的に下線を引いて、選択したタブの色を変更する

HTML

ここでの UX は基本的に、リンクをクリックすること、ネストされた URL を URL で表すことです。コンテンツ領域が更新されます。ブラウザがあります。

そこには構造的コンテンツメンバー（リンクと :target）があります。水リンクのリストが必要です。リンクのリストは <nav> が適しています。また、<article> のリストが必要です。これには <section> が適しています。各リンクハッシュはセクションと一致しアンカー機能によってブラウザがスクロールできるようにします

</ph>

</ph> リンクボタンがクリックされ、フォーカスのあるコンテンツ内でスライドする

たとえば、リンクをクリックすると、:target の記事が自動的に Chrome 89、JS は不要。ユーザーは、変更することはできません。これは無料のコンテンツであり、マークアップを追加します。

次のマークアップを使用してタブを整理しました。

<snap-tabs>
  <header>
    <nav>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
    </nav>
  </header>
  <section>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </section>
</snap-tabs>

次のようにして、<a> 要素と <article> 要素間の接続を確立できます。 href プロパティと id プロパティは次のようになります。

<snap-tabs>
  <header>
    <nav>
      <a href="#responsive"></a>
      <a href="#accessible"></a>
      <a href="#overscroll"></a>
      <a href="#more"></a>
    </nav>
  </header>
  <section>
    <article id="responsive"></article>
    <article id="accessible"></article>
    <article id="overscroll"></article>
    <article id="more"></article>
  </section>
</snap-tabs>

次に、記事にさまざまなロレムを混ぜて、リンクにさまざまな長さと画像を組み合わせたタイトルのセットです。扱うコンテンツがあればできます。

スクロールレイアウト

このコンポーネントには、次の 3 種類のスクロール領域があります。

ナビゲーション（ピンク）は水平方向スクロール可能
コンテンツ領域（青）は水平方向スクロール可能
各記事項目（緑色）は縦方向です。スクロール可能にします。

3 つのカラフルなボックスと、その色の方向を示す矢印（スクロール領域の枠線とスクロール方向を示す矢印）が表示されている。

スクロールに関連する要素には、次の 2 種類があります。

ウィンドウ
overflow が定義された、寸法が定義されたボックスプロパティスタイル。
特大サーフェス
このレイアウトでは、リストコンテナ: nav リンク、セクション記事、記事の内容です。

レイアウト: `<snap-tabs>`

私が選んだ最上位のレイアウトは Flex（Flexbox）でした。方向を column の場合は、ヘッダーとセクションが縦方向に並べられます。Google のスクロールウィンドウが表示され、オーバーフローが非表示になります。ヘッダーとセクションでは、個別のゾーンとしてまもなくオーバースクロールが使用されます。

HTML

<snap-tabs>
  <header></header>
  <section></section>
</snap-tabs>

CSS

  snap-tabs {
  display: flex;
  flex-direction: column;

  /* establish primary containing box */
  overflow: hidden;
  position: relative;

  & > section {
    /* be pushy about consuming all space */
    block-size: 100%;
  }

  & > header {
    /* defend against  needing 100% */
    flex-shrink: 0;
    /* fixes cross browser quarks */
    min-block-size: fit-content;
  }
}

カラフルな 3 スクロールの図に戻ると、

これで <header> は（ピンク）になる準備が整いました。スクロールコンテナ。
<section> は（青）スクロールとして準備されています。されます。

下でハイライトしたフレームは VisBug は、Google がウィンドウを確認し、作成できます。

ヘッダーとセクションの要素にはホットピンクのオーバーレイがあり、コンポーネント内で占めるスペースを囲んでいます。

タブの `<header>` レイアウト

次のレイアウトもほぼ同じです。Flex を使用して縦方向の順序付けを作成します。

HTML

<snap-tabs>
  <header>
    <nav></nav>
    <span class="snap-indicator"></span>
  </header>
  <section></section>
</snap-tabs>

CSS

header {
  display: flex;
  flex-direction: column;
}

.snap-indicator は、リンクのグループに沿って水平に移動する。このヘッダーレイアウトはその舞台を整えるのに役立ちますここに絶対位置の要素はありません。

nav 要素と span.indicator 要素には、コンポーネント内で占めるスペースを囲む、ホットピンクのオーバーレイがあります。

次はスクロールのスタイルですスクロールスタイルを共有できることがわかりました。 2 つの横スクロール領域（ヘッダーとセクション）の間にクラス、.scroll-snap-x。

.scroll-snap-x {
  /* browser decide if x is ok to scroll and show bars on, y hidden */
  overflow: auto hidden;
  /* prevent scroll chaining on x scroll */
  overscroll-behavior-x: contain;
  /* scrolling should snap children on x */
  scroll-snap-type: x mandatory;

  @media (hover: none) {
    scrollbar-width: none;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
}

それぞれが X 軸でオーバーフロー、オーバースクロールをトラップするためのスクロール封じ込め、非表示が必要タッチデバイスではスクロールバー、コンテンツのロックではスクロールスナップを使用します。説明します。キーボードのタブの順序がアクセス可能で、操作ガイド自然に焦点を絞ることができますスクロールスナップコンテナも適切なカルーセルスタイルで表示されます簡単に操作できます。

タブのヘッダー `<nav>` レイアウト

ナビゲーションリンクは、縦方向に、改行を入れずに一直線に配置する必要があります。各リンク項目をスクロールスナップコンテナにスナップする必要があります。Swift 2021 年の CSS です。

HTML

<nav>
  <a></a>
  <a></a>
  <a></a>
  <a></a>
</nav>

CSS

  nav {
  display: flex;

  & a {
    scroll-snap-align: start;

    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
}

各リンクはそれ自体のスタイルとサイズを設定するため、ナビゲーションレイアウトは方向と流れです。ナビゲーションアイテムの幅を一意にすることでタブ間の遷移を実現インジケーターが新しいターゲットに合わせて幅を調整します。いくつもの要素がある場合、ブラウザはスクロールバーを表示するかどうかを決定します。

ナビゲーションの a 要素にはホットピンクオーバーレイがあり、コンポーネント内で占めるスペースとオーバーフローする領域が概説されている

タブの `<section>` レイアウト

このセクションはフレキシブルアイテムであり、スペースを最も多く使用する必要があります。これは、記事を配置する列も作成する必要がありますここでも CSS 2021 でぜひご利用ください。block-size: 100% は、この要素を引き伸ばして、それ自体のレイアウトで、一連の親要素が作成される親の幅が 100% である列。ここではパーセンテージが効果的親に厳密な制約を記述したからです

HTML

<section>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</section>

CSS

  section {
  block-size: 100%;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
}

これはまるで、押し付けがましい方法で、垂直方向に可能な限り拡大するようなものです。（flex-shrink: 0 に設定したヘッダーを思い出してください。この問題に対する防御策です。展開プッシュなど）を使用して、行の高さを設定します。「 auto-flow スタイルは、子を常に水平方向にレイアウトするようグリッドに指示します行を折り返しません親ウィンドウにオーバーフローします

記事の要素がホットピンクのオーバーレイで表示され、コンポーネント内で占める領域とあふれている領域が概説されている

頭を巻き込むのが難しいから！このセクション要素は同時に一連の箱を作りましたビジュアルと説明が役に立ちます。

タブの `<article>` レイアウト

ユーザーが記事コンテンツをスクロールでき、スクロールバーがオーバーフローがある場合にのみ表示されます。これらの記事の要素が見やすく整理されていますなります。同時に親はスクロールの親で、スクロールの子でもあります。「ブラウザは複雑なタップ操作、マウス操作、キーボード操作に実際に対応しています。説明します。

HTML

<article>
  <h2></h2>
  <p></p>
  <p></p>
  <h2></h2>
  <p></p>
  <p></p>
  ...
</article>

CSS

article {
  scroll-snap-align: start;

  overflow-y: auto;
  overscroll-behavior-y: contain;
}

親スクローラー内に記事をスナップするようにしました。非常に好きなナビゲーションリンク項目と記事要素がインライン開始にスナップする方法表示することもできます。見た目も使用感もあります。

記事要素とその子要素には、コンポーネント内で占めるスペースとオーバーフロー方向が輪郭線で囲まれているホットピンクのオーバーレイがあります

記事がグリッドの子であり、サイズがビューポートとして事前に定義されているスクロールの UX を提供したい領域ですつまり高さと幅は必要ないのでここにはスタイルがありますが、あとはオーバーフロー方法を定義するだけです。「overflow-y」を「auto」に設定しさらに、便利なオーバースクロール動作でスクロール操作をトラップします。プロパティです。

3 つのスクロールエリアのまとめ

システム設定で [スクロールバーを常に表示する] を選択しました。たぶんレイアウトが機能することの重要性が 2 倍に高まっています。レイアウトとスクロールの連携を確認しましょう。

3 つのスクロールバーが表示されるよう設定されており、レイアウトスペースを消費するようになり、コンポーネントも見栄えが良くなりました。

スクロールバーのガターを見ればスクロール領域の方向、スクロール領域と相互作用する方法相互に通信します。これらの各スクロールウィンドウフレームもグリッドの親をレイアウトに追加します。

DevTools を使用してこれを可視化します。

スクロール領域にはグリッドと Flexbox ツールのオーバーレイがあり、コンポーネント内で占めるスペースとオーバーフローする方向が概説されています。 — </ph> Flexbox のナビゲーション要素のレイアウトがアンカー要素でいっぱいの Chromium Devtools 記事の要素でいっぱいのグリッドセクションレイアウトと、段落や見出し要素でいっぱいの要素です。

スクロールレイアウトの完成（スナップ、ディープリンク可能、キーボード）アクセスできるようにします。UX の強化、スタイル、楽しさの強力な基盤。

注目の機能

スナップされた子をスクロールすると、サイズ変更時にロック位置が維持されます。つまりデバイスの回転時やブラウザでの表示時に、JavaScript で何も表示する必要がないクリックします。Chromium DevTools で試すデバイスモード [レスポンシブ] 以外のモードを選択してから、デバイスフレームのサイズを変更する要素がビューに表示され、コンテンツによってロックされたままになります。このたびは使用できるようになりました。こちらが関連するブログ投稿をご覧ください。

アニメーション

ここでのアニメーションの目的は、UI の操作を明確にリンクすることです。できます。これは、ユーザーを（うまくいけば）コンテンツを発見しやすくします目的と行動を意識してできます。ユーザーはモーションを環境の設定、インターフェースで視聴者の好みに応えるのが大好きです。

記事のスクロール位置にタブの下線をリンクします。スナップはアニメーションの開始と終了を固定しますこれにより、<nav> が保持され、コンテンツに接続されるミニマップ。 CSS と JS の両方からユーザーのモーション設定を確認します。また、思いやりのある場所はほとんどない！

スクロール動作

:targetと element.scrollIntoView()。デフォルトは Instant です。ブラウザはスクロール位置を指定しますでは、スクロール位置に遷移させるにはどうすればよいでしょうか。どうすればよいでしょうか。

@media (prefers-reduced-motion: no-preference) {
  .scroll-snap-x {
    scroll-behavior: smooth;
  }
}

ここではモーションを導入します（スクロールなど）スタイルを適用できるのは、ユーザーが選択をオペレーティングシステムの動作を縮小できるからですこれにより同意を示す必要があります

タブのインジケーター

このアニメーションの目的は、インジケーターと状態を関連付けることをできます。ユーザー向けにクロスフェード border-bottom スタイルに色を付けることにしました動きの少ない、スクロールリンクのスライド + カラーフェードアニメーションを好むユーザーモーションに抵抗のないユーザーを優先して配信されます

Chromium DevTools で設定を切り替えて、2 つのさまざまな遷移スタイルを使用できます。構築はとても楽しかったです。

@media (prefers-reduced-motion: reduce) {
  snap-tabs > header a {
    border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
    transition: color .7s ease, border-color .5s ease;

    &:is(:target,:active,[active]) {
      color: var(--text-active-color);
      border-block-end-color: hsl(var(--accent));
    }
  }

  snap-tabs .snap-indicator {
    visibility: hidden;
  }
}

ユーザーが動きの抑制を好む場合は .snap-indicator を非表示にします。必要なくなります。次に、それを border-block-end スタイルと transition。また、タブ操作では、アクティブなナビゲーションアイテムがブランドの下線のハイライトだけなのにテキストの色も暗くなっています「アクティブ要素では、テキストの色のコントラストが高くなり、暗い色調のアクセントになります。

CSS を数行追加するだけで、見られているとユーザーに感じてもらえますユーザーのモーションの好みを尊重しています）。気に入ったわ

`@scroll-timeline`

前のセクションでは、モーションを低減したクロスフェードを処理する方法を説明しました。できます。このセクションでは、インジケータとまとめて確認できます次はおもしろい実験的な機能についてです。皆さんがとても楽しみです。

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

まず、JavaScript でユーザーのモーション設定を確認します。結果に false であり、ユーザーがモーションの軽減を好むことを意味し、何も実行しません。モーション効果のリンクです

if (motionOK) {
  // motion based animation code
}

このドキュメントの作成時点では、 @scroll-timeline はありません。Google ドラフト仕様に実装しています。ただし、ここではポリフィルを使用します。説明します。

`ScrollTimeline`

CSS と JavaScript のどちらでもスクロールのタイムラインを作成できますが、ここでは、アニメーションでライブ要素の測定を使用できるようにします。

const sectionScrollTimeline = new ScrollTimeline({
  scrollSource: tabsection,  // snap-tabs > section
  orientation: 'inline',     // scroll in the direction letters flow
  fill: 'both',              // bi-directional linking
});

あるものを別のスクロール位置に合わせて表示させ、 ScrollTimeline スクロールリンクのドライバ scrollSource を定義します。通常、ウェブ上のアニメーションはグローバルな時間枠で実行されますが、カスタム sectionScrollTimeline をメモリに保持したい場合は、すべて変更できます。

tabindicator.animate({
    transform: ...,
    width: ...,
  }, {
    duration: 1000,
    fill: 'both',
    timeline: sectionScrollTimeline,
  }
);

アニメーションのキーフレームに入る前に、スクロールのフォロワー（tabindicator）を指し、アニメーションベースで表示しますカスタムタイムライン上に表示されますこれでリンクは完了しますが、最後の要素（アニメーション化するステートフルなポイント）が不足しています。できます。

動的キーフレーム

非常に強力な純粋な宣言型 CSS を使用して、 @scroll-timelineだが、選択したアニメーションが動的すぎる現在、 auto の幅の間で切り替える手段が用意されており、子の長さに基づくキーフレームの数。

ただし、JavaScript がその情報を取得する方法を認識しているため、実行時に計算された値を取得するようにします。

tabindicator.animate({
    transform: [...tabnavitems].map(({offsetLeft}) =>
      `translateX(${offsetLeft}px)`),
    width: [...tabnavitems].map(({offsetWidth}) =>
      `${offsetWidth}px`)
  }, {
    duration: 1000,
    fill: 'both',
    timeline: sectionScrollTimeline,
  }
);

tabnavitem ごとに、offsetLeft の位置を分離して文字列を返します。それを translateX 値として使用するものです。これにより、4 つの変換キーフレームが作成します。幅についても同様に、ダイナミック幅について質問します。キーフレーム値として使用されます

フォントとブラウザの設定に基づく出力例は次のとおりです。

TranslateX キーフレーム:

[...tabnavitems].map(({offsetLeft}) =>
  `translateX(${offsetLeft}px)`)

// results in 4 array items, which represent 4 keyframe states
// ["translateX(0px)", "translateX(121px)", "translateX(238px)", "translateX(464px)"]

キーフレームの幅:

[...tabnavitems].map(({offsetWidth}) =>
  `${offsetWidth}px`)

// results in 4 array items, which represent 4 keyframe states
// ["121px", "117px", "226px", "67px"]

まとめると、タブインジケーターが 4 つのキーフレームにわたってアニメーション表示されるようになりました。セクションスクローラーのスクロールスナップ位置に応じて異なります。スナップポイントキーフレーム間の境界を明確にしてアニメーションの感触が同期します。

アクティブタブとアクティブでないタブが VisBug オーバーレイで表示され、両方のコントラストスコアが合格していることを示す

ユーザーは、動画の幅と高さ、あるセクションから次のセクションへのインジケーターの変化の位置、追跡スクロールできます

お気づきでないかもしれませんがハイライト表示されたナビゲーション項目が選択されます。

選択されていない薄いグレーは、ハイライト表示された部分がコントラストが大きくなります。カーソルを合わせたときなど、テキストの色が遷移するのはスクロール時に色が変わって表示されます下線インジケーターと同期されます。

方法は次のとおりです。

tabnavitems.forEach(navitem => {
  navitem.animate({
      color: [...tabnavitems].map(item =>
        item === navitem
          ? `var(--text-active-color)`
          : `var(--text-color)`)
    }, {
      duration: 1000,
      fill: 'both',
      timeline: sectionScrollTimeline,
    }
  );
});

各タブナビゲーションリンクにはこの新しいカラーアニメーションが必要で、同じスクロールがトラッキングされます下線インジケーターとして使用できます。以前と同じタイムラインを使用します。目盛りをスクロールしたときに目盛りを出力できます追加します。先ほどと同じようにループ内に 4 つのキーフレームを作成し、できます。

[...tabnavitems].map(item =>
  item === navitem
    ? `var(--text-active-color)`
    : `var(--text-color)`)

// results in 4 array items, which represent 4 keyframe states
// [
  "var(--text-active-color)",
  "var(--text-color)",
  "var(--text-color)",
  "var(--text-color)",
]

var(--text-active-color) 色のキーフレームでリンクがハイライト表示されます。それ以外は標準のテキスト色です。ネストされたループにより、外側のループが各ナビゲーション項目で、内側のループが navitem の個人用キーフレームです外側のループの要素が選択されたときにそれを知ることができます。

これを書くのはとても楽しかったです。大好きさ

その他の JavaScript の機能強化

ここで紹介するコア機能は使用できます。では次に、JavaScript がコードベースにできます。

ディープリンク

ディープリンクの意図はモバイル上の用語だと思いますが、タブを使用して、タブのコンテンツへの URL を直接共有できます。「ブラウザは、URL ハッシュで一致した ID にページ内を移動します。見つかったこの onload ハンドラにより、プラットフォーム間で影響が及びました。

window.onload = () => {
  if (location.hash) {
    tabsection.scrollLeft = document
      .querySelector(location.hash)
      .offsetLeft;
  }
}

スクロール終了の同期

ユーザーは必ずしもキーボードをクリックしたり操作したりしているわけではなくスクロールせずに見える範囲に配置してくださいセクションスクローラーが停止したときスクロール（スクロールする場所）を上部のナビゲーションバーに配置する必要があります。

スクロールの終了を待つ方法: js tabsection.addEventListener('scroll', () => { clearTimeout(tabsection.scrollEndTimer); tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100); });

セクションをスクロールするときは常に、セクションタイムアウトがあればクリアします。新しいものを作成できますセクションのスクロールを停止するときは、タイムアウトをクリアしないでください。休息後 100 ミリ秒後に起動します。イベントが発生したら、関数を呼び出して、ユーザーが停止したところから再開されます

const determineActiveTabSection = () => {
  const i = tabsection.scrollLeft / tabsection.clientWidth;
  const matchingNavItem = tabnavitems[i];

  matchingNavItem && setActiveTab(matchingNavItem);
};

スクロールがスナップされたと仮定し、現在のスクロール位置を幅で割った値は、スクロール領域の小数ではなく整数値にする必要があります。次に、この計算されたインデックスを介してキャッシュから navitem を取得し、一致するものを送信します。

const setActiveTab = tabbtn => {
  tabnav
    .querySelector(':scope a[active]')
    .removeAttribute('active');

  tabbtn.setAttribute('active', '');
  tabbtn.scrollIntoView();
};

アクティブなタブを設定するには、まず現在アクティブなタブをすべて消去してから、ナビゲーションアイテムのアクティブ状態属性。scrollIntoView() への呼び出し CSS とのインタラクションが楽しいものであることは注目に値します。

.scroll-snap-x {
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

水平スクロールのスナップユーティリティ CSS には、ネストしたメディアクエリ smooth のスクロール（ユーザーがモーショントレラントな場合）。JavaScript は JavaScript により、を呼び出してスクロール要素を表示でき、CSS では宣言的に UX を管理できます。ときどき小さいマッチングができて、とても嬉しい。

まとめ

私のやり方わかったな、どうやって？！楽しい時間をお過ごしください説明します。誰が最初のバージョンをフレームワーク🙂

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

コミュニティリミックス

@devnook、@rob_dodson、@DasSurma をウェブコンポーネント: article。
ボタン付き @jhvanderschee: Codepen。

タブ コンポーネントの作成

概要

ウェブ戦術

HTML

スクロール レイアウト

レイアウト: <snap-tabs>

タブの <header> レイアウト

タブのヘッダー <nav> レイアウト

タブの <section> レイアウト

タブの <article> レイアウト

3 つのスクロール エリアのまとめ

注目の機能

アニメーション

スクロール動作

タブのインジケーター

@scroll-timeline

ScrollTimeline

動的キーフレーム

その他の JavaScript の機能強化

ディープリンク

スクロール終了の同期

まとめ

コミュニティ リミックス

タブコンポーネントの作成

スクロールレイアウト

レイアウト: `<snap-tabs>`

タブの `<header>` レイアウト

タブのヘッダー `<nav>` レイアウト

タブの `<section>` レイアウト

タブの `<article>` レイアウト

3 つのスクロールエリアのまとめ

`@scroll-timeline`

`ScrollTimeline`

コミュニティリミックス