material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-11 13:46:10 +03:00
Code Issues Projects Releases Wiki Activity

docs: todo cleanup

Browse Source 
PiperOrigin-RevId: 595708369
This commit is contained in:
Elizabeth Mitchell 2024-01-04 08:10:16 -08:00 committed by Copybara-Service
parent 043bbad6f3
commit 553aaa6695
9 changed files with 92 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
docs/components/chip.md
View File

@ -78,9 +78,9 @@ Choose the type of chip based on its purpose and author.
text message replies. text message replies.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html ```html
<md-chip-set> <md-chip-set>
@ -100,9 +100,9 @@ Chips should always appear in a set. Chip sets are
that can display any type of chip or other toolbar items. that can display any type of chip or other toolbar items.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html ```html
<h3>New event</h3> <h3>New event</h3>
@ -119,9 +119,9 @@ All chips may display an optional icon. Input chips can specify if an avatar
picture is displayed. picture is displayed.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" --> <!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end --> <!-- catalog-only-end -->
```html ```html
@ -142,9 +142,9 @@ Assist, filter, and suggestion chips can be elevated if the placement requires
protection, such as on top of an image. protection, such as on top of an image.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" --> <!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end --> <!-- catalog-only-end -->
```html ```html
@ -208,9 +208,9 @@ Assist chips function as though the user asked an assistant to complete the
action. They should appear dynamically and contextually in a UI. action. They should appear dynamically and contextually in a UI.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" --> <!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end --> <!-- catalog-only-end -->
```html ```html
@ -234,9 +234,9 @@ use tags or descriptive words to filter content. They can be a good alternative
to toggle buttons or checkboxes. to toggle buttons or checkboxes.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" --> <!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end --> <!-- catalog-only-end -->
```html ```html
@ -255,9 +255,9 @@ Filter chips can optionally be removable from the chip set. Removable chips have
a trailing remove icon. a trailing remove icon.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" --> <!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end --> <!-- catalog-only-end -->
```html ```html
@ -282,9 +282,9 @@ Input chips whose icons are user images may add the `avatar` attribute to
display the image in a larger circle. display the image in a larger circle.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" --> <!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end --> <!-- catalog-only-end -->
```html ```html
@ -306,9 +306,9 @@ All input chips are removable. If an input chip does not have an action
associated with clicking on it, it may be marked as `remove-only`. associated with clicking on it, it may be marked as `remove-only`.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" --> <!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end --> <!-- catalog-only-end -->
```html ```html
@ -328,9 +328,9 @@ help narrow a user’s intent by presenting dynamically generated suggestions,
such as possible responses or search filters. such as possible responses or search filters.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" --> <!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end --> <!-- catalog-only-end -->
```html ```html
@ -363,9 +363,9 @@ Token | Default value
### Assist chip example ### Assist chip example
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/theming.html" --> <!-- Need to add catalog-include "figures/<component>/theming.html" -->
```html ```html
<style> <style>
@ -397,9 +397,9 @@ Token | Default value
### Filter chip example ### Filter chip example
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/theming.html" --> <!-- Need to add catalog-include "figures/<component>/theming.html" -->
```html ```html
<style> <style>
@ -431,9 +431,9 @@ Token | Default value
### Input chip example ### Input chip example
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/theming.html" --> <!-- Need to add catalog-include "figures/<component>/theming.html" -->
```html ```html
<style> <style>
@ -464,9 +464,9 @@ Token | Default value
### Suggestion chip example ### Suggestion chip example
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/theming.html" --> <!-- Need to add catalog-include "figures/<component>/theming.html" -->
```html ```html
<style> <style>

38
docs/components/dialog.md
View File

@ -78,23 +78,9 @@ action buttons.
``` ```
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
> Tip: use `margin`, `height`, and `width` CSS properties to control the > Tip: use `margin`, `height`, and `width` CSS properties to control the
> dialog's size and position. > dialog's size and position.
@ -200,23 +186,9 @@ Token | Default value
### Example ### Example
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
```html ```html
<style> <style>
@ -254,7 +226,7 @@ Property | Attribute | Type | Default | Description
--- | --- | --- | --- | --- --- | --- | --- | --- | ---
`returnValue` | | `string` | `''` | Gets or sets the dialog's return value, usually to indicate which button a user pressed to close it.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue `returnValue` | | `string` | `''` | Gets or sets the dialog's return value, usually to indicate which button a user pressed to close it.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
`type` | `type` | `string` | `undefined` | The type of dialog for accessibility. Set this to `alert` to announce a dialog as an alert dialog. `type` | `type` | `string` | `undefined` | The type of dialog for accessibility. Set this to `alert` to announce a dialog as an alert dialog.
`open` | `open` | `boolean` | `undefined` | `open` | `open` | `boolean` | `undefined` |
`getOpenAnimation` | | `() => DialogAnimation` | `function { ... }` | Gets the opening animation for a dialog. Set to a new function to customize the animation. `getOpenAnimation` | | `() => DialogAnimation` | `function { ... }` | Gets the opening animation for a dialog. Set to a new function to customize the animation.
`getCloseAnimation` | | `() => DialogAnimation` | `function { ... }` | Gets the closing animation for a dialog. Set to a new function to customize the animation. `getCloseAnimation` | | `() => DialogAnimation` | `function { ... }` | Gets the closing animation for a dialog. Set to a new function to customize the animation.

10
docs/components/list.md
View File

@ -8,8 +8,6 @@ dirname: list
# Lists # Lists
<!-- TODO: update freshness to current date when copying. -->
<!--* <!--*
# Document freshness: For more information, see go/fresh-source. # Document freshness: For more information, see go/fresh-source.
freshness: { owner: 'emarquez' reviewed: '2023-08-09' } freshness: { owner: 'emarquez' reviewed: '2023-08-09' }
@ -360,8 +358,8 @@ Token | Default value
--md-list-item-leading-image-shape: 25px; --md-list-item-leading-image-shape: 25px;
} }
img { img {
width: 40px; width: 40px;
} }
</style> </style>
<md-list> <md-list>
<md-list-item headline="Wide Cat"> <md-list-item headline="Wide Cat">
@ -389,7 +387,7 @@ Token | Default value
Property | Attribute | Type | Default | Description Property | Attribute | Type | Default | Description
--- | --- | --- | --- | --- --- | --- | --- | --- | ---
`items` | | `ListItem[]` | `undefined` | `items` | | `ListItem[]` | `undefined` |
<!-- mdformat on(autogenerated might break rendering in catalog) --> <!-- mdformat on(autogenerated might break rendering in catalog) -->
@ -425,7 +423,7 @@ Property | Attribute | Type | Default | Description
Event | Description Event | Description
--- | --- --- | ---
`request-activation` | `request-activation` |
<!-- mdformat on(autogenerated might break rendering in catalog) --> <!-- mdformat on(autogenerated might break rendering in catalog) -->

10
docs/components/progress.md
View File

@ -72,7 +72,7 @@ Progress indicators may be determinate to show progress, or indeterminate for an
unspecified amount of progress. unspecified amount of progress.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- catalog-only-start -->
@ -112,7 +112,7 @@ Indeterminate progress indicators may cycle between four colors (primary,
primary container, tertiary, and tertiary container by default). primary container, tertiary, and tertiary container by default).
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- catalog-only-start -->
@ -157,7 +157,7 @@ Circular progress indicators display progress by animating along an invisible
circular track in a clockwise direction. circular track in a clockwise direction.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- catalog-only-start -->
@ -190,7 +190,7 @@ Linear progress indicators display progress by animating along the length of a
fixed, visible track. fixed, visible track.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- catalog-only-start -->
@ -222,7 +222,7 @@ indeterminate progress. The progress bar and track represent known progress
while the buffer dots represent unknown progress. while the buffer dots represent unknown progress.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- catalog-only-start -->

62
docs/components/radio.md
View File

@ -65,23 +65,9 @@ Radios can be pre-selected by adding a `checked` attribute.
Add a `value` to identify which radio is selected in a form. Add a `value` to identify which radio is selected in a form.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
```html ```html
<form> <form>
@ -96,23 +82,9 @@ Add a `value` to identify which radio is selected in a form.
Associate a label with a radio using the `<label>` element. Associate a label with a radio using the `<label>` element.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
```html ```html
<md-radio id="cats-radio" name="animals" value="cats"></md-radio> <md-radio id="cats-radio" name="animals" value="cats"></md-radio>
@ -175,23 +147,9 @@ Token | Default value
### Example ### Example
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
```html ```html
<style> <style>
@ -221,10 +179,10 @@ Property | Attribute | Type | Default | Description
--- | --- | --- | --- | --- --- | --- | --- | --- | ---
`disabled` | `disabled` | `boolean` | `false` | Whether or not the radio is disabled. `disabled` | `disabled` | `boolean` | `false` | Whether or not the radio is disabled.
`value` | `value` | `string` | `'on'` | The element value to use in form submission when checked. `value` | `value` | `string` | `'on'` | The element value to use in form submission when checked.
`checked` | `checked` | `boolean` | `undefined` | `checked` | `checked` | `boolean` | `undefined` |
`name` | | `string` | `undefined` | `name` | | `string` | `undefined` |
`form` | | `HTMLFormElement` | `undefined` | `form` | | `HTMLFormElement` | `undefined` |
`labels` | | `NodeList` | `undefined` | `labels` | | `NodeList` | `undefined` |
<!-- mdformat on(autogenerated might break rendering in catalog) --> <!-- mdformat on(autogenerated might break rendering in catalog) -->

56
docs/components/ripple.md
View File

@ -70,21 +70,7 @@ a control in one of three ways.
![A container that displays a bounded ripple on interaction.](images/ripple/usage.gif "A bounded ripple.") ![A container that displays a bounded ripple on interaction.](images/ripple/usage.gif "A bounded ripple.")
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
<!--
<div class="figure-wrapper">
<figure
title="A bounded ripple."
aria-label="A container that displays a bounded ripple on interaction.">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
1. Attached to the parent element 1. Attached to the parent element
@ -159,21 +145,7 @@ md-ripple.unbounded {
![A circular container with an inner circle that displays an unbounded ripple around it on interaction.](images/ripple/usage-unbounded.gif "An unbounded ripple.") ![A circular container with an inner circle that displays an unbounded ripple around it on interaction.](images/ripple/usage-unbounded.gif "An unbounded ripple.")
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
<!--
<div class="figure-wrapper">
<figure
title="An unbounded ripple."
aria-label="A circular container with an inner circle that displays an unbounded ripple around it on interaction.">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
```html ```html
<style> <style>
@ -228,21 +200,7 @@ Token | Default value
![Image of a ripple with a different theme applied](images/ripple/theming.gif "Ripple theming example.") ![Image of a ripple with a different theme applied](images/ripple/theming.gif "Ripple theming example.")
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
<!--
<div class="figure-wrapper">
<figure
class="styled-example"
title="Ripple theming example."
aria-label="Image of a ripple with a different theme applied">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
```html ```html
<style> <style>
@ -275,8 +233,8 @@ Token | Default value
Property | Attribute | Type | Default | Description Property | Attribute | Type | Default | Description
--- | --- | --- | --- | --- --- | --- | --- | --- | ---
`disabled` | `disabled` | `boolean` | `false` | Disables the ripple. `disabled` | `disabled` | `boolean` | `false` | Disables the ripple.
`htmlFor` | | `string` | `undefined` | `htmlFor` | | `string` | `undefined` |
`control` | | `HTMLElement` | `undefined` | `control` | | `HTMLElement` | `undefined` |
<!-- mdformat on(autogenerated might break rendering in catalog) --> <!-- mdformat on(autogenerated might break rendering in catalog) -->
@ -286,8 +244,8 @@ Property | Attribute | Type | Default | Description
Method | Parameters | Returns | Description Method | Parameters | Returns | Description
--- | --- | --- | --- --- | --- | --- | ---
`attach` | `control` | `void` | `attach` | `control` | `void` |
`detach` | _None_ | `void` | `detach` | _None_ | `void` |
<!-- mdformat on(autogenerated might break rendering in catalog) --> <!-- mdformat on(autogenerated might break rendering in catalog) -->

12
docs/components/slider.md
View File

@ -107,7 +107,7 @@ when either handle is selected.
<md-slider labeled></md-slider> <md-slider labeled></md-slider>
``` ```
<!-- TODO: ## Accessibility --> <!-- TODO(b/318567101): ## Accessibility -->
## Theming ## Theming
@ -186,11 +186,11 @@ Property | Attribute | Type | Default | Description
`ticks` | `ticks` | `boolean` | `false` | Whether or not to show tick marks. `ticks` | `ticks` | `boolean` | `false` | Whether or not to show tick marks.
`labeled` | `labeled` | `boolean` | `false` | Whether or not to show a value label when activated. `labeled` | `labeled` | `boolean` | `false` | Whether or not to show a value label when activated.
`range` | `range` | `boolean` | `false` | Whether or not to show a value range. When false, the slider displays a slideable handle for the value property; when true, it displays slideable handles for the valueStart and valueEnd properties. `range` | `range` | `boolean` | `false` | Whether or not to show a value range. When false, the slider displays a slideable handle for the value property; when true, it displays slideable handles for the valueStart and valueEnd properties.
`name` | | `string` | `undefined` | `name` | | `string` | `undefined` |
`nameStart` | | `string` | `undefined` | `nameStart` | | `string` | `undefined` |
`nameEnd` | | `string` | `undefined` | `nameEnd` | | `string` | `undefined` |
`form` | | `HTMLFormElement` | `undefined` | `form` | | `HTMLFormElement` | `undefined` |
`labels` | | `NodeList` | `undefined` | `labels` | | `NodeList` | `undefined` |
<!-- mdformat on(autogenerated might break rendering in catalog) --> <!-- mdformat on(autogenerated might break rendering in catalog) -->

84
docs/components/switch.md
View File

@ -62,23 +62,9 @@ of an item on or off.
Switches are similar to checkboxes, and can be unselected or selected. Switches are similar to checkboxes, and can be unselected or selected.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
```html ```html
<md-switch></md-switch> <md-switch></md-switch>
@ -91,23 +77,9 @@ Icons can be used to visually emphasize the switch's selected state. Switches
can choose to display both icons or only selected icons. can choose to display both icons or only selected icons.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
```html ```html
<md-switch icons></md-switch> <md-switch icons></md-switch>
@ -122,23 +94,9 @@ can choose to display both icons or only selected icons.
Associate a label with a switch using the `<label>` element. Associate a label with a switch using the `<label>` element.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
```html ```html
<label> <label>
@ -191,23 +149,9 @@ Token | Default value
### Example ### Example
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- catalog-only-start --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
```html ```html
<style> <style>
@ -247,12 +191,12 @@ Property | Attribute | Type | Default | Description
`showOnlySelectedIcon` | `show-only-selected-icon` | `boolean` | `false` | Shows only the selected icon, and not the deselected icon. If `true`, overrides the behavior of the `icons` property. `showOnlySelectedIcon` | `show-only-selected-icon` | `boolean` | `false` | Shows only the selected icon, and not the deselected icon. If `true`, overrides the behavior of the `icons` property.
`required` | `required` | `boolean` | `false` | When true, require the switch to be selected when participating in form submission.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation `required` | `required` | `boolean` | `false` | When true, require the switch to be selected when participating in form submission.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
`value` | `value` | `string` | `'on'` | The value associated with this switch on form submission. `null` is submitted when `selected` is `false`. `value` | `value` | `string` | `'on'` | The value associated with this switch on form submission. `null` is submitted when `selected` is `false`.
`name` | | `string` | `undefined` | `name` | | `string` | `undefined` |
`form` | | `HTMLFormElement` | `undefined` | `form` | | `HTMLFormElement` | `undefined` |
`labels` | | `NodeList` | `undefined` | `labels` | | `NodeList` | `undefined` |
`validity` | | `ValidityState` | `undefined` | `validity` | | `ValidityState` | `undefined` |
`validationMessage` | | `string` | `undefined` | `validationMessage` | | `string` | `undefined` |
`willValidate` | | `boolean` | `undefined` | `willValidate` | | `boolean` | `undefined` |
<!-- mdformat on(autogenerated might break rendering in catalog) --> <!-- mdformat on(autogenerated might break rendering in catalog) -->

26
docs/components/tabs.md
View File

@ -71,9 +71,9 @@ Tabs contain multiple primary or secondary tab children. Use the same type of
tab in a tab bar. tab in a tab bar.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html ```html
<md-tabs> <md-tabs>
@ -120,9 +120,9 @@ Icons communicate the type of content within a tab. Icons should be simple and
recognizable. recognizable.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html ```html
<md-tabs> <md-tabs>
@ -140,9 +140,9 @@ recognizable.
Tabs may optionally show icons without a label. Tabs may optionally show icons without a label.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html ```html
<md-tabs> <md-tabs>
@ -163,9 +163,9 @@ Primary tabs are placed at the top of the content pane under a top app bar. They
display the main content destinations. display the main content destinations.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html ```html
<md-tabs> <md-tabs>
@ -185,9 +185,9 @@ display the main content destinations.
Primary tabs can show their icons inline, like secondary tabs. Primary tabs can show their icons inline, like secondary tabs.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html ```html
<md-tabs> <md-tabs>
@ -210,9 +210,9 @@ Secondary tabs are used within a content area to further separate related
content and establish hierarchy. content and establish hierarchy.
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" --> <!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html ```html
<md-tabs> <md-tabs>
@ -347,7 +347,7 @@ Token | Default value
### Secondary tab example ### Secondary tab example
<!-- no-catalog-start --> <!-- no-catalog-start -->
<!-- TODO: add image --> <!-- Need to add image -->
<!-- no-catalog-end --> <!-- no-catalog-end -->
```html ```html