-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path404.html
111 lines (103 loc) · 52 KB
/
404.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html><html lang="zh-Hans"><head>
<meta charset="utf-8">
<title>首页 - Angular Material 组件库</title>
<link rel="canonical" href="https://material.angular.io">
<base href="/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="translucent">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#3F50B5">
<meta name="description" content="UI component infrastructure and Material Design components for mobile and desktop Angular web applications.">
<meta name="keywords" content="angular, material design, material, angular material, web, ui, components, responsive, accessibility, typescript, css, mobile web, open source">
<meta name="author" content="Angular Components Team">
<!--Twitter card metadata-->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Angular">
<meta name="twitter:creator" content="@Angular">
<meta name="twitter:title" content="Angular Material">
<meta name="twitter:description" content="UI component infrastructure and Material Design components for Angular web applications.">
<meta name="twitter:image" content="https://material.angular.io/assets/img/site-preview.png">
<!--Facebook Open Graph-->
<meta property="og:url" content="https://material.angular.io/">
<meta property="og:type" content="website">
<meta property="og:title" content="Angular Material">
<meta property="og:site_name" content="Angular Material">
<meta property="og:locale" content="en_US">
<meta property="og:description" content="UI component infrastructure and Material Design components for Angular web applications.">
<meta property="og:image" content="https://material.angular.io/assets/img/site-preview.png">
<meta property="og:image:secure_url" content="https://material.angular.io/assets/img/site-preview.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1339">
<meta property="og:image:height" content="943">
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon.png?v=8.2.3">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png?v=8.2.3">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png?v=8.2.3">
<link rel="manifest" href="assets/img/favicons/manifest.json?v=8.2.3">
<link rel="mask-icon" href="assets/img/favicons/safari-pinned-tab.svg?v=8.2.3" color="#3f51b5">
<link rel="shortcut icon" href="assets/img/favicons/favicon.ico?v=8.2.3">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="msapplication-config" content="assets/img/favicons/browserconfig.xml?v=8.2.3">
<meta name="theme-color" content="#3f51b5">
<link href="assets/translator/css/material-icons.css" rel="stylesheet">
<link href="assets/translator/css/material-roboto-mono.css" rel="stylesheet">
<link href="assets/translator/css/translator.css" rel="stylesheet">
<!--Structured Data-->
<script async="" src="https://www.google-analytics.com/analytics.js"></script><script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebApplication",
"name": "Angular Material",
"description": "UI component infrastructure and Material Design components for Angular web applications.",
"url": "https://material.angular.io",
"image": "https://material.angular.io/assets/img/site-preview.png",
"screenshot": "https://material.angular.io/assets/img/site-preview.png",
"applicationCategory": "Software Documentation",
"operatingSystem": "Android, Chrome OS, iOS, iPadOS, macOS, OS X, Linux, Windows",
"author": {
"@type": "Organization",
"name": "Angular",
"description": "Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.",
"url": "https://angular.io",
"logo": "https://angular.io/assets/images/logos/angular/angular.svg"
}
}
</script>
<link rel="stylesheet" href="styles.056395d28d22720dda97.css"><style>material-docs-app{display:flex;flex-direction:column;position:absolute;top:56px;bottom:0;left:0;right:0}app-navbar{position:fixed;top:0;left:0;right:0;z-index:2}material-docs-app>app-component-sidenav{flex:1}material-docs-app>app-guides,material-docs-app>app-homepage,material-docs-app>guide-viewer{overflow-y:auto;-webkit-overflow-scrolling:touch}@media (max-width:720px){material-docs-app{top:92px}material-docs-app>app-guides,material-docs-app>app-homepage,material-docs-app>guide-viewer{overflow-y:visible}}</style><style>.docs-navbar-header[_ngcontent-material-docs-c49]{display:flex;flex-wrap:wrap;align-items:center;padding:8px 16px}.docs-navbar-header[_ngcontent-material-docs-c49] > .mat-button[_ngcontent-material-docs-c49]:last-child{margin-left:auto}.flex-spacer[_ngcontent-material-docs-c49]{flex-grow:1}.docs-angular-logo[_ngcontent-material-docs-c49]{height:26px;margin:0 4px 3px 0;vertical-align:middle}.docs-github-logo[_ngcontent-material-docs-c49]{height:21px;margin:0 7px 2px 0;vertical-align:middle}.docs-navbar-link[_ngcontent-material-docs-c49]{text-decoration:inherit;flex:1}.docs-navbar[_ngcontent-material-docs-c49], .docs-navbar-show-small[_ngcontent-material-docs-c49]{display:none}.skip-link-wrapper[_ngcontent-material-docs-c49]{position:absolute;top:10px;left:50%;transform:translateX(-50%);border-radius:5px}@media (max-width:720px){.docs-navbar-hide-small[_ngcontent-material-docs-c49]{display:none}.docs-navbar-show-small[_ngcontent-material-docs-c49]{display:block}.docs-navbar[_ngcontent-material-docs-c49]{display:flex}.docs-navbar--github-logo[_ngcontent-material-docs-c49]{margin:0}}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,.mat-stroked-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay{opacity:.04}@media(hover: none){.mat-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,.mat-stroked-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-icon-button,.mat-stroked-button,.mat-flat-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner{border:0}.mat-button.mat-button-disabled,.mat-icon-button.mat-button-disabled,.mat-stroked-button.mat-button-disabled,.mat-flat-button.mat-button-disabled{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0, 0, 0);transition:background 400ms cubic-bezier(0.25, 0.8, 0.25, 1),box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button.mat-button-disabled{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-ripple.mat-ripple,.mat-stroked-button .mat-button-focus-overlay{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0, 0, 0);transition:background 400ms cubic-bezier(0.25, 0.8, 0.25, 1),box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab.mat-button-disabled{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0, 0, 0);transition:background 400ms cubic-bezier(0.25, 0.8, 0.25, 1),box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab.mat-button-disabled{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button i,.mat-icon-button .mat-icon{line-height:24px}.mat-button-ripple.mat-ripple,.mat-button-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity 200ms cubic-bezier(0.35, 0, 0.25, 1),background-color 200ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}.cdk-high-contrast-active .mat-button,.cdk-high-contrast-active .mat-flat-button,.cdk-high-contrast-active .mat-raised-button,.cdk-high-contrast-active .mat-icon-button,.cdk-high-contrast-active .mat-fab,.cdk-high-contrast-active .mat-mini-fab{outline:solid 1px}.cdk-high-contrast-active .mat-button-base.cdk-keyboard-focused,.cdk-high-contrast-active .mat-button-base.cdk-program-focused{outline:solid 3px}
</style><style>.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon{margin-right:0;margin-left:8px;float:right}.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon svg{vertical-align:middle}.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon.deeppurple-amber svg .docs-theme-icon-background{fill:#fafafa}.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon.deeppurple-amber svg .docs-theme-icon-button{fill:#ffc107}.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon.deeppurple-amber svg .docs-theme-icon-toolbar{fill:#673ab7}.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon.indigo-pink svg .docs-theme-icon-background{fill:#fafafa}.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon.indigo-pink svg .docs-theme-icon-button{fill:#e91e63}.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon.indigo-pink svg .docs-theme-icon-toolbar{fill:#3f51b5}.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon.pink-bluegrey svg .docs-theme-icon-background{fill:#303030}.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon.pink-bluegrey svg .docs-theme-icon-button{fill:#607d8b}.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon.pink-bluegrey svg .docs-theme-icon-toolbar{fill:#e91e63}.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon.purple-green svg .docs-theme-icon-background{fill:#303030}.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon.purple-green svg .docs-theme-icon-button{fill:#4caf50}.docs-theme-picker-menu .mat-menu-item .mat-icon.theme-example-icon.purple-green svg .docs-theme-icon-toolbar{fill:#9c27b0}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1, 1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}
</style><style>.mat-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 48px);border-radius:4px;outline:0;min-height:64px}.mat-menu-panel.ng-animating{pointer-events:none}.cdk-high-contrast-active .mat-menu-panel{outline:solid 1px}.mat-menu-content:not(:empty){padding-top:8px;padding-bottom:8px}.mat-menu-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:48px;height:48px;padding:0 16px;text-align:left;text-decoration:none;max-width:100%;position:relative}.mat-menu-item::-moz-focus-inner{border:0}.mat-menu-item[disabled]{cursor:default}[dir=rtl] .mat-menu-item{text-align:right}.mat-menu-item .mat-icon{margin-right:16px;vertical-align:middle}.mat-menu-item .mat-icon svg{vertical-align:top}[dir=rtl] .mat-menu-item .mat-icon{margin-left:16px;margin-right:0}.mat-menu-item[disabled]{pointer-events:none}.cdk-high-contrast-active .mat-menu-item.cdk-program-focused,.cdk-high-contrast-active .mat-menu-item.cdk-keyboard-focused,.cdk-high-contrast-active .mat-menu-item-highlighted{outline:dotted 1px}.mat-menu-item-submenu-trigger{padding-right:32px}.mat-menu-item-submenu-trigger::after{width:0;height:0;border-style:solid;border-width:5px 0 5px 5px;border-color:transparent transparent transparent currentColor;content:"";display:inline-block;position:absolute;top:50%;right:16px;transform:translateY(-50%)}[dir=rtl] .mat-menu-item-submenu-trigger{padding-right:16px;padding-left:32px}[dir=rtl] .mat-menu-item-submenu-trigger::after{right:auto;left:16px;transform:rotateY(180deg) translateY(-50%)}button.mat-menu-item{width:100%}.mat-menu-item .mat-menu-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}
</style><script charset="utf-8" src="66-es2015.88ddd9c4395a1884dc22.js"></script><style>.docs-header-background[_ngcontent-material-docs-c64]{overflow:hidden;position:relative;height:420px}.docs-header-background[_ngcontent-material-docs-c64]:before{content:"";position:absolute;background-image:url(angular-white-transparent.6504667372b77bd8f80e.svg);background-size:600px;top:0;bottom:0;left:0;right:0;background-repeat:no-repeat;background-position:80% 20px;opacity:.2}.docs-header-section[_ngcontent-material-docs-c64]{width:90%;position:absolute;z-index:0;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%)}.docs-header-headline[_ngcontent-material-docs-c64] h1[_ngcontent-material-docs-c64]{font-size:56px;font-weight:700;line-height:56px;margin:15px 5px}.docs-header-headline[_ngcontent-material-docs-c64] h2[_ngcontent-material-docs-c64]{font-size:20px;font-weight:300;line-height:28px;margin:15px 0 25px}.docs-homepage-promo[_ngcontent-material-docs-c64]{align-items:center;display:flex;flex-direction:column;padding:16px}.docs-homepage-promo[_ngcontent-material-docs-c64] a[_ngcontent-material-docs-c64]{text-decoration:none}.docs-homepage-promo[_ngcontent-material-docs-c64] h2[_ngcontent-material-docs-c64]{font-size:25px;font-weight:400;margin:16px 0;padding:0}.docs-homepage-promo[_ngcontent-material-docs-c64] p[_ngcontent-material-docs-c64]{font-size:16px;font-weight:400;line-height:28px;margin:0 0 24px;padding:0}.docs-homepage-promo[_ngcontent-material-docs-c64] mat-divider[_ngcontent-material-docs-c64]{width:75%}.docs-homepage-promo[_ngcontent-material-docs-c64] mat-icon[_ngcontent-material-docs-c64]{vertical-align:middle}.docs-homepage-row[_ngcontent-material-docs-c64]{width:75%;display:flex;flex-direction:row;margin:50px 0}.docs-homepage-carousel-row[_ngcontent-material-docs-c64]{margin:50px 0;width:75%;display:flex;flex-direction:column}.docs-homepage-carousel-row[_ngcontent-material-docs-c64] a.docs-link[_ngcontent-material-docs-c64]{width:100%;text-align:right}.docs-homepage-carousel-row[_ngcontent-material-docs-c64] h2[_ngcontent-material-docs-c64]{margin-top:0}.docs-homepage-guides[_ngcontent-material-docs-c64] .docs-homepage-guides-card-divider[_ngcontent-material-docs-c64]{width:30%;height:5px;margin:15px auto}.docs-homepage-guides[_ngcontent-material-docs-c64] .docs-homepage-guides-carousel-item[_ngcontent-material-docs-c64]{padding:15px;display:flex;text-decoration:none}.docs-homepage-guides[_ngcontent-material-docs-c64] .docs-homepage-guides-card.mat-card[_ngcontent-material-docs-c64]{text-align:center}.docs-homepage-guides[_ngcontent-material-docs-c64] .docs-homepage-guides-card[_ngcontent-material-docs-c64] .mat-card-title[_ngcontent-material-docs-c64]{height:35%;display:flex;align-items:center;justify-content:center;font-size:20px}.docs-homepage-featured-components[_ngcontent-material-docs-c64] .docs-featured-components-carousel-item[_ngcontent-material-docs-c64]{padding:15px;text-align:center}.docs-homepage-featured-components[_ngcontent-material-docs-c64] .docs-featured-components-carousel-item[_ngcontent-material-docs-c64] .docs-homepage-img-container[_ngcontent-material-docs-c64]{overflow:hidden;width:259px;height:144px;margin-bottom:10px}.docs-homepage-featured-components[_ngcontent-material-docs-c64] .docs-featured-components-carousel-item[_ngcontent-material-docs-c64] img[_ngcontent-material-docs-c64]{transition:.3s ease-in-out;width:100%}.docs-homepage-row-column[_ngcontent-material-docs-c64]{display:flex;flex-direction:column;margin:0 auto;width:30%}.docs-header-start[_ngcontent-material-docs-c64]{text-align:center;margin:50px 0 0}.docs-header-start[_ngcontent-material-docs-c64] .mat-raised-button[_ngcontent-material-docs-c64]{font-size:15px}@media (max-width:1200px){.docs-header-background[_ngcontent-material-docs-c64]{height:330px}.docs-header-background[_ngcontent-material-docs-c64]:before{background-image:none}}@media (max-width:850px){.docs-header-background[_ngcontent-material-docs-c64]:before{background-image:none}.docs-introduction[_ngcontent-material-docs-c64]{flex-direction:column}.docs-homepage-row-column[_ngcontent-material-docs-c64]{width:100%}}@media (max-width:720px){.docs-header-start[_ngcontent-material-docs-c64]{margin:15px 0 0}.docs-homepage-carousel-row[_ngcontent-material-docs-c64], .docs-homepage-row[_ngcontent-material-docs-c64]{margin:15px 0}}</style><style>.mat-divider{display:block;margin:0;border-top-width:1px;border-top-style:solid}.mat-divider.mat-divider-vertical{border-top:0;border-right-width:1px;border-right-style:solid}.mat-divider.mat-divider-inset{margin-left:80px}[dir=rtl] .mat-divider.mat-divider-inset{margin-left:auto;margin-right:80px}
</style><style>app-carousel{display:flex;align-items:center;justify-content:center;margin:0 40px}.docs-carousel-content{display:flex;flex-direction:row;overflow:hidden;outline:none}.docs-carousel-content-wrapper{position:relative}[carousel-item]{flex-shrink:0;transition:transform .5s ease-in-out}.docs-carousel-nav{position:absolute;top:50%;transform:translateY(-50%)}.docs-carousel-nav-prev{left:-40px}.docs-carousel-nav-next{right:-40px}</style><style>.docs-footer[_ngcontent-material-docs-c51]{padding:12px;font-size:12px}.docs-footer-list[_ngcontent-material-docs-c51]{align-items:center;display:flex;flex-flow:row wrap;padding:8px}.docs-footer-logo[_ngcontent-material-docs-c51]{flex:1}.docs-footer-angular-logo[_ngcontent-material-docs-c51]{height:50px}.docs-footer-version[_ngcontent-material-docs-c51]{display:flex;justify-content:center;align-items:center;flex:1}.docs-footer-version[_ngcontent-material-docs-c51] .angular-material-logo[_ngcontent-material-docs-c51]{height:40px;margin:10px 0 10px 16px}.docs-footer-version[_ngcontent-material-docs-c51] .version[_ngcontent-material-docs-c51]{margin:0 40px}.docs-footer-copyright[_ngcontent-material-docs-c51]{display:flex;flex:1;justify-content:flex-end;flex-direction:column;min-width:225px;margin-top:16px}.docs-footer-copyright[_ngcontent-material-docs-c51] > div[_ngcontent-material-docs-c51]{display:flex;flex-direction:column;align-self:flex-end;text-align:center}@media (min-width:885px){.docs-footer-copyright[_ngcontent-material-docs-c51]{margin-top:0}}.docs-footer-logo[_ngcontent-material-docs-c51] span[_ngcontent-material-docs-c51]{display:inline-block;line-height:50px;margin:0 40px;vertical-align:bottom}.docs-footer-logo[_ngcontent-material-docs-c51] span[_ngcontent-material-docs-c51] a[_ngcontent-material-docs-c51]{font-size:16px;padding:0}a[_ngcontent-material-docs-c51]{text-decoration:none;color:inherit}a[_ngcontent-material-docs-c51]:focus, a[_ngcontent-material-docs-c51]:hover{text-decoration:underline}@media screen and (max-width:884px){.docs-footer-list[_ngcontent-material-docs-c51]{flex-direction:column}}</style><style>.mat-card{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);display:block;position:relative;padding:16px;border-radius:4px}._mat-animation-noopable.mat-card{transition:none;animation:none}.mat-card .mat-divider-horizontal{position:absolute;left:0;width:100%}[dir=rtl] .mat-card .mat-divider-horizontal{left:auto;right:0}.mat-card .mat-divider-horizontal.mat-divider-inset{position:static;margin:0}[dir=rtl] .mat-card .mat-divider-horizontal.mat-divider-inset{margin-right:0}.cdk-high-contrast-active .mat-card{outline:solid 1px}.mat-card-actions,.mat-card-subtitle,.mat-card-content{display:block;margin-bottom:16px}.mat-card-title{display:block;margin-bottom:8px}.mat-card-actions{margin-left:-8px;margin-right:-8px;padding:8px 0}.mat-card-actions-align-end{display:flex;justify-content:flex-end}.mat-card-image{width:calc(100% + 32px);margin:0 -16px 16px -16px}.mat-card-footer{display:block;margin:0 -16px -16px -16px}.mat-card-actions .mat-button,.mat-card-actions .mat-raised-button,.mat-card-actions .mat-stroked-button{margin:0 8px}.mat-card-header{display:flex;flex-direction:row}.mat-card-header .mat-card-title{margin-bottom:12px}.mat-card-header-text{margin:0 16px}.mat-card-avatar{height:40px;width:40px;border-radius:50%;flex-shrink:0;object-fit:cover}.mat-card-title-group{display:flex;justify-content:space-between}.mat-card-sm-image{width:80px;height:80px}.mat-card-md-image{width:112px;height:112px}.mat-card-lg-image{width:152px;height:152px}.mat-card-xl-image{width:240px;height:240px;margin:-8px}.mat-card-title-group>.mat-card-xl-image{margin:-8px 0 8px}@media(max-width: 599px){.mat-card-title-group{margin:0}.mat-card-xl-image{margin-left:0;margin-right:0}}.mat-card>:first-child,.mat-card-content>:first-child{margin-top:0}.mat-card>:last-child:not(.mat-card-footer),.mat-card-content>:last-child:not(.mat-card-footer){margin-bottom:0}.mat-card-image:first-child{margin-top:-16px;border-top-left-radius:inherit;border-top-right-radius:inherit}.mat-card>.mat-card-actions:last-child{margin-bottom:-8px;padding-bottom:0}.mat-card-actions .mat-button:first-child,.mat-card-actions .mat-raised-button:first-child,.mat-card-actions .mat-stroked-button:first-child{margin-left:0;margin-right:0}.mat-card-title:not(:first-child),.mat-card-subtitle:not(:first-child){margin-top:-4px}.mat-card-header .mat-card-subtitle:not(:first-child){margin-top:-8px}.mat-card>.mat-card-xl-image:first-child{margin-top:-8px}.mat-card>.mat-card-xl-image:last-child{margin-bottom:-8px}
</style></head>
<body class="docs-app-background">
<material-docs-app ng-version="11.0.0"><app-navbar class="mat-elevation-z6" _nghost-material-docs-c49=""><nav _ngcontent-material-docs-c49="" aria-label="Top Toolbar" class="docs-navbar-header"><!----><a _ngcontent-material-docs-c49="" mat-button="" routerlink="/" aria-label="Angular Material" class="mat-focus-indicator docs-button mat-button mat-button-base" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper"><img _ngcontent-material-docs-c49="" src="../../../assets/img/homepage/angular-white-transparent.svg" alt="angular" class="docs-angular-logo"><span _ngcontent-material-docs-c49="">Material</span></span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a><a _ngcontent-material-docs-c49="" mat-button="" class="mat-focus-indicator docs-navbar-hide-small docs-button mat-button mat-button-base ng-star-inserted" tabindex="0" aria-disabled="false" href="/components"><span class="mat-button-wrapper">组件</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a><a _ngcontent-material-docs-c49="" mat-button="" class="mat-focus-indicator docs-navbar-hide-small docs-button mat-button mat-button-base ng-star-inserted" tabindex="0" aria-disabled="false" href="/cdk"><span class="mat-button-wrapper">组件开发包</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a><a _ngcontent-material-docs-c49="" mat-button="" class="mat-focus-indicator docs-navbar-hide-small docs-button mat-button mat-button-base ng-star-inserted" tabindex="0" aria-disabled="false" href="/guides"><span class="mat-button-wrapper">使用指南</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a><!----><div _ngcontent-material-docs-c49="" class="flex-spacer"></div><version-picker _ngcontent-material-docs-c49=""><button aria-haspopup="true" mat-button="" aria-label="Select a version" mattooltip="选择文档版本" class="mat-focus-indicator mat-tooltip-trigger mat-menu-trigger mat-button mat-button-base" aria-describedby="cdk-describedby-message-0" cdk-describedby-host=""><span class="mat-button-wrapper"> 11.0.3 <mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true" data-mat-icon-type="font">arrow_drop_down</mat-icon></span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></button><!----><mat-menu class="ng-tns-c42-0"><!----></mat-menu></version-picker><theme-picker _ngcontent-material-docs-c49=""><button aria-haspopup="true" mat-icon-button="" aria-label="Select a theme" mattooltip="选择文档的主题" class="mat-focus-indicator mat-tooltip-trigger mat-menu-trigger mat-icon-button mat-button-base" aria-describedby="cdk-describedby-message-1" cdk-describedby-host=""><span class="mat-button-wrapper"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true" data-mat-icon-type="font">format_color_fill</mat-icon></span><span matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></span><span class="mat-button-focus-overlay"></span></button><!----><mat-menu xposition="before" class=""><!----></mat-menu></theme-picker><a _ngcontent-material-docs-c49="" mat-button="" href="https://github.com/ng-docs/components" target="_blank" aria-label="GitHub Repository" class="mat-focus-indicator docs-button docs-navbar-hide-small mat-button mat-button-base" tabindex="0" aria-disabled="false"><span class="mat-button-wrapper"><img _ngcontent-material-docs-c49="" src="../../../assets/img/homepage/github-circle-white-transparent.svg" alt="angular" class="docs-angular-logo"> GitHub </span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a><a _ngcontent-material-docs-c49="" mat-icon-button="" href="https://github.com/angular/components" aria-label="GitHub Repository" class="mat-focus-indicator docs-button docs-navbar-show-small mat-icon-button mat-button-base" tabindex="0" aria-disabled="false"><span class="mat-button-wrapper"><img _ngcontent-material-docs-c49="" src="../../../assets/img/homepage/github-circle-white-transparent.svg" alt="angular" class="docs-angular-logo"></span><span matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></span><span class="mat-button-focus-overlay"></span></a></nav><nav _ngcontent-material-docs-c49="" aria-label="Section Nav Bar" class="docs-navbar docs-navbar-show-small"><a _ngcontent-material-docs-c49="" mat-button="" class="mat-focus-indicator docs-navbar-link mat-button mat-button-base ng-star-inserted" tabindex="0" aria-disabled="false" href="/components"><span class="mat-button-wrapper">组件</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a><a _ngcontent-material-docs-c49="" mat-button="" class="mat-focus-indicator docs-navbar-link mat-button mat-button-base ng-star-inserted" tabindex="0" aria-disabled="false" href="/cdk"><span class="mat-button-wrapper">组件开发包</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a><a _ngcontent-material-docs-c49="" mat-button="" class="mat-focus-indicator docs-navbar-link mat-button mat-button-base ng-star-inserted" tabindex="0" aria-disabled="false" href="/guides"><span class="mat-button-wrapper">使用指南</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a><!----></nav></app-navbar><router-outlet></router-outlet><app-homepage _nghost-material-docs-c64="" class="ng-star-inserted"><header _ngcontent-material-docs-c64="" focusonnavigation="" aria-label="Get started" id="homepage-header" class="docs-header-background" tabindex="-1" style="outline: none;"><div _ngcontent-material-docs-c64="" class="docs-header-section"><div _ngcontent-material-docs-c64="" class="docs-header-headline"><h1 _ngcontent-material-docs-c64="" class="mat-h1">Angular Material</h1><h2 _ngcontent-material-docs-c64="" translation-result=""> Material Design 组件库 for Angular</h2><h2 _ngcontent-material-docs-c64="" translation-origin="off"> Material Design components for Angular</h2></div><div _ngcontent-material-docs-c64="" class="docs-header-start"><a _ngcontent-material-docs-c64="" translation-result="" mat-raised-button="" routerlink="/guide/getting-started" class="mat-focus-indicator docs-button mat-raised-button mat-button-base" tabindex="0" aria-disabled="false" href="/guide/getting-started"><span class="mat-button-wrapper">快速上手</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a><a _ngcontent-material-docs-c64="" translation-origin="off" mat-raised-button="" routerlink="/guide/getting-started" class="mat-focus-indicator docs-button mat-raised-button mat-button-base" tabindex="0" aria-disabled="false" href="/guide/getting-started"><span class="mat-button-wrapper">Get started</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a></div></div></header><main _ngcontent-material-docs-c64="" class="docs-homepage-promo"><div _ngcontent-material-docs-c64="" class="docs-homepage-row docs-introduction"><div _ngcontent-material-docs-c64="" class="docs-homepage-row-column"><h2 _ngcontent-material-docs-c64="" translation-result="">高质量</h2><h2 _ngcontent-material-docs-c64="" translation-origin="off">High quality</h2><p _ngcontent-material-docs-c64="" translation-result="">支持国际化和无障碍性的组件，为每一个人设计。测试充分，保障性能和可靠性。</p><p _ngcontent-material-docs-c64="" translation-origin="off"> Internationalized and accessible components for everyone. Well tested to ensure performance and reliability. </p><p _ngcontent-material-docs-c64="" translation-result="">直白的 API，在各个平台上具有一致的行为。</p><p _ngcontent-material-docs-c64="" translation-origin="off">Straightforward APIs with consistent cross platform behaviour.</p></div><div _ngcontent-material-docs-c64="" class="docs-homepage-row-column"><h2 _ngcontent-material-docs-c64="" translation-result="">多才多艺</h2><h2 _ngcontent-material-docs-c64="" translation-origin="off">Versatile</h2><p _ngcontent-material-docs-c64="" translation-result="">提供了很多工具，帮助开发者构建支持常用交互模式的自定义组件。</p><p _ngcontent-material-docs-c64="" translation-origin="off"> Provide tools that help developers build their own custom components with common interaction patterns. </p><p _ngcontent-material-docs-c64="" translation-result="">可在 Material Design 规范的框架内进行定制。</p><p _ngcontent-material-docs-c64="" translation-origin="off"> Customizable within the bounds of the Material Design specification. </p></div><div _ngcontent-material-docs-c64="" class="docs-homepage-row-column"><h2 _ngcontent-material-docs-c64="" translation-result="">无缝集成</h2><h2 _ngcontent-material-docs-c64="" translation-origin="off">Frictionless</h2><p _ngcontent-material-docs-c64="" translation-result="">由 Angular 团队构建，与 Angular 无缝集成</p><p _ngcontent-material-docs-c64="" translation-origin="off"> Built by the Angular team to integrate seamlessly with Angular. </p><p _ngcontent-material-docs-c64="" translation-result="">从草稿阶段开始，或空降到现有应用。</p><p _ngcontent-material-docs-c64="" translation-origin="off"> Start from scratch or drop into your existing applications. </p></div></div><mat-divider _ngcontent-material-docs-c64="" role="separator" class="mat-divider mat-divider-horizontal" aria-orientation="horizontal"></mat-divider><div _ngcontent-material-docs-c64="" class="docs-homepage-featured-components docs-homepage-carousel-row"><h2 _ngcontent-material-docs-c64="" translation-result="">特性组件</h2><h2 _ngcontent-material-docs-c64="" translation-origin="off">Featured components</h2><app-carousel _ngcontent-material-docs-c64=""><div role="region" class="docs-carousel-content-wrapper" style="width: 580px; min-width: 290px;"><!----><div role="list" tabindex="0" class="docs-carousel-content"><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-featured-components-carousel-item ng-star-inserted" href="/components/datepicker" tabindex="-1" role="listitem" style="width: 260px;"><div _ngcontent-material-docs-c64="" class="docs-homepage-img-container"><img _ngcontent-material-docs-c64="" alt="" role="presentation" src="../../../assets/screenshots/datepicker.scene.png"></div><p _ngcontent-material-docs-c64="">日期选择器 <small _ngcontent-material-docs-c64="">Datepicker</small></p></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-featured-components-carousel-item ng-star-inserted" href="/components/input" tabindex="-1" role="listitem" style="width: 260px;"><div _ngcontent-material-docs-c64="" class="docs-homepage-img-container"><img _ngcontent-material-docs-c64="" alt="" role="presentation" src="../../../assets/screenshots/input.scene.png"></div><p _ngcontent-material-docs-c64="">输入框 <small _ngcontent-material-docs-c64="">Input</small></p></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-featured-components-carousel-item ng-star-inserted" href="/components/slide-toggle" tabindex="-1" role="listitem" style="width: 260px;"><div _ngcontent-material-docs-c64="" class="docs-homepage-img-container"><img _ngcontent-material-docs-c64="" alt="" role="presentation" src="../../../assets/screenshots/slide-toggle.scene.png"></div><p _ngcontent-material-docs-c64="">滑块开关 <small _ngcontent-material-docs-c64="">Slide toggle</small></p></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-featured-components-carousel-item ng-star-inserted" href="/components/slider" tabindex="-1" role="listitem" style="width: 260px;"><div _ngcontent-material-docs-c64="" class="docs-homepage-img-container"><img _ngcontent-material-docs-c64="" alt="" role="presentation" src="../../../assets/screenshots/slider.scene.png"></div><p _ngcontent-material-docs-c64="">滑杆 <small _ngcontent-material-docs-c64="">Slider</small></p></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-featured-components-carousel-item ng-star-inserted" href="/components/button" tabindex="-1" role="listitem" style="width: 260px;"><div _ngcontent-material-docs-c64="" class="docs-homepage-img-container"><img _ngcontent-material-docs-c64="" alt="" role="presentation" src="../../../assets/screenshots/button.scene.png"></div><p _ngcontent-material-docs-c64="">按钮 <small _ngcontent-material-docs-c64="">Button</small></p></a><!----></div><button aria-hidden="true" tabindex="-1" mat-mini-fab="" aria-label="next" class="mat-focus-indicator docs-carousel-nav docs-carousel-nav-next mat-mini-fab mat-button-base mat-accent ng-star-inserted"><span class="mat-button-wrapper"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true" data-mat-icon-type="font">navigate_next</mat-icon></span><span matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></span><span class="mat-button-focus-overlay"></span></button><!----></div></app-carousel><a _ngcontent-material-docs-c64="" routerlink="/components" class="docs-link" href="/components"> 查看所有组件 <mat-icon _ngcontent-material-docs-c64="" role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true" data-mat-icon-type="font">chevron_right</mat-icon></a></div><mat-divider _ngcontent-material-docs-c64="" role="separator" class="mat-divider mat-divider-horizontal" aria-orientation="horizontal"></mat-divider><div _ngcontent-material-docs-c64="" class="docs-homepage-guides docs-homepage-carousel-row"><h2 _ngcontent-material-docs-c64="" translation-result="">指南</h2><h2 _ngcontent-material-docs-c64="" translation-origin="off">Guides</h2><app-carousel _ngcontent-material-docs-c64=""><div role="region" class="docs-carousel-content-wrapper" style="width: 580px; min-width: 290px;"><!----><div role="list" tabindex="0" class="docs-carousel-content"><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-homepage-guides-carousel-item ng-star-inserted" href="/guide/getting-started" tabindex="-1" role="listitem" style="width: 260px;"><mat-card _ngcontent-material-docs-c64="" class="mat-card mat-focus-indicator docs-homepage-guides-card"><mat-card-title _ngcontent-material-docs-c64="" class="mat-card-title">快速上手</mat-card-title><div _ngcontent-material-docs-c64="" class="docs-homepage-guides-card-divider"></div><mat-card-content _ngcontent-material-docs-c64="" class="mat-card-content docs-component-category-list-card-summary"> 把 Angular Material 添加到你的项目中！ </mat-card-content></mat-card></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-homepage-guides-carousel-item ng-star-inserted" href="/guide/schematics" tabindex="-1" role="listitem" style="width: 260px;"><mat-card _ngcontent-material-docs-c64="" class="mat-card mat-focus-indicator docs-homepage-guides-card"><mat-card-title _ngcontent-material-docs-c64="" class="mat-card-title">原理图</mat-card-title><div _ngcontent-material-docs-c64="" class="docs-homepage-guides-card-divider"></div><mat-card-content _ngcontent-material-docs-c64="" class="mat-card-content docs-component-category-list-card-summary"> 使用原理图快速生成带有 Material Design 组件的视图。 </mat-card-content></mat-card></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-homepage-guides-carousel-item ng-star-inserted" href="/guide/theming" tabindex="-1" role="listitem" style="width: 260px;"><mat-card _ngcontent-material-docs-c64="" class="mat-card mat-focus-indicator docs-homepage-guides-card"><mat-card-title _ngcontent-material-docs-c64="" class="mat-card-title">Angular Material 主题</mat-card-title><div _ngcontent-material-docs-c64="" class="docs-homepage-guides-card-divider"></div><mat-card-content _ngcontent-material-docs-c64="" class="mat-card-content docs-component-category-list-card-summary"> 使用 Angular Material 的主题体系定制你的应用。 </mat-card-content></mat-card></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-homepage-guides-carousel-item ng-star-inserted" href="/guide/theming-your-components" tabindex="-1" role="listitem" style="width: 260px;"><mat-card _ngcontent-material-docs-c64="" class="mat-card mat-focus-indicator docs-homepage-guides-card"><mat-card-title _ngcontent-material-docs-c64="" class="mat-card-title">为你自己的组件设置主题</mat-card-title><div _ngcontent-material-docs-c64="" class="docs-homepage-guides-card-divider"></div><mat-card-content _ngcontent-material-docs-c64="" class="mat-card-content docs-component-category-list-card-summary"> 在你的自定义组件中使用 Angular Material 的主题体系。 </mat-card-content></mat-card></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-homepage-guides-carousel-item ng-star-inserted" href="/guide/typography" tabindex="-1" role="listitem" style="width: 260px;"><mat-card _ngcontent-material-docs-c64="" class="mat-card mat-focus-indicator docs-homepage-guides-card"><mat-card-title _ngcontent-material-docs-c64="" class="mat-card-title">自定义排版</mat-card-title><div _ngcontent-material-docs-c64="" class="docs-homepage-guides-card-divider"></div><mat-card-content _ngcontent-material-docs-c64="" class="mat-card-content docs-component-category-list-card-summary"> 为 Angular Material 组件配置排版设置。 </mat-card-content></mat-card></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-homepage-guides-carousel-item ng-star-inserted" href="/guide/customizing-component-styles" tabindex="-1" role="listitem" style="width: 260px;"><mat-card _ngcontent-material-docs-c64="" class="mat-card mat-focus-indicator docs-homepage-guides-card"><mat-card-title _ngcontent-material-docs-c64="" class="mat-card-title">自定义组件样式</mat-card-title><div _ngcontent-material-docs-c64="" class="docs-homepage-guides-card-divider"></div><mat-card-content _ngcontent-material-docs-c64="" class="mat-card-content docs-component-category-list-card-summary"> 了解如何定制 Angular Material 组件的样式。 </mat-card-content></mat-card></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-homepage-guides-carousel-item ng-star-inserted" href="/guide/creating-a-custom-form-field-control" tabindex="-1" role="listitem" style="width: 260px;"><mat-card _ngcontent-material-docs-c64="" class="mat-card mat-focus-indicator docs-homepage-guides-card"><mat-card-title _ngcontent-material-docs-c64="" class="mat-card-title">自定义表单控件</mat-card-title><div _ngcontent-material-docs-c64="" class="docs-homepage-guides-card-divider"></div><mat-card-content _ngcontent-material-docs-c64="" class="mat-card-content docs-component-category-list-card-summary"> 构建一个可以和 `<mat-form-field>` 集成的自定义表单控件。 </mat-card-content></mat-card></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-homepage-guides-carousel-item ng-star-inserted" href="/guide/elevation" tabindex="-1" role="listitem" style="width: 260px;"><mat-card _ngcontent-material-docs-c64="" class="mat-card mat-focus-indicator docs-homepage-guides-card"><mat-card-title _ngcontent-material-docs-c64="" class="mat-card-title">纵深助手</mat-card-title><div _ngcontent-material-docs-c64="" class="docs-homepage-guides-card-divider"></div><mat-card-content _ngcontent-material-docs-c64="" class="mat-card-content docs-component-category-list-card-summary"> 利用纵深感强化你的组件。 </mat-card-content></mat-card></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-homepage-guides-carousel-item ng-star-inserted" href="/guide/creating-a-custom-stepper-using-the-cdk-stepper" tabindex="-1" role="listitem" style="width: 260px;"><mat-card _ngcontent-material-docs-c64="" class="mat-card mat-focus-indicator docs-homepage-guides-card"><mat-card-title _ngcontent-material-docs-c64="" class="mat-card-title">使用 CdkStepper 自定义步进器</mat-card-title><div _ngcontent-material-docs-c64="" class="docs-homepage-guides-card-divider"></div><mat-card-content _ngcontent-material-docs-c64="" class="mat-card-content docs-component-category-list-card-summary"> 使用 Angular CDK 创建自定义步进器组件。 </mat-card-content></mat-card></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-homepage-guides-carousel-item ng-star-inserted" href="/guide/using-component-harnesses" tabindex="-1" role="listitem" style="width: 260px;"><mat-card _ngcontent-material-docs-c64="" class="mat-card mat-focus-indicator docs-homepage-guides-card"><mat-card-title _ngcontent-material-docs-c64="" class="mat-card-title">使用组件测试工具进行测试</mat-card-title><div _ngcontent-material-docs-c64="" class="docs-homepage-guides-card-divider"></div><mat-card-content _ngcontent-material-docs-c64="" class="mat-card-content docs-component-category-list-card-summary"> 使用组件测试工具编写测试，以获得便利性，并输出更有意义的结果。 </mat-card-content></mat-card></a><a _ngcontent-material-docs-c64="" carousel-item="" class="docs-homepage-guides-carousel-item ng-star-inserted" href="/guide/deploy-to-local" tabindex="-1" role="listitem" style="width: 260px;"><mat-card _ngcontent-material-docs-c64="" class="mat-card mat-focus-indicator docs-homepage-guides-card"><mat-card-title _ngcontent-material-docs-c64="" class="mat-card-title">部署到本地环境（译者）</mat-card-title><div _ngcontent-material-docs-c64="" class="docs-homepage-guides-card-divider"></div><mat-card-content _ngcontent-material-docs-c64="" class="mat-card-content docs-component-category-list-card-summary"> 将本文档部署到局域网或本地环境，以便在企业内网或脱机等环境下使用。 </mat-card-content></mat-card></a><!----></div><button aria-hidden="true" tabindex="-1" mat-mini-fab="" aria-label="next" class="mat-focus-indicator docs-carousel-nav docs-carousel-nav-next mat-mini-fab mat-button-base mat-accent ng-star-inserted"><span class="mat-button-wrapper"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true" data-mat-icon-type="font">navigate_next</mat-icon></span><span matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></span><span class="mat-button-focus-overlay"></span></button><!----></div></app-carousel><a _ngcontent-material-docs-c64="" routerlink="/guides" class="docs-link" href="/guides"> 查看所有指南 <mat-icon _ngcontent-material-docs-c64="" role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true" data-mat-icon-type="font">chevron_right</mat-icon></a></div></main><app-footer _ngcontent-material-docs-c64="" _nghost-material-docs-c51=""><footer _ngcontent-material-docs-c51="" class="docs-footer"><div _ngcontent-material-docs-c51="" class="docs-footer-list"><div _ngcontent-material-docs-c51="" class="docs-footer-logo"><div _ngcontent-material-docs-c51="" class="footer-logo"><img _ngcontent-material-docs-c51="" src="../../../assets/img/homepage/angular-white-transparent.svg" alt="Angular icon" class="docs-footer-angular-logo"><span _ngcontent-material-docs-c51="" translation-result=""><a _ngcontent-material-docs-c51="" href="https://angular.cn">学习 Angular</a></span><span _ngcontent-material-docs-c51="" translation-origin="off"><a _ngcontent-material-docs-c51="" href="https://angular.io">Learn Angular</a></span></div></div><div _ngcontent-material-docs-c51="" class="docs-footer-version"><img _ngcontent-material-docs-c51="" src="../../../assets/img/angular-material-logo.svg" alt="Angular Material icon" class="angular-material-logo"><span _ngcontent-material-docs-c51="" translation-result="" class="version">当前版本：11.0.3</span><span _ngcontent-material-docs-c51="" translation-origin="off" class="version">Current Version: 11.0.3</span></div><div _ngcontent-material-docs-c51="" class="docs-footer-copyright"><div _ngcontent-material-docs-c51=""><span _ngcontent-material-docs-c51="">Powered by Google ©2010-2020.</span><a _ngcontent-material-docs-c51="" href="https://github.com/angular/components/blob/master/LICENSE">Code licensed under an MIT-style License.</a><span _ngcontent-material-docs-c51="">Documentation licensed under CC BY 4.0.</span></div></div></div></footer></app-footer></app-homepage><!----></material-docs-app>
<script>
// Note this is a customised version of the GA tracking snippet
// See the comments below for more info
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
~i.name.indexOf('NG_DEFER_BOOTSTRAP') || // only load library if not running e2e tests
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
</script>
<script>
// This hides the address bar on mobile browsers
// https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
window.addEventListener('load', function () {
window.scrollTo(0, 1);
});
</script>
<script src="assets/translator/js/hammer.min.js"></script>
<script src="assets/translator/js/web-animations.min.js"></script>
<script src="assets/translator/js/translator.js"></script>
<script src="runtime-es2015.0ff87c450d3498ddf905.js" type="module"></script><script src="runtime-es5.0ff87c450d3498ddf905.js" nomodule="" defer=""></script><script src="polyfills-es5.12c37a181442be72407a.js" nomodule="" defer=""></script><script src="polyfills-es2015.33bc2f4b9af7ed5d09a0.js" type="module"></script><script src="main-es2015.2707bceebcc79c8a0eb7.js" type="module"></script><script src="main-es5.2707bceebcc79c8a0eb7.js" nomodule="" defer=""></script>
<div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div><div id="cdk-describedby-message-container" class="cdk-visually-hidden" aria-hidden="true"><div id="cdk-describedby-message-0">选择文档版本</div><div id="cdk-describedby-message-1">选择文档的主题</div></div></body></html>