You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>In order to learn how to build custom form field controls, let's start with a simple input component
7
+
</div><divmaterial-docs-example="form-field-custom-control"></div><divclass="docs-markdown"><p>In order to learn how to build custom form field controls, let's start with a simple input component
10
8
that we want to work inside the form field. For example, a phone number input that segments the
11
9
parts of the number into their own inputs. (Note: this is not intended to be a robust component,
Copy file name to clipboardExpand all lines: docs-content/guides/creating-a-custom-stepper-using-the-cdk-stepper.md.html
-2Lines changed: 0 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,6 @@
1
1
<divclass="docs-markdown"><h1>Creating a custom stepper using the CDK stepper</h1><p>The <ahref="https://material.angular.dev/cdk/stepper/overview">CDK stepper</a> allows you to build a custom stepper which you can completely style yourself without any specific Material Design styling.</p>
2
2
<p>In this guide, we'll learn how to build our own custom stepper using the CDK stepper. Here is what we'll build by the end of this guide:</p>
enable backwards compatibility styles that restore the behavior of this API. Call the
1331
1331
<code>color-variants-backwards-compatibility</code> mixin from <code>@angular/material</code> with the M3 theme you want
1332
1332
to generate color variant styles for.</p>
1333
-
<!-- TODO(mmalerba): Upgrade to embedded example -->
1334
-
1335
-
<pre><codeclass="language-scss"><spanclass="hljs-keyword">@use</span><spanclass="hljs-string">'@angular/material'</span> as mat;
1333
+
<!-- TODO(mmalerba): Upgrade to embedded example --><pre><codeclass="language-scss"><spanclass="hljs-keyword">@use</span><spanclass="hljs-string">'@angular/material'</span> as mat;
<code>typography-hierarchy</code> mixin does support emitting the old class names in addition to the new ones.
1352
1350
We have made a best effort to map the M2 classes to reasonable equivalents in M3. To enable these
1353
1351
styles, pass an additional argument <code>$back-compat: true</code> to the mixin.</p>
1354
-
<!-- TODO(mmalerba): Upgrade to embedded example -->
1355
-
1356
-
<pre><codeclass="language-scss"><spanclass="hljs-keyword">@use</span><spanclass="hljs-string">'@angular/material'</span> as mat;
1352
+
<!-- TODO(mmalerba): Upgrade to embedded example --><pre><codeclass="language-scss"><spanclass="hljs-keyword">@use</span><spanclass="hljs-string">'@angular/material'</span> as mat;
Copy file name to clipboardExpand all lines: docs-content/guides/using-component-harnesses.md.html
+1-3Lines changed: 1 addition & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -8,9 +8,7 @@
8
8
<p>Angular Material offers test harnesses for many of its components. The Angular team strongly
9
9
encourages developers to use these harnesses for testing to avoid creating brittle tests that rely
10
10
on a component's internals.</p>
11
-
<!-- TODO(mmalerba): add list of components that are ready -->
12
-
13
-
<p>This guide discusses the advantages of using component test harnesses and shows how to use them.</p>
11
+
<!-- TODO(mmalerba): add list of components that are ready --><p>This guide discusses the advantages of using component test harnesses and shows how to use them.</p>
<p>It is possible to falsify the <code>FocusOrigin</code> when setting the focus programmatically by using the
178
+
</div><divmaterial-docs-example="focus-monitor-overview"></div><divclass="docs-markdown"><p>It is possible to falsify the <code>FocusOrigin</code> when setting the focus programmatically by using the
181
179
<code>focusVia</code> method of <code>FocusMonitor</code>. This method accepts an element to focus and the <code>FocusOrigin</code>
182
180
to use. If the element being focused is currently being monitored by the <code>FocusMonitor</code> it will
183
181
report the <code>FocusOrigin</code> that was passed in. If the element is not currently being monitored, it
<pre><codeclass="language-scss"><spanclass="hljs-keyword">@import</span><spanclass="hljs-string">'@angular/cdk/overlay-prebuilt.css'</span>;</code></pre><p>Alternatively, you can include the styles using the <code>cdk.overlay</code> mixin in your Sass file. You can import the mixin as follows:</p>
13
13
<pre><codeclass="language-scss"><spanclass="hljs-keyword">@use</span><spanclass="hljs-string">'@angular/cdk'</span> as cdk;
<p>You can open a dialog by calling the <code>open</code> method either with a component or with a <code>TemplateRef</code>
15
+
<spanclass="hljs-keyword">@include</span> cdk.overlay();</code></pre></div><divmaterial-docs-example="cdk-dialog-overview"></div><divclass="docs-markdown"><p>You can open a dialog by calling the <code>open</code> method either with a component or with a <code>TemplateRef</code>
18
16
representing the dialog content. The method additionally accepts an optional configuration object.
19
17
The <code>open</code> method returns a <code>DialogRef</code> instance:</p>
0 commit comments