最新のドロップダウン コンポーネント HTML

TL;DR

HTML フォームで動作し、すべてのプラットフォームとブラウザーで同じように見えるカスタム ドロップダウン コンポーネントを構築することに挑戦したいと思いました。ようやく作ることができました。その方法は次のとおりです...

コード

コードはこのコード ペンにあります。

やり方

• HTML 要素を拡張するネイティブ Web コンポーネントを作成します。
• 複数のテーマを設定できるようにします (CSS で事前定義された色を使用)。
• setAttribute を使用するか、項目が含まれるイベントを起動することによって、その項目を設定できるようにします。
• アイテムがいつ選択されたかを示すカスタム イベントをリッスンします。
• 任意の HTML フォームの一部として機能できるようにします。この記事の執筆時点では、Safari などの一部のブラウザでこれが機能するには、element-internals-polyfill が必要であることに注意してください。

ドロップダウンコンポーネントのUI

3 つの要素で構成されます。

1. 現在選択されている項目を表示する読み取り専用の入力要素。
2. ドロップダウン メニューの項目を含む (最初は非表示の) div。
3. ドロップダウンの状態 (開いているか閉じているか) を示すアイコン。使用される SVG は Bootstrap アイコンから調整されたものであることに注意してください。

ビジネスロジック

1. 接続すると、選択したテーマでコンポーネントが表示されます。何も選択されていない場合は、デフォルトのものを選択します。
2. コンポーネントを宣言的に作成するときに渡されるドロップダウンと項目選択イベントを登録します。
3. ドロップダウン イベントが発生したら、項目をキャプチャしてリストに追加します。
4. 選択した項目をプログラム的に設定する機能を提供します。これは、現在選択されている項目がサービス プロバイダーにとって事前にわかっている場合に特に便利です。たとえば、予約サイトの場所のリストには、ユーザーが現在住んでいる都市が表示されることが理想的です。

見た目は

結論

ブラウザで利用できるツールを使用して、最新のカスタマイズ可能なドロップダウン コンポーネントを作成しました。どこでも同じように見えます。追加やご質問がございましたら、お気軽にお知らせください。

開発を楽しんでください!

以上が最新のドロップダウン コンポーネント HTMLの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。