AngularのUI / UXコンポーネントは、 AngularMaterials。 彼らAngularアプリケーションの実行を支援する 効率的に 。ただし、まだ気付いていない場合は、AngularMaterialsの詳細を学ぶのに役立つ記事があります。また、to Angularの詳細な知識を取得し、登録を検討してください ' エドゥレカから。
この記事では、次のトピックについて説明します。
AngularMaterialsの紹介
材料 2014年にGoogleによって開発されたデザイン言語として導入されました。 マテリアルデザイン ツールですフロントエンドフレームワークの場合、 ビジュアル 、 モーション 、および インタラクション 設計。また、さまざまなデバイスやさまざまな画面サイズに適応するのにも役立ちます。まず、これらのアプリをさらに作成するためにAngularJSにタグ付けされました 魅力的 実行します もっと早く 。次に、Googleはコードを最初から完全に書き直し、JSを削除しました。 、名前を付けました その後、GoogleはマテリアルデザインをAngularにタグ付けしました。 、そしてそれをAngularMaterialsと名付けました。
Angularマテリアル またはユーザーインターフェイス（UI）コンポーネントは、アプリケーションを設計するのに役立ちます。 構造化 マナー。彼らはユーザーを引き付け、それを作ります アクセスが簡単 アプリケーションに存在する要素またはコンポーネント。また、独自の魅力的な方法でアプリケーションを設計するのにも役立ちます スタイル そして 形 。これらのコンポーネントは、アプリケーションをより多くするのに役立ちます 一貫性がある 、 速い 、 用途が広い そしてデザインさえ レスポンシブ ウェブサイト。
角度のある材料の設置
それでは、AngularMaterialsのインストール方法に関する簡単なチュートリアルから始めましょう。まず最初に、システムにAngularがインストールされていることを確認してください。 Angularに慣れていない場合は、上のリンクを参照してください 。すべての設定が完了したら、次のコマンドを使用してプロジェクトにAngularMaterialsを追加できます。
追加の@角度/マテリアル
まず、ビルド済みのテーマ名またはカスタムテーマを選択するように求められます。
アプリケーションのスタイルを設定するためのデフォルトのテーマである「インディゴ/ピンク」のビルド済みテーマを選択する必要があります。 「カスタム」テーマを選択して、すべての一般的なスタイルを含むテーマファイルをカスタマイズすることもできます。
次に、設定するように求められます HammerJS 。 HammerJSは人気のあるライブラリであり、主にAngularアプリケーションで使用されます。特にモバイルアプリケーションでは、スワイプ、パン、ピンチ、回転などのタッチジェスチャのサポートが追加されます。
「はい」または「いいえ」のいずれかを選択できます。 HammerJSは、モバイルでアプリケーションを使用するときに役立ちます。モバイルはタッチディスプレイを提供するため、これらのジェスチャはより便利で、モバイルアプリケーションで流行に見える場合があります。
選択した後、次に設定するように求められます ブラウザアニメーション AngularMaterialの場合。
アプリケーションでアニメーションを使用できるようにするには、「はい」を選択する必要があります。 Angular Animationsは、アプリケーションをより楽しく、より使いやすくします。これにより、アプリとユーザーエクスペリエンスが向上し、ユーザーの注意を引くことができます。
その後、これにより、アプリケーションにAngularMaterialsがインストールされます。
角度のある材料コンポーネント
前述のように、Angular MaterialComponentsは他に類を見ません。 UI/UX 設計コンポーネント。これらには、フォームコントロール、ナビゲーション、ボタンとインジケーター、ポップアップなど、さまざまなコンポーネントが含まれています。これらのコンポーネントは、マテリアルデザイン仕様に従ってパターンを実装するのに役立ちます。
先に進み、Angularアプリケーションにこれらのコンポーネントを実装する方法の例をいくつか見てみましょう。
ナビゲーション
まず、ナビゲーションのコンポーネントについて説明します。
- ツールバー
次のコードをに入力する必要があります app.component.html アプリケーションでツールバーコンポーネントを使用するためのファイル。
AngularMaterialチュートリアル ヘッダーとタイトルに使用されるAngularマテリアルのコンテナです。の色 コンテナは、を使用して変更できます 色 プロパティ。デフォルトでは、ツールバーは現在のテーマに基づいたニュートラルな背景色、つまり明るい色または暗い色を使用します。次の3つのデフォルトテーマを選択できます。 「プライマリ」 、 'アクセント' 、または 「警告」 。このツールバーを使用するには、最初にツールバーをインポートする必要があります app.module.ts 次のコマンドを使用して、Angularマテリアルからファイルを作成します。
'@ angular / material'から{MatToolbarModule}をインポートします後で、このモジュールもに追加する必要があります インポート：[] にあるセクション app.module.ts ファイル。
インポート：[BrowserModule、AppRoutingModule、BrowserAnimationsModule、MatToolbarModule]、
Mat-Toolbarの場合、「 MatToolbarModule 」。
それでは、次のコマンドを使用してプロジェクトを提供しましょう。
サーブの-o
これにより、以下に示すように、システムのデフォルトブラウザでプロジェクトが開きます。
選択に応じてツールバーの色を変更したい場合は、CSSスタイルシートを使用して変更できます。例を示しましょう。
まず、消去する必要があります 色 からのプロパティ コンテナを入力し、次のように入力します CSS のコード app.component.css ファイル。
mat-toolbar {background-color：/ * color-of-your-choice * / color：/ * text-color * /}次に、プロジェクトを提供して結果を確認します。
- メニュー
次に、メニューコンポーネントについて説明します。次のコードを入力する必要があります app.component.html ファイル。
AngularMaterialチュートリアル メニュー設定ヘルプにスタイリングを追加しましょう メニュー ボタン。次のコードを入力する必要があります app.component.css ファイル。
.space {flex：1 1 auto} .btns {width：100px height：40px font-size：large border-radius：10px border：3px solid＃113c89 background-color：lightcoral}クラス=”スペース” 「ツールバー名」と「メニューオプション」の間にスペースを追加するために使用されます。
CSSスタイルシートに慣れていない場合は、次のブログを参照してください。 詳細に取得します。
ツールバーと同じように、使用するには そして コンテナの場合、インポートするには、上記と同じ手順に従う必要があります MatMenuModule そして MatButtonModule から 角張った素材 それらを追加します インポート：[] にあるセクション app.module.ts ファイル。
今すぐプロジェクトを提供して、出力を表示します。
フォームコントロール
次に、フォームコントロールのコンポーネントについて説明します。
- フォームフィールド
名前が示すように、Form-Fieldはユーザーが入力するために使用されます。これは、アプリケーションまたはWebサイトでのユーザーの登録に最も一般的に使用されます。
次のコードをに入力する必要があります app.component.html アプリケーションでForm-Fieldコンポーネントを使用するためのファイル。
フォームコントロール
名前
いつものように、あなたはインポートする必要があります MatFormFieldModule そして MatInputModule それらを追加します インポート：[] にあるセクション app.module.ts ファイル。上記のコードは通常、「名」、「姓」などの名前を入力するために使用されます。バリデーターを使用して、フィールドを必須にすることもできます。たとえば、Eメールフィールドに使用できます。パスワードのテキストを非表示または再表示できます。参考までに、以下のコードを確認してください。
メールアドレスを入力してください{{getErrorMessage（）}}パスワードを入力してください{{hide？ 'visibility_off'： 'visibility'}}あなたの中で app.component.css ファイルの場合、次のコードを追加する必要があります。
.example-container {padding-left：50px}今、あなたの中で app.component.ts ファイル、インポートする必要があります FormControl そして バリデーター から @ angular / forms ディレクトリ。
'@ angular / forms'から{FormControl、Validators}をインポートします次のクラス内にエラーを表示するには、テキストを追加する必要もあります。
export class AppComponent {email = new FormControl（ ''、[Validators.required、Validators.email]）getErrorMessage（）{return this.email.hasError（ 'required'）？ '値を入力する必要があります'：this.email.hasError（ 'email'）？ '有効なメールではありません'： ''} hide = true}上記の手順を参照して、次のコードを入力する必要があります app.module.ts 必要なモジュールをインポートするファイル。
import {FormsModule、ReactiveFormsModule} from '@ angular / forms' import {MatIconModule} from '@ angular / material'後で、これらのモジュールをに追加する必要があります インポート：[] セクション。
- ラジオボタン
ラジオボタンは通常、さまざまなオプションから選択するために使用されます。以下のコードを参考にしてください。
ために app.component.html ファイル、
性別
男女
ために app.component.css ファイル、
mat-radio-button {Padding-left：50px}今、あなたはインポートする必要があります MatRadioModule に追加します インポート：[] にあるセクション app.module.ts ファイル。
後で、出力を表示するためにプロジェクトを提供する必要があります。
先に、Angular MaterialCDKについて説明します。
Angular Material CDK
CDK、別名 コンポーネント開発キット 、のライブラリです 事前定義された動作 一般的な実装ツールのセットであるAngularMaterialで 相互作用パターン そして アプリケーションの機能 。マテリアルデザインに固有のスタイリングはありません。 CDKの例を見てみましょう。
- テキストフィールド
テキストフィールドコンポーネントは、テキスト入力フィールドを操作するためのユーティリティを提供します。テキストフィールドのCDKコンポーネントを使用して、入力のサイズを変更できます。それを実装する方法の例を見てみましょう。
ために app.component.html ファイル、
Angular Material CDK
フォントサイズ10px12px 14px 16px 18px20px自動サイズのテキストエリア
のために app.component.ts ファイルの場合、最初に必要なコンポーネントをインポートする必要があります。
import {CdkTextareaAutosize} from '@ angular / cdk / text-field' import {NgZone、ViewChild} from '@ angular / core' import {take} from'rxjs / operator '次に、クラス内に次のコードを入力する必要があります。
Javaの例のマーカーインターフェイス
export class AppComponent {constructor（private _ngZone：NgZone）{} @ViewChild（ 'autosize'、{static：false}）autosize：CdkTextareaAutosize triggerResize（）{this._ngZone.onStable.pipe（take（1））。subscribe（（ ）=＆ampampampgt this.autosize.resizeToFitContent（true））}}次に、インポートする必要があります MatSelectModule に追加します インポート：[] にあるセクション app.module.ts ファイル。
最後に、出力を表示するためにプロジェクトを提供する必要があります。
これは結論ではなく、AngularMaterialsには他にもいくつかのコンポーネントがあります。あなたはからそれらを参照することができます 公式サイト 角度のある材料の。
これでブログを終了したいと思います。 AngularMaterialの基本について明確に理解していただければ幸いです。この記事に関して疑問や質問がある場合は、下のコメントセクションに遠慮なく投稿してください。
このブログから学んだことすべてを学びたい場合は、 Angular 、そして熟練したAngular Developerに向けてキャリアを整えてから、私たちの登録を検討してください ' 。
質問がありますか？この「AngularMaterial」ブログのコメントセクションでそのことを伝えてください。できるだけ早くご連絡いたします。