mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
docs: replace material.a.io with material.a.dev (#61513)
PR Close #61513
This commit is contained in:
Jens Kuehlers
committed by
Jessica Janiuk
Jessica Janiuk
parent
a62d3e72ce
commit
e2c1d00730
@@ -137,7 +137,7 @@ Join the conversation and help the community.
|
||||
[changelog]: CHANGELOG.md
|
||||
[ng]: https://angular.dev
|
||||
[documentation]: https://angular.dev/overview
|
||||
[angularmaterial]: https://material.angular.io/
|
||||
[angularmaterial]: https://material.angular.dev/
|
||||
[cli]: https://angular.dev/tools/cli
|
||||
[architecture]: https://angular.dev/essentials
|
||||
[componentstemplates]: https://angular.dev/tutorials/learn-angular/1-components-in-angular
|
||||
|
||||
@@ -1822,7 +1822,7 @@ export const RECOMMENDATIONS: Step[] = [
|
||||
material: true,
|
||||
step: 'v15 mat refactor',
|
||||
action:
|
||||
'In Angular Material v15, many of the components have been refactored to be based on the official Material Design Components for Web (MDC). This change affected the DOM and CSS classes of many components. <a href="https://rc.material.angular.io/guide/mdc-migration" alt="Link to more information about this change">Read further</a>',
|
||||
'In Angular Material v15, many of the components have been refactored to be based on the official Material Design Components for Web (MDC). This change affected the DOM and CSS classes of many components. <a href="https://rc.material.angular.dev/guide/mdc-migration" alt="Link to more information about this change">Read further</a>',
|
||||
},
|
||||
{
|
||||
possibleIn: 1500,
|
||||
|
||||
@@ -897,11 +897,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
|
||||
},
|
||||
{
|
||||
label: 'Angular CDK',
|
||||
path: 'https://material.angular.io/cdk/categories',
|
||||
path: 'https://material.angular.dev/cdk/categories',
|
||||
},
|
||||
{
|
||||
label: 'Angular Material',
|
||||
path: 'https://material.angular.io/',
|
||||
path: 'https://material.angular.dev/',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -36,8 +36,8 @@ See the [Binding syntax guide](guide/templates) for more background on the diffe
|
||||
|
||||
## Angular UI components
|
||||
|
||||
The [Angular Material](https://material.angular.io) library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible.
|
||||
The [Component Development Kit (CDK)](https://material.angular.io/cdk/categories) includes the `a11y` package that provides tools to support various areas of accessibility.
|
||||
The [Angular Material](https://material.angular.dev) library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible.
|
||||
The [Component Development Kit (CDK)](https://material.angular.dev/cdk/categories) includes the `a11y` package that provides tools to support various areas of accessibility.
|
||||
For example:
|
||||
|
||||
* `LiveAnnouncer` is used to announce messages for screen-reader users using an `aria-live` region.
|
||||
@@ -46,7 +46,7 @@ For example:
|
||||
* The `cdkTrapFocus` directive traps Tab-key focus within an element.
|
||||
Use it to create accessible experience for components such as modal dialogs, where focus must be constrained.
|
||||
|
||||
For full details of these and other tools, see the [Angular CDK accessibility overview](https://material.angular.io/cdk/a11y/overview).
|
||||
For full details of these and other tools, see the [Angular CDK accessibility overview](https://material.angular.dev/cdk/a11y/overview).
|
||||
|
||||
### Augmenting native elements
|
||||
|
||||
@@ -66,7 +66,7 @@ For example, the native `<input>` element cannot have children, so any custom te
|
||||
By just including `<input>` in your custom component's template, it's impossible for your component's users to set arbitrary properties and attributes to the `<input>` element.
|
||||
Instead, create a container component that uses content projection to include the native control in the component's API.
|
||||
|
||||
You can see [`MatFormField`](https://material.angular.io/components/form-field/overview) as an example of this pattern.
|
||||
You can see [`MatFormField`](https://material.angular.dev/components/form-field/overview) as an example of this pattern.
|
||||
|
||||
## Case study: Building a custom progress bar
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ For the full API reference, please see the [Angular CDK's drag and drop API refe
|
||||
|
||||
### CDK Installation
|
||||
|
||||
The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the drag and drop directives, first install `@angular/cdk` from npm. You can do this from your terminal using Angular CLI:
|
||||
The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the drag and drop directives, first install `@angular/cdk` from npm. You can do this from your terminal using Angular CLI:
|
||||
|
||||
<docs-code language="shell">
|
||||
ng add @angular/cdk
|
||||
|
||||
@@ -279,5 +279,5 @@ For more details, see [Structural Directives](/guide/directives/structural-direc
|
||||
|
||||
For examples of how `ng-template` is used in other libraries, check out:
|
||||
|
||||
- [Tabs from Angular Material](https://material.angular.io/components/tabs/overview) - nothing gets rendered into the DOM until the tab is activated
|
||||
- [Table from Angular Material](https://material.angular.io/components/table/overview) - allows developers to define different ways to render data
|
||||
- [Tabs from Angular Material](https://material.angular.dev/components/tabs/overview) - nothing gets rendered into the DOM until the tab is activated
|
||||
- [Table from Angular Material](https://material.angular.dev/components/table/overview) - allows developers to define different ways to render data
|
||||
|
||||
@@ -16,7 +16,7 @@ it('should load button with exact text', async () => {
|
||||
});
|
||||
</docs-code>
|
||||
|
||||
Component harnesses are especially useful for shared UI widgets. Developers often write tests that depend on private implementation details of widgets, such as DOM structure and CSS classes. Those dependencies make tests brittle and hard to maintain. Harnesses offer an alternative— a supported API that interacts with the widget the same way an end-user does. Widget implementation changes now become less likely to break user tests. For example, [Angular Material](https://material.angular.io/components/categories) provides a test harness for each component in the library.
|
||||
Component harnesses are especially useful for shared UI widgets. Developers often write tests that depend on private implementation details of widgets, such as DOM structure and CSS classes. Those dependencies make tests brittle and hard to maintain. Harnesses offer an alternative— a supported API that interacts with the widget the same way an end-user does. Widget implementation changes now become less likely to break user tests. For example, [Angular Material](https://material.angular.dev/components/categories) provides a test harness for each component in the library.
|
||||
|
||||
Component harnesses support multiple testing environments. You can use the same harness implementation in both unit and end-to-end tests. Test authors only need to learn one API and component authors don't have to maintain separate unit and end-to-end test implementations.
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ Otherwise, to add support for other environments, you need to define how to inte
|
||||
|
||||
### CDK Installation
|
||||
|
||||
The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
|
||||
The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
|
||||
|
||||
<docs-code language="shell">
|
||||
ng add @angular/cdk
|
||||
|
||||
@@ -12,7 +12,7 @@ For components that appear in only one place, such as a page in an application,
|
||||
|
||||
### CDK Installation
|
||||
|
||||
The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
|
||||
The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
|
||||
|
||||
<docs-code language="shell">
|
||||
ng add @angular/cdk
|
||||
|
||||
@@ -6,7 +6,7 @@ TIP: This guide assumes you've already read the [component harnesses overview gu
|
||||
|
||||
### CDK Installation
|
||||
|
||||
The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
|
||||
The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
|
||||
|
||||
<docs-code language="shell">
|
||||
ng add @angular/cdk
|
||||
@@ -155,7 +155,7 @@ While every harness defines an API specific to its corresponding component, they
|
||||
|
||||
Beyond that, the API of any given harness is specific to its corresponding component; refer to the component's documentation to learn how to use a specific harness.
|
||||
|
||||
As an example, the following is a test for a component that uses the [Angular Material slider component harness](https://material.angular.io/components/slider/api#MatSliderHarness):
|
||||
As an example, the following is a test for a component that uses the [Angular Material slider component harness](https://material.angular.dev/components/slider/api#MatSliderHarness):
|
||||
|
||||
<docs-code language="typescript">
|
||||
it('should get value of slider thumb', async () => {
|
||||
|
||||
@@ -71,7 +71,7 @@ Start developing with the latest Angular features from our roadmap. This list re
|
||||
|
||||
<docs-card-container>
|
||||
<docs-card title="New CDK primitives" href="">
|
||||
We are working on new CDK primitives to facilitate creating custom components based on the WAI-ARIA design patterns for [Combobox](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox). Angular v14 introduced stable [menu and dialog primitives](https://material.angular.io/cdk/categories) as part of this project, and in v15 Listbox.
|
||||
We are working on new CDK primitives to facilitate creating custom components based on the WAI-ARIA design patterns for [Combobox](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox). Angular v14 introduced stable [menu and dialog primitives](https://material.angular.dev/cdk/categories) as part of this project, and in v15 Listbox.
|
||||
</docs-card>
|
||||
<docs-card title="Angular component accessibility" href="">
|
||||
We are evaluating components in Angular Material against accessibility standards such as WCAG and working to fix any issues that arise from this process.
|
||||
@@ -157,7 +157,7 @@ This section represents explorations and prototyping of potential future project
|
||||
<docs-card title="Local template variables" link="Completed in Q3 2024">
|
||||
We've released the support for local template variables in Angular, see [`@let` docs](https://angular.dev/api/core/@let) for additional information.
|
||||
</docs-card>
|
||||
<docs-card title="Expand the customizability of Angular Material" link="Completed in Q2 2024" href="https://material.angular.io/guide/theming">
|
||||
<docs-card title="Expand the customizability of Angular Material" link="Completed in Q2 2024" href="https://material.angular.dev/guide/theming">
|
||||
To provide better customization of our Angular Material components and enable Material 3 capabilities, we'll be collaborating with Google's Material Design team on defining token-based theming APIs.
|
||||
|
||||
In v17.2 we shared experimental support for Angular Material 3 and in v18 we graduated it to stable.
|
||||
@@ -215,7 +215,7 @@ This section represents explorations and prototyping of potential future project
|
||||
<docs-card title="Better stack traces" link="Completed Q4 2022" href="https://developer.chrome.com/blog/devtools-better-angular-debugging/">
|
||||
The Angular and the Chrome DevTools are working together to enable more readable stack traces for error messages. In v15 we released improved relevant and linked stack traces. As a lower priority initiative, we'll be exploring how to make the stack traces friendlier by providing more accurate call frame names for templates.
|
||||
</docs-card>
|
||||
<docs-card title="Enhanced Angular Material components by integrating MDC Web" link="Completed Q4 2022" href="https://material.angular.io/guide/mdc-migration">
|
||||
<docs-card title="Enhanced Angular Material components by integrating MDC Web" link="Completed Q4 2022" href="https://material.angular.dev/guide/mdc-migration">
|
||||
MDC Web is a library created by the Google Material Design team that provides reusable primitives for building Material Design components. The Angular team is incorporating these primitives into Angular Material. Using MDC Web aligns Angular Material more closely with the Material Design specification, expands accessibility, improves component quality, and improves the velocity of our team.
|
||||
</docs-card>
|
||||
<docs-card title="Implement APIs for optional NgModules" link="Completed Q4 2022" href="https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8">
|
||||
@@ -287,7 +287,7 @@ This section represents explorations and prototyping of potential future project
|
||||
<docs-card title="Improved developer onboarding with refreshed introductory documentation" link="Completed Q1 2021" href="tutorials">
|
||||
We will redefine the user learning journeys and refresh the introductory documentation. We will clearly state the benefits of Angular, how to explore its capabilities and provide guidance so developers can become proficient with the framework in as little time as possible.
|
||||
</docs-card>
|
||||
<docs-card title="Expand component harnesses best practices" link="Completed Q1 2021" href="https://material.angular.io/guide/using-component-harnesses">
|
||||
<docs-card title="Expand component harnesses best practices" link="Completed Q1 2021" href="https://material.angular.dev/guide/using-component-harnesses">
|
||||
Angular CDK introduced the concept of component test harnesses to Angular in version 9. Test harnesses let component authors create supported APIs for testing component interactions. We are continuing to improve this harness infrastructure and clarifying the best practices around using harnesses. We are also working to drive more harness adoption inside of Google.
|
||||
</docs-card>
|
||||
<docs-card title="Author a guide for content projection" link="Completed Q2 2021" href="https://angular.io/docs">
|
||||
|
||||
@@ -62,7 +62,7 @@ For more details of what these look like and how to create them, see:
|
||||
An *add schematic* is typically supplied with a library, so that the library can be added to an existing project with `ng add`.
|
||||
The `add` command uses your package manager to download new dependencies, and invokes an installation script that is implemented as a schematic.
|
||||
|
||||
For example, the [`@angular/material`](https://material.angular.io/guide/schematics) schematic tells the `add` command to install and set up Angular Material and theming, and register new starter components that can be created with `ng generate`.
|
||||
For example, the [`@angular/material`](https://material.angular.dev/guide/schematics) schematic tells the `add` command to install and set up Angular Material and theming, and register new starter components that can be created with `ng generate`.
|
||||
Look at this one as an example and model for your own add schematic.
|
||||
|
||||
Partner and third party libraries also support the Angular CLI with add schematics.
|
||||
|
||||
@@ -108,7 +108,7 @@ A library typically includes *reusable code* that defines components, services,
|
||||
A library is packaged into an npm package for publishing and sharing.
|
||||
This package can also include schematics that provide instructions for generating or transforming code directly in your project, in the same way that the CLI creates a generic new component with `ng generate component`.
|
||||
A schematic that is packaged with a library can, for example, provide the Angular CLI with the information it needs to generate a component that configures and uses a particular feature, or set of features, defined in that library.
|
||||
One example of this is [Angular Material's navigation schematic](https://material.angular.io/guide/schematics#navigation-schematic) which configures the CDK's [BreakpointObserver](https://material.angular.io/cdk/layout/overview#breakpointobserver) and uses it with Material's [MatSideNav](https://material.angular.io/components/sidenav/overview) and [MatToolbar](https://material.angular.io/components/toolbar/overview) components.
|
||||
One example of this is [Angular Material's navigation schematic](https://material.angular.dev/guide/schematics#navigation-schematic) which configures the CDK's [BreakpointObserver](https://material.angular.dev/cdk/layout/overview#breakpointobserver) and uses it with Material's [MatSideNav](https://material.angular.dev/components/sidenav/overview) and [MatToolbar](https://material.angular.dev/components/toolbar/overview) components.
|
||||
|
||||
Create and include the following kinds of schematics:
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ A library must be imported and used in an application.
|
||||
Libraries extend Angular's base features.
|
||||
For example, to add [reactive forms](guide/forms/reactive-forms) to an application, add the library package using `ng add @angular/forms`, then import the `ReactiveFormsModule` from the `@angular/forms` library in your application code.
|
||||
Similarly, adding the [service worker](ecosystem/service-workers) library to an Angular application is one of the steps for turning an application into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps) \(PWA\).
|
||||
[Angular Material](https://material.angular.io) is an example of a large, general-purpose library that provides sophisticated, reusable, and adaptable UI components.
|
||||
[Angular Material](https://material.angular.dev) is an example of a large, general-purpose library that provides sophisticated, reusable, and adaptable UI components.
|
||||
|
||||
Any application developer can use these and other libraries that have been published as npm packages by the Angular team or by third parties.
|
||||
See [Using Published Libraries](tools/libraries/using-libraries).
|
||||
|
||||
@@ -59,7 +59,7 @@ To do this:
|
||||
<docs-code language="typescript">
|
||||
|
||||
import * as host from 'host';
|
||||
const parsedUrl = host.parse('https://angular.io');
|
||||
const parsedUrl = host.parse('https://angular.dev');
|
||||
console.log(parsedUrl.hostname);
|
||||
|
||||
</docs-code>
|
||||
@@ -184,7 +184,7 @@ If you do not add the interface for the script-defined extension, your IDE shows
|
||||
|
||||
[Resources]: resources "Explore Angular Resources | Angular"
|
||||
|
||||
[AngularMaterialMain]: https://material.angular.io "Angular Material | Angular"
|
||||
[AngularMaterialMain]: https://material.angular.dev "Angular Material | Angular"
|
||||
|
||||
[AngularUpdateMain]: https://angular.dev/update-guide "Angular Update Guide | Angular"
|
||||
|
||||
|
||||
@@ -11589,7 +11589,7 @@ it('should load button with exact text', async () => {
|
||||
expect(await button.getText()).toBe('Confirm');
|
||||
});
|
||||
```
|
||||
Component harnesses are especially useful for shared UI widgets. Developers often write tests that depend on private implementation details of widgets, such as DOM structure and CSS classes. Those dependencies make tests brittle and hard to maintain. Harnesses offer an alternative— a supported API that interacts with the widget the same way an end-user does. Widget implementation changes now become less likely to break user tests. For example, [Angular Material](https://material.angular.io/components/categories) provides a test harness for each component in the library.
|
||||
Component harnesses are especially useful for shared UI widgets. Developers often write tests that depend on private implementation details of widgets, such as DOM structure and CSS classes. Those dependencies make tests brittle and hard to maintain. Harnesses offer an alternative— a supported API that interacts with the widget the same way an end-user does. Widget implementation changes now become less likely to break user tests. For example, [Angular Material](https://material.angular.dev/components/categories) provides a test harness for each component in the library.
|
||||
|
||||
Component harnesses support multiple testing environments. You can use the same harness implementation in both unit and end-to-end tests. Test authors only need to learn one API and component authors don't have to maintain separate unit and end-to-end test implementations.
|
||||
|
||||
@@ -11610,7 +11610,7 @@ TIP: This guide assumes you've already read the [component harnesses overview gu
|
||||
|
||||
### CDK Installation
|
||||
|
||||
The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
|
||||
The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
|
||||
|
||||
```shell
|
||||
ng add @angular/cdk
|
||||
@@ -11751,7 +11751,7 @@ While every harness defines an API specific to its corresponding component, they
|
||||
|
||||
Beyond that, the API of any given harness is specific to its corresponding component; refer to the component's documentation to learn how to use a specific harness.
|
||||
|
||||
As an example, the following is a test for a component that uses the [Angular Material slider component harness](https://material.angular.io/components/slider/api#MatSliderHarness):
|
||||
As an example, the following is a test for a component that uses the [Angular Material slider component harness](https://material.angular.dev/components/slider/api#MatSliderHarness):
|
||||
|
||||
```typescript
|
||||
it('should get value of slider thumb', async () => {
|
||||
@@ -11817,7 +11817,7 @@ For components that appear in only one place, such as a page in an application,
|
||||
|
||||
### CDK Installation
|
||||
|
||||
The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
|
||||
The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
|
||||
|
||||
```shell
|
||||
ng add @angular/cdk
|
||||
|
||||
Reference in New Issue
Block a user