SelectMenu HTMLタグ

selectmenuの導入：革新的なフォームコントロール

この記事では、実験的なselectmenuフォームコントロールに分かれ、従来のスタイリング機能を強調しています<select></select>要素。その開発の背後にある理由と、Webフォームの設計に革命をもたらす可能性を探ります。

Web開発者は、主要なプラットフォームの欠陥として、スタイリングフォームコントロールの制限を頻繁に引用しています。 2020年のCSS調査では、トップ10の最も必要な改善の中でフォームスタイリングをランク付けしました。<select></select>スタイルを効果的にスタイリングするための最も問題のある要素として具体的に識別されます。一方、aのボタン部分<select></select>スタイルが比較的簡単で、ドロップダウン内のオプションをカスタマイズすることは非常に挑戦的なままです。

その結果、多くの設計システムとコンポーネントライブラリは、HTML、CSS、およびJavaScriptを使用して、ゼロからカスタム選択要素を作成します。ただし、適切なアクセシビリティ、キーボードナビゲーション、および正確なポップアップポジショニングを実現することは複雑で時間がかかり、多くの場合、アクセスできない選択メニューになります。

selectmenuコントロールは、組み込みの非常にスタイル性のある代替品を提供することにより、この永続的な問題を解決することを目的としています。

オープンUIイニシアチブ

オープンUIイニシアチブは、開発者、デザイナー、ブラウザーの実装者が関与する共同の取り組みであり、 selectmenuの開発を推進しています。その目標は、開発者がselectmenu 、ドロップダウン、チェックボックス、ラジオボタンなどの組み込みのUIコントロールを完全にスタイルし、拡張できるようにすることです。これには、実装の仕様を作成し、アクセシビリティ要件に対処することが含まれます。

まだ初期段階にある間、プロジェクトは急速に進行しており、結果は有望です。オープンUIコミュニティに参加して、その開発に貢献できます。

selectmenuコントロール

Chromium（主にMicrosoft Edge Teamによって、Google Chromeとのコラボレーション）で実装されたselectmenu 、おなじみのオプション選択エクスペリエンスを提供する新しい組み込みコントロールです。選択した値を表示するボタン、ボタンをクリックすることでトリガーされるポップアップ、ポップアップ内のオプションのリストが備わっています。

なぜ新しい名前ですか？

「selectmenu」という名前はプレースホルダーです。主に既存のものを大幅に変更するため<select></select>要素は、広範囲にわたる互換性の問題を引き起こします。したがって、 selectmenuは独立したコントロールとして設計されています。

はじめる

まだ制作可能ではありませんが、次のようにselectmenuを試してみることができます。

1. Chromiumベースのブラウザ（ChromeまたはEdge）のカナリアバージョンを使用します。
2. 「Experimental Webプラットフォームの機能」フラグをabout:flagsとRestartで有効にします。
3. 交換する<select></select>selectmenuを使用したWebページの要素。

基本的な機能はデフォルトで提供されますが、 selectmenuの真の力は、そのスタイリングと拡張性オプションにあります。

フィードバックが奨励されました！

オープンUIチームはフィードバックを歓迎します。早期テストは、コントロールの改善に役立ちます。オープンUI GitHubリポジトリを介してバグまたは制限を報告します。

selectmenu解剖学を理解する

selectmenuスタイリングには、その内部構造を理解する必要があります。

• <selectmenu></selectmenu> ：ボタンとリストボックスを含むルート要素。
• <button></button> ：リストボックスの可視性をトリガーします。
• <label></label> ：（オプション）選択した値を表示します。必ずしも内部ではありません<button></button>。
• <listbox></listbox> ：ラップ<option></option>そして<optgroup></optgroup>要素。
• <optgroup></optgroup> ：グループ<option></option>オプションのラベル付きの要素。
• <option></option> ：選択可能な値を表します。

デフォルトの動作

selectmenuの動作を模倣します<select></select>。最小限のマークアップで十分です：

<selectmenu>
  <option value="Option 1">オプション1</option>
  <option value="Option 2">オプション2</option>
  <option value="Option 3">オプション3</option>
</selectmenu>

デフォルト<button></button>、<label></label> 、 そして<listbox></listbox>要素は自動的に生成されます。

::part()とのスタイリング

::part() pseudo-elementは、個々のコンポーネントのスタイリングを許可します。

 .My-Select-Menu :: part（button）{
  色：白;
  バックグラウンドカラー：＃f00;
  パディング：5px;
  ボーダーラジウス：5px;
}

.My-Select-Menu :: part（listbox）{
  パディング：10px;
  マージントップ：5px;
  境界線：1px固体赤;
  ボーダーラジウス：5px;
}

これにより、ボタンとリストボックスがスタイリングされます。 ::part()で動作します<button></button>、<label></label> 、 そして<listbox></listbox>。

カスタムマークアップ

コントロールを大きくするには、名前付きスロットを使用してデフォルトマークアップを交換します。

<selectmenu class="my-custom-select">
  <div slot="button">
    <button behavior="button">開ける</button>
    <span class="label">オプションを選択します</span>
  </div>
  <option value="Option 1">オプション1</option>
  <option value="Option 2">オプション2</option>
  <option value="Option 3">オプション3</option>
</selectmenu>

slot="button"属性は、デフォルトボタンを置き換えます。 behavior="button"ボタンの動作とアクセシビリティを割り当てます。同様の手法が適用されます<listbox></listbox>。

拡張マークアップ

機能を拡張するために新しい要素を追加します：

<selectmenu class="my-custom-select">
  <div slot="listbox">
    <div behavior="listbox" popup="">
      <h3 id="花">花</h3>
      <option value="Rose">薔薇</option>
      <h3 id="木">木</h3>
      <option value="Willow">柳</option>
    </div>
  </div>
</selectmenu>

これにより、カスタムグループ化とスタイリングが追加されます。

ShadowDomの交換（Advanced）

完全に制御するには、 attachShadow()を使用してShadow Domを交換します。これは最大のカスタマイズを提供しますが、より高度な手法が必要です。

結論

selectmenu 、スタイリングと伝統の拡張において大幅な改善を提供します<select></select>要素。組み込みのブラウザの実装により、アクセシビリティと適切なポジショニングが保証されます。まだ実験的ですが、 selectmenu Webフォームの設計を強化するための計り知れない可能性を保持しています。 Open UIイニシアチブに参加して、その将来を形作るのを支援します。

以上がSelectMenu HTMLタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。