ハウツー コンポーネント – 概要

HowTo コンポーネント

「方法: コンポーネント」一般的な UI を実装するウェブ コンポーネントの集合。 パターンです。これらの実装の目的は、学習リソースを提供することです。 さまざまな API の実装について、 うまくいけばそこから学習していきますただし、これらは明示的に 本番環境では使用しないでください。

  • <howto-checkbox>: フォームのブール値のオプションを表します。最も一般的なのは チェックボックスは、ユーザーが 2 つの選択(チェックボックスのオン / オフ)を切り替えることができるデュアルタイプです。
  • <howto-tabs>: 複数のパネルに分割して、表示されるコンテンツを制限します。
  • <howto-tooltip>: 要素が呼び出されたときにその要素に関連する情報を表示するポップアップ マウスがキーボードのフォーカスを受け取るか

目標

目的は、堅牢なコンポーネントを作成するためのベスト プラクティスをデモンストレーションすることです。 アクセスしやすくパフォーマンスに優れ、メンテナンスしやすく、スタイル設定も簡単です。各コンポーネントは、 完全に自己完結しているため、リファレンス実装として利用できます。

ユーザー補助

コンポーネントは WAI ARIA オーサリングに厳密に従う 実践ガイド」へようこそ。 Accessible Rich Internet Application、ARIA について説明し、 標準。ARIA に詳しくない場合は、 Google 広告ヘルプセンターの WebFundamentals へようこそ。 各コンポーネントは、オーサリング手法の関連セクションにリンクしています。しばらく 必ずしも必要ではないので、オーサリング ガイドの プラクティスを確認してから、コードの詳細を学びます。

パフォーマンス

ウェブ開発では「パフォーマンス」という用語がさまざまなモデルに適用して できます。<howto> のコンテキストでは、パフォーマンスとは主にアニメーションを指します モバイル デバイスでも常に 60 fps で動作する必要があります。

視覚的な柔軟性

コンポーネントは、レイアウトやスタイルを示す場合を除き、スタイルはできる限り設定しません。 選択またはアクティブの状態を表しますこれは、実装の視覚的な柔軟性を維持するためです。 焦点を絞ることができますデコレーションに時間を費やす必要がないため、コードの対象を コンポーネントの機能を機能させるためには絶対に必要です。なんらかのスタイルが必要な場合 そのスタイルにはコメントが付きます。 その理由を説明します

保守可能なコード

HowTo: Components はリファレンス 読みやすく簡単にするコードを書くことに コメントが密かに付けられている、わかりやすいコードです。

目標以外

ライブラリ / フレームワーク / ツールキットである

<howto> コンポーネントが npm、bower、その他のプラットフォームで公開されていない 本番環境で使用するためのものではないからです簡潔にするために、 最新の JavaScript API を使用しており、最新の Web Components 標準を実装するブラウザ。マイページ これらのコースを読み、ご自身のニーズに合わせてコードを あります。

下位互換性がある

コードを直接信頼すべきではありません。Google はおそらくそうするでしょうが、 要素の実装と API を大幅に変更する 見つかる場合があります。これは生きたリソースであり ウェブ UI を作成するためのベスト プラクティスを確認し、議論します。

完結する

現在のところ、実装できる *すべて *のコンポーネントは実装していません(おそらく、実装しないでしょう) (WAI ARIA Authoring Practices を参照)しかし、これまで使われてきた原則を 他の <howto> コンポーネントでは、読者が任意のコンポーネントを実装できるようにする必要がある 見ていきます