From 7a2521d69cc7b18153ac34fe417b9beed311e71f Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 9 Oct 2018 21:41:51 +0200 Subject: [PATCH 1/2] docs: show all available schematics in the schematics guide * Updates the outdated `schematics` guide to mention the new available component schematics. --- guides/schematics.md | 86 +++++++++++++++++++++++++++++++++----------- 1 file changed, 65 insertions(+), 21 deletions(-) diff --git a/guides/schematics.md b/guides/schematics.md index 5cbccf5a14d8..b0c8a8b3865d 100644 --- a/guides/schematics.md +++ b/guides/schematics.md @@ -13,48 +13,92 @@ install schematic. ng add @angular/material ``` -The install schematic will help you add Material to a new project. -This schematic will: +In case you just want to install the `@angular/cdk`, there are also schematics for the [Component Dev Kit](https://material.angular.io/cdk) + +``` +ng add @angular/cdk +``` + +The Angular Material `ng add` schematic helps you setup an Angular CLI project that uses Material. Running `ng add` will: - Ensure [project dependencies](./getting-started#step-1-install-angular-material-angular-cdk-and-angular-animations) are placed in `package.json` - Enable the [BrowserAnimationsModule](./getting-started#step-2-configure-animations) your app module - Add either a [prebuilt theme](./theming#using-a-pre-built-theme) or a [custom theme](./theming#defining-a-custom-theme) -- Add Roboto fonts to your index.html -- Add the [Material Icon font](./getting-started#step-6-optional-add-material-icons) to your index.html +- Add Roboto fonts to your `index.html` +- Add the [Material Icon font](./getting-started#step-6-optional-add-material-icons) to your `index.html` - Add global styles to - Remove margins from `body` - Set `height: 100%` on `html` and `body` - Make Roboto the default font of your app -- Install and import `hammerjs` for [touch gesture support](./getting-started#step-5-gesture-support) in your project +- Install and import `hammerjs` for [gesture support](./getting-started#step-5-gesture-support) in your project + + +## Component schematics +In addition to the install schematic, Angular Material comes with multiple schematics that can be +used to easily generate Material Design components: + +- [Address form](#address-form-schematic) +- [Dashboard](#dashboard-schematic) +- [Navigation](#navigation-schematic) +- [Table](#table-schematic) +- [Tree](#tree-schematic) + + +Additionally the Angular CDK also comes with a collection of component schematics: + +* [Drag and Drop](#drag-and-drop-schematic) + + +#### Address form schematic -## Generator Schematics -In addition to the install schematic, Angular Material has three schematics it comes packaged with: +Running the `address-form` schematic generates a new Angular component that can be used to get +started with a Material Design form group consisting of: -- Navigation -- Dashboard -- Table +* Material Design form fields +* Material Design radio controls +* Material Design buttons -### Navigation Schematic -The navigation schematic will create a new component that includes +``` +ng generate @angular/material:address-form +``` + +#### Navigation schematic +The `navigation` schematic will create a new component that includes a toolbar with the app name and a responsive side nav based on Material breakpoints. ``` -ng generate @angular/material:material-nav --name +ng generate @angular/material:nav +``` + +#### Table schematic +The table schematic will create a component that renders an Angular Material `` which has +been pre-configured with a datasource for sorting and pagination. + +``` +ng generate @angular/material:table +``` + +#### Dashboard schematic +The `dashboard` schematic will create a new component that contains +a dynamic grid list of Material Design cards. + +``` +ng generate @angular/material:dashboard ``` -### Dashboard Schematic -The dashboard schematic will create a new component that contains -a dynamic grid list of cards. +#### Tree schematic +The `tree` schematic can be used to quickly generate an Angular component that uses the Angular +Material `` component to visualize a nested folder structure. ``` -ng generate @angular/material:material-dashboard --name +ng generate @angular/material:tree ``` -### Table Schematic -The table schematic will create a new table component pre-configured -with a datasource for sorting and pagination. +#### Drag and Drop schematic +The `drag-drop` schematic is provided by the `@angular/cdk` and can be used to generate a component +that uses the CDK drag and drop directives. ``` -ng generate @angular/material:material-table --name +ng generate @angular/cdk:drag-drop ``` From 38442de0eb2b6e7c98682b1e3903011cb48da460 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 10 Oct 2018 20:09:20 +0200 Subject: [PATCH 2/2] Address feedback --- guides/schematics.md | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/guides/schematics.md b/guides/schematics.md index b0c8a8b3865d..e930c86951d3 100644 --- a/guides/schematics.md +++ b/guides/schematics.md @@ -37,17 +37,22 @@ The Angular Material `ng add` schematic helps you setup an Angular CLI project t In addition to the install schematic, Angular Material comes with multiple schematics that can be used to easily generate Material Design components: -- [Address form](#address-form-schematic) -- [Dashboard](#dashboard-schematic) -- [Navigation](#navigation-schematic) -- [Table](#table-schematic) -- [Tree](#tree-schematic) + +| Name | Description | +|----------------|--------------------------------------------------------------------------------------------------------| +| `address-form` | Component with a form group that uses Material Design form controls to prompt for a shipping address | +| `navigation` | Creates a component with a responsive Material Design sidenav and a toolbar for showing the app name | +| `dashboard` | Component with multiple Material Design cards and menus which are aligned in a grid layout | +| `table` | Generates a component with a Material Design data table that supports sorting and pagination | +| `tree` | Component that interactively visualizes a nested folder structure by using the `` component | Additionally the Angular CDK also comes with a collection of component schematics: -* [Drag and Drop](#drag-and-drop-schematic) +| Name | Description | +|----------------|----------------------------------------------------------------------------------------------------| +| `drag-drop` | Component that uses the `@angular/cdk/drag-drop` directives for creating an interactive to-do list | #### Address form schematic