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タグではさめばリンクとして機能します。

中馬崇尋
Chuma Takahiro

関連記事

Litのコード構成

Litは、WebComponents標準に準拠したクラスコンポーネントを実装するフレームワークです。……

Selenium Python

SeleniumはWebアプリケーションをE2Eテストするフレームワークです。 ブラウザをスクリプト操……

Litの特徴

LitはWebのUIコンポーネント開発向けライブラリで、React.jsやVue.jsなどのオルタナ……

HTMLフォームからAPIコールするイディオム

HTMLフォームには主にPOSTのリクエストを投稿する機能があります。 onSubmitイベントにハン……

SVG画像にCSS変数を適用する

SVG画像はベクター画像標準としてWebで広く利用されています。 またSVGはXMLでもあり、加工する……