AngularMaterial-ウィジェット

Angular Materialは、UIウィジェットの豊富なライブラリを提供します。これにより、ユーザーはアプリケーションとの高度な対話機能を利用できます。

次の表に、いくつかの重要なウィジェットとその説明を示します。

シニア番号 ウィジェットと説明
1 ボタン

ザ・ md-buttonAngularディレクティブは、オプションのインクリップルを持つボタンディレクティブです(デフォルトで有効になっています)。場合href または ng-href 属性が指定されている場合、このディレクティブはアンカー要素として機能します。

2 チェックボックス

ザ・ md-checkbox、Angularディレクティブは、チェックボックスコントロールとして使用されます。

3 コンテンツ

ザ・ md-contentAngularディレクティブはコンテナ要素であり、スクロール可能なコンテンツに使用されます。ザ・layout-padding 属性を追加して、コンテンツをパディングすることができます。

4 DatePicker

ザ・ md-datepickerAngular Directiveは、日付を選択するための入力コントロールです。また、入力検証用のngMessagesもサポートしています。

5 ダイアログ

ザ・ md-dialogAngularディレクティブはコンテナ要素であり、ダイアログボックスを表示するために使用されます。その要素md-dialog-content ダイアログの内容と md-dialog-actions ダイアログアクションを担当します。

ザ・ mdDialogAngular Serviceは、アプリケーション上でダイアログを開き、ユーザーに情報を提供し、意思決定を支援します。

6 仕切り

ザ・ md-dividerAngularディレクティブはルール要素であり、リストおよびページレイアウト内のコンテンツをグループ化および分割するための薄い軽量ルールを表示するために使用されます。

7 リスト

ザ・ md-listAngularディレクティブは、を含むコンテナコンポーネントです。 md-list-item子供の頃の要素。md-list-itemディレクティブは、md-listコンテナの行アイテムのコンテナコンポーネントです。CSSクラスmd-2-line そして md-3-line md-list-itemに追加して、行の高さをそれぞれ22pxと40pxに増やすことができます。

8 メニュー

ザ・ md-menuAngularディレクティブは、実行されたアクションのコンテキスト内で追加オプションを表示するためのコンポーネントです。ザ・md-menu2つの子要素があります。最初の要素はtrigger elementメニューを開くために使用されます。2番目の要素はmd-menu-contentメニューを開いたときのメニューの内容を表します。md-menu-contentは通常、メニュー項目をmd-menu-itemとして運びます。

9 メニューバー

ザ・ md-menu-barは、複数のメニューを保持するためのコンテナコンポーネントです。メニューバーは、オペレーティングシステムが提供するメニュー効果を作成するのに役立ちます。

10 プログレスバー

ザ・ md-progress-circular そして md-progress-linear Angular Progressディレクティブであり、アプリケーションでコンテンツの読み込みメッセージを表示するために使用されます。

11 ラジオボタン

ザ・ md-radio-group そして md-radio-buttonAngularディレクティブは、アプリケーションでラジオボタンを表示するために使用されます。md-radio-groupは、md-radio-button要素のグループ化コンテナです。

12 選択

ザ・ md-select、Angularディレクティブは、ng-modelで囲まれた選択ボックスを表示するために使用されます。

13 ファブツールバー

ザ・ md-fab-toolbarAngularディレクティブは、一般的なアクションにすばやくアクセスするための要素またはボタンのツールバーを表示するために使用されます。

14 スライダー

ザ・ md-slider、Angularディレクティブは、範囲コンポーネントを表示するために使用されます。2つのモードがあります-

  • normal−ユーザーは幅広い値の間をスライドできます。デフォルト。

  • discrete−ユーザーは選択した値の間をスライドできます。離散モードを有効にするには、md-discrete属性とstep属性を使用します。

15 タブ

ザ・ md-tabs そして md-tabAngularディレクティブは、アプリケーションのタブを表示するために使用されます。md-tabsは、md-tab要素のグループ化コンテナです。

16 ツールバー

ザ・ md-toolbar、Angularディレクティブは、通常はコンテンツの上の領域であるツールバーを表示するために使用され、タイトルと関連するボタンを表示します。

17 ツールチップ

Angular Materialは、目立たないツールチップをユーザーに表示するためのさまざまな特別な方法を提供します。Angular Materialは、方向を割り当てる方法を提供し、md-tooltipディレクティブを使用してツールチップを表示します。ツールチップは、ユーザーが親コンポーネントにフォーカス、ホバー、またはタッチするたびにアクティブになります。

18 チップス

ザ・ md-chipsAngularディレクティブは、チップと呼ばれる特別なコンポーネントとして使用され、連絡先、タグなどの小さな情報セットを表すために使用できます。カスタムテンプレートを使用して、チップのコンテンツをレンダリングできます。これは、カスタムコンテンツを持つmd-chip-template要素をmd-chipsの子として指定することで実現できます。

19 お問い合わせチップ

ザ・ md-contact-chipsAngularディレクティブは、mdチップ上に構築された入力コントロールであり、 md-autocomplete素子。連絡先チップコンポーネントは、可能な連絡先のリストを返すクエリ式を受け入れます。ユーザーはこれらの1つを選択して、利用可能なチップのリストに追加できます。