現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

以前書いた記事Angular Material公式。導入方法日本語訳

その他AngularMaterialの記事
【超簡単】Angular6 でAngularMaterialを導入する方法【チュートリアル】

今回翻訳する記事
Schematics

Angular Material comes packaged with Angular CLI schematics to make creating Material applications easier.

Angular MaterialではAngular CLI Schematicsがひとまとめにされているため、アプリケーションを簡単に作成できます。

Schematicsをインストールしよう！

Schematics come packaged with Angular Material, so once you have installed the npm package, they will be available via the Angular CLI.
If you run it will automatically install Angular Material for you and run the install schematic.

SchematicsはAngularMaterialでパッケージ化されているので、npmパッケージをインストールすると、Angular CLIを介して利用する事ができます。

以下のコマンドを実行すると、自動的にAngularMaterialがインストールされ、インストールスケマティックが実行されます。

ng add @angular/material

The install schematic will help you quickly add Material to a new project. This schematic will:
Ensure project dependencies in package.json
Ensure project dependencies in your app module
Adds Prebuilt or Setup Custom Theme
Adds Roboto fonts to your index.html
Apply simple CSS reset to body

インストールスケマティックは、新しいプロジェクトに素早くマテリアルを追加するのに役立ちます。
インストールスケマティックは以下の事をします。

プロジェクトの依存関係を package.jsonで保証。
app moduleのプロジェクト依存関係を保証。
プレビルドまたはセットアップのカスタムテーマを追加。
index.htmlにRobotoフォントを追加。
bodyにシンプルなCSSリセットを適用。

Generator Schematics

In addition to the install schematic Angular Material has three schematics it comes packaged with:

インストールスケマティック以外にもAngularMaterialには３つのスケマティックが付属されています。

Navigation
Dashboard
Table

Navigation Schematic

The navigation schematic will create a new component that includes a toolbar with the app name and the side nav responsive based on Material breakpoints.

ナビゲーションスケマティックは、アプリケーション名の付いたツールバーとマテリアルブレークポイントに基づいたサイドナビゲーションを含む新しいコンポーネントを作成します。

ng generate @angular/material:material-nav --name <component-name>

Dashboard Schematic

The dashboard schematic will create a new component that contains a dynamic grid list of cards.

ダッシュボードスケマティックはカードの動的グリッドリストを含む新しいコンポーネントを作成します。

ng generate @angular/material:material-dashboard --name <component-name>

Table Schematic

The table schematic will create a new table component pre-configured with a datasource for sorting and pagination.

テーブル・スケマティックは、ソートおよびページ設定のためのデータ・ソースで事前構成された新しい表コンポーネントを作成します。

ng generate @angular/material:material-table --name <component-name>

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日