paper-menu-button

paper-menu-buttonは、Material Designに沿ったWebComponentsベースのドロップダウンメニューです。

以下のPolymerElementsをセットで利用します( DEMOのコード参照)。

  • paper-menu-button:ボタンとメニューリストのコンテナ
  • paper-icon-button:メニューを開くボタン
  • paper-listbox:メニューのコンテナ
  • paper-item:メニュー項目
  • iron-icons
  • iron-icon
  • iron-image
  • neon-animation/web-animations

なお、neon-animation/web-animationsはWeb Animationsのポリフィルとのことで、これがないとプルダウンを開いた後にメニューが閉じなくなります。

閉じ状態に表示されるボタンのslot名は dropdown-trigger、listboxのslot名は dropdown-content を指定します。

個別メニュー項目をリンクにしたい場合は、paper-itemタグをaタグではさめばリンクとして機能します。

⁋ 2018/01/31↻ 2024/11/07
中馬崇尋
Chuma Takahiro