Skip to content

Commit 6f7cf1f

Browse files
crisbetocrisbeto
committed
main - 73939a8 feat(material/slide-toggle): add full-width support (#33424)
1 parent 6bbd565 commit 6f7cf1f

19 files changed

Lines changed: 154 additions & 20 deletions

‎docs-content/api-docs/material-slide-toggle.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,20 @@ <h4 id="MatSlideToggle" class="docs-header-link docs-api-h4 docs-api-class-name"
169169

170170

171171

172+
<tr class="docs-api-properties-row">
173+
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">{ transform: booleanAttribute }</span>)
174+
</div><p class="docs-api-property-name">
175+
<code>fullWidth: <code class="docs-api-property-type">boolean</code></code>
176+
</p>
177+
</td>
178+
<td class="docs-api-property-description"><p>Whether the slide toggle should be full width.</p>
179+
</td>
180+
</tr>
181+
182+
183+
184+
185+
172186
<tr class="docs-api-properties-row">
173187
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">{ transform: booleanAttribute }</span>)
174188
</div><p class="docs-api-property-name">

‎docs-content/examples-highlighted/material/slide-toggle/index-ts.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">SlideToggleFormsExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./slide-toggle-forms/slide-toggle-forms-example&#x27;</span>;
33
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">SlideToggleOverviewExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./slide-toggle-overview/slide-toggle-overview-example&#x27;</span>;
44
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">SlideToggleHarnessExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./slide-toggle-harness/slide-toggle-harness-example&#x27;</span>;
5+
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">SlideToggleFullWidthExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./slide-toggle-full-width/slide-toggle-full-width-example&#x27;</span>;

‎docs-content/examples-highlighted/material/slide-toggle/slide-toggle-full-width/slide-toggle-full-width-example-css.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<span class="hljs-selector-class">.example-full-width-container</span> {
2+
<span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
3+
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ccc</span>;
4+
<span class="hljs-attribute">padding</span>: <span class="hljs-number">16px</span>;
5+
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>;
6+
}

‎docs-content/examples-highlighted/material/slide-toggle/slide-toggle-full-width/slide-toggle-full-width-example-html.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-full-width-container&quot;</span>&gt;</span>
2+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-slide-toggle</span> <span class="hljs-attr">fullWidth</span> <span class="hljs-attr">labelPosition</span>=<span class="hljs-string">&quot;before&quot;</span>&gt;</span>Full width slide toggle<span class="hljs-tag">&lt;/<span class="hljs-name">mat-slide-toggle</span>&gt;</span>
3+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-slide-toggle</span> <span class="hljs-attr">fullWidth</span>&gt;</span>Full width slide toggle<span class="hljs-tag">&lt;/<span class="hljs-name">mat-slide-toggle</span>&gt;</span>
4+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

‎docs-content/examples-highlighted/material/slide-toggle/slide-toggle-full-width/slide-toggle-full-width-example-ts.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
2+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatSlideToggle</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/slide-toggle&#x27;</span>;
3+
4+
<span class="hljs-comment">/**
5+
* <span class="hljs-doctag">@title</span> <span class="hljs-variable">Full</span>-width slide toggle
6+
*/</span>
7+
<span class="hljs-meta">@Component</span>({
8+
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;slide-toggle-full-width-example&#x27;</span>,
9+
<span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;slide-toggle-full-width-example.html&#x27;</span>,
10+
<span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;slide-toggle-full-width-example.css&#x27;</span>,
11+
<span class="hljs-attr">imports</span>: [<span class="hljs-title class_">MatSlideToggle</span>],
12+
})
13+
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">SlideToggleFullWidthExample</span> {}

‎docs-content/examples-source/material/slide-toggle/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export {SlideToggleConfigurableExample} from './slide-toggle-configurable/slide-
22
export {SlideToggleFormsExample} from './slide-toggle-forms/slide-toggle-forms-example';
33
export {SlideToggleOverviewExample} from './slide-toggle-overview/slide-toggle-overview-example';
44
export {SlideToggleHarnessExample} from './slide-toggle-harness/slide-toggle-harness-example';
5+
export {SlideToggleFullWidthExample} from './slide-toggle-full-width/slide-toggle-full-width-example';

‎docs-content/examples-source/material/slide-toggle/slide-toggle-full-width/slide-toggle-full-width-example.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.example-full-width-container {
2+
width: 300px;
3+
border: 1px solid #ccc;
4+
padding: 16px;
5+
border-radius: 4px;
6+
}

‎docs-content/examples-source/material/slide-toggle/slide-toggle-full-width/slide-toggle-full-width-example.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="example-full-width-container">
2+
<mat-slide-toggle fullWidth labelPosition="before">Full width slide toggle</mat-slide-toggle>
3+
<mat-slide-toggle fullWidth>Full width slide toggle</mat-slide-toggle>
4+
</div>

‎docs-content/examples-source/material/slide-toggle/slide-toggle-full-width/slide-toggle-full-width-example.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {Component} from '@angular/core';
2+
import {MatSlideToggle} from '@angular/material/slide-toggle';
3+
4+
/**
5+
* @title Full-width slide toggle
6+
*/
7+
@Component({
8+
selector: 'slide-toggle-full-width-example',
9+
templateUrl: 'slide-toggle-full-width-example.html',
10+
styleUrl: 'slide-toggle-full-width-example.css',
11+
imports: [MatSlideToggle],
12+
})
13+
export class SlideToggleFullWidthExample {}

‎docs-content/overviews/material/slide-toggle/slide-toggle.md.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,14 @@ <h3 id="slide-toggle-label" class="docs-header-link">
1212
<a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a> to
1313
specify an appropriate label.</p>
1414

15+
<h3 id="full-width-slide-toggle" class="docs-header-link">
16+
<span header-link="full-width-slide-toggle"></span>
17+
Full-width slide-toggle
18+
</h3>
19+
<p>The <code>fullWidth</code> input can be used to make the slide-toggle stretch to fill its container.
20+
When applied, the slide-toggle will distribute the switch and the label to opposite ends of the
21+
container.</p>
22+
</div><div material-docs-example="slide-toggle-full-width"></div><div class="docs-markdown">
1523
<h3 id="use-with-angularforms" class="docs-header-link">
1624
<span header-link="use-with-angularforms"></span>
1725
Use with <code>@angular/forms</code>

0 commit comments

Comments
 (0)