Materialdesignlite-menus
Material Design Lite-メニュー
MDLは、事前定義されたさまざまな視覚的および動作強化を適用し、さまざまなタイプのメニューを表示するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します
Sr.No. | Class Name & Description |
---|---|
1 |
mdl-button ボタンをMDLコンポーネントとして識別し、ボタン要素で必要です。 |
2 |
mdl-js-button 基本的なMDL動作をボタンに設定し、ボタン要素に必要です。 |
3 |
mdl-button—icon アイコンをボタンに設定し、ボタン要素に必要です。 |
4 |
material-icons スパンをマテリアルアイコンとして識別し、インライン要素で必要です。 |
5 |
mdl-menu 順序付けられていないリストコンテナーをMDLコンポーネントとして識別し、ul要素で必要です。 |
6 |
mdl-js-menu 基本的なMDL動作をメニューに設定し、ul要素で必要です。 |
7 |
mdl-menu__item ボタンをMDLメニューオプションとして識別し、リストアイテム要素に必要な基本的なMDL動作を設定します。 |
8 |
mdl-js-ripple-effect オプションリンクにリップルクリック効果を設定します(オプション)。順序なしリスト要素には必須です。 |
9 |
mdl-menu—top-left ボタンの上のメニュー位置を設定し、メニューの左端をボタンに揃えます。オプションです。順序なしリスト要素には必須です。 |
10 |
(none) デフォルトでは、メニューはボタンの下に配置され、ボタンで左端に揃えられます。 |
11 |
mdl-menu—top-right メニューはボタンの上に配置され、ボタンで右端に揃えられ、オプションで、順序付けられていないリスト要素に配置されます。 |
12 |
mdl-menu—bottom-right メニューはボタンの下に配置され、ボタンで右端に揃えられ、オプションで、順序付けられていないリスト要素に配置されます。 |
例
次の例は、 mdl-spinner クラスを使用してさまざまなタイプのスピナーを表示する方法を理解するのに役立ちます。
結果
結果を確認します。