mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
docs: todo cleanup
PiperOrigin-RevId: 595708369
This commit is contained in:
parent
043bbad6f3
commit
553aaa6695
@ -78,9 +78,9 @@ Choose the type of chip based on its purpose and author.
|
||||
text message replies.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- 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 -->
|
||||
|
||||
```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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- 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 -->
|
||||
|
||||
```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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- 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 -->
|
||||
|
||||
```html
|
||||
@ -234,9 +234,9 @@ use tags or descriptive words to filter content. They can be a good alternative
|
||||
to toggle buttons or checkboxes.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- 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 -->
|
||||
|
||||
```html
|
||||
@ -255,9 +255,9 @@ Filter chips can optionally be removable from the chip set. Removable chips have
|
||||
a trailing remove icon.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- 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 -->
|
||||
|
||||
```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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- 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 -->
|
||||
|
||||
```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`.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- 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 -->
|
||||
|
||||
```html
|
||||
@ -328,9 +328,9 @@ help narrow a user’s intent by presenting dynamically generated suggestions,
|
||||
such as possible responses or search filters.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- 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 -->
|
||||
|
||||
```html
|
||||
@ -363,9 +363,9 @@ Token | Default value
|
||||
### Assist chip example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- TODO: catalog-include "figures/<component>/theming.html" -->
|
||||
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -397,9 +397,9 @@ Token | Default value
|
||||
### Filter chip example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- TODO: catalog-include "figures/<component>/theming.html" -->
|
||||
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -431,9 +431,9 @@ Token | Default value
|
||||
### Input chip example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- TODO: catalog-include "figures/<component>/theming.html" -->
|
||||
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -464,9 +464,9 @@ Token | Default value
|
||||
### Suggestion chip example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- TODO: catalog-include "figures/<component>/theming.html" -->
|
||||
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
@ -78,23 +78,9 @@ action buttons.
|
||||
```
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;"
|
||||
aria-label="">
|
||||
TODO: update figure
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
> Tip: use `margin`, `height`, and `width` CSS properties to control the
|
||||
> dialog's size and position.
|
||||
@ -200,23 +186,9 @@ Token | Default value
|
||||
### Example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;"
|
||||
aria-label="">
|
||||
TODO: update figure
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<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
|
||||
`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.
|
||||
`getCloseAnimation` | | `() => DialogAnimation` | `function { ... }` | Gets the closing animation for a dialog. Set to a new function to customize the animation.
|
||||
|
||||
|
@ -8,8 +8,6 @@ dirname: list
|
||||
|
||||
# Lists
|
||||
|
||||
<!-- TODO: update freshness to current date when copying. -->
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'emarquez' reviewed: '2023-08-09' }
|
||||
@ -360,8 +358,8 @@ Token | Default value
|
||||
--md-list-item-leading-image-shape: 25px;
|
||||
}
|
||||
img {
|
||||
width: 40px;
|
||||
}
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
<md-list>
|
||||
<md-list-item headline="Wide Cat">
|
||||
@ -389,7 +387,7 @@ Token | Default value
|
||||
|
||||
Property | Attribute | Type | Default | Description
|
||||
--- | --- | --- | --- | ---
|
||||
`items` | | `ListItem[]` | `undefined` |
|
||||
`items` | | `ListItem[]` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -425,7 +423,7 @@ Property | Attribute | Type | Default | Description
|
||||
|
||||
Event | Description
|
||||
--- | ---
|
||||
`request-activation` |
|
||||
`request-activation` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
|
@ -72,7 +72,7 @@ Progress indicators may be determinate to show progress, or indeterminate for an
|
||||
unspecified amount of progress.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
@ -112,7 +112,7 @@ Indeterminate progress indicators may cycle between four colors (primary,
|
||||
primary container, tertiary, and tertiary container by default).
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
@ -157,7 +157,7 @@ Circular progress indicators display progress by animating along an invisible
|
||||
circular track in a clockwise direction.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
@ -190,7 +190,7 @@ Linear progress indicators display progress by animating along the length of a
|
||||
fixed, visible track.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
@ -222,7 +222,7 @@ indeterminate progress. The progress bar and track represent known progress
|
||||
while the buffer dots represent unknown progress.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
|
@ -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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;"
|
||||
aria-label="">
|
||||
TODO: update figure
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;"
|
||||
aria-label="">
|
||||
TODO: update figure
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<md-radio id="cats-radio" name="animals" value="cats"></md-radio>
|
||||
@ -175,23 +147,9 @@ Token | Default value
|
||||
### Example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;"
|
||||
aria-label="">
|
||||
TODO: update figure
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -221,10 +179,10 @@ Property | Attribute | Type | Default | Description
|
||||
--- | --- | --- | --- | ---
|
||||
`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.
|
||||
`checked` | `checked` | `boolean` | `undefined` |
|
||||
`name` | | `string` | `undefined` |
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
`checked` | `checked` | `boolean` | `undefined` |
|
||||
`name` | | `string` | `undefined` |
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
|
@ -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.")
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<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 -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
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.")
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<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 -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -228,21 +200,7 @@ Token | Default value
|
||||
![Image of a ripple with a different theme applied](images/ripple/theming.gif "Ripple theming example.")
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<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 -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -275,8 +233,8 @@ Token | Default value
|
||||
Property | Attribute | Type | Default | Description
|
||||
--- | --- | --- | --- | ---
|
||||
`disabled` | `disabled` | `boolean` | `false` | Disables the ripple.
|
||||
`htmlFor` | | `string` | `undefined` |
|
||||
`control` | | `HTMLElement` | `undefined` |
|
||||
`htmlFor` | | `string` | `undefined` |
|
||||
`control` | | `HTMLElement` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -286,8 +244,8 @@ Property | Attribute | Type | Default | Description
|
||||
|
||||
Method | Parameters | Returns | Description
|
||||
--- | --- | --- | ---
|
||||
`attach` | `control` | `void` |
|
||||
`detach` | _None_ | `void` |
|
||||
`attach` | `control` | `void` |
|
||||
`detach` | _None_ | `void` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
|
@ -107,7 +107,7 @@ when either handle is selected.
|
||||
<md-slider labeled></md-slider>
|
||||
```
|
||||
|
||||
<!-- TODO: ## Accessibility -->
|
||||
<!-- TODO(b/318567101): ## Accessibility -->
|
||||
|
||||
## Theming
|
||||
|
||||
@ -186,11 +186,11 @@ Property | Attribute | Type | Default | Description
|
||||
`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.
|
||||
`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` |
|
||||
`nameStart` | | `string` | `undefined` |
|
||||
`nameEnd` | | `string` | `undefined` |
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
`name` | | `string` | `undefined` |
|
||||
`nameStart` | | `string` | `undefined` |
|
||||
`nameEnd` | | `string` | `undefined` |
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
|
@ -62,23 +62,9 @@ of an item on or off.
|
||||
Switches are similar to checkboxes, and can be unselected or selected.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;"
|
||||
aria-label="">
|
||||
TODO: update figure
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;"
|
||||
aria-label="">
|
||||
TODO: update figure
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;"
|
||||
aria-label="">
|
||||
TODO: update figure
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<label>
|
||||
@ -191,23 +149,9 @@ Token | Default value
|
||||
### Example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;"
|
||||
aria-label="">
|
||||
TODO: update figure
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<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.
|
||||
`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`.
|
||||
`name` | | `string` | `undefined` |
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
`validity` | | `ValidityState` | `undefined` |
|
||||
`validationMessage` | | `string` | `undefined` |
|
||||
`willValidate` | | `boolean` | `undefined` |
|
||||
`name` | | `string` | `undefined` |
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
`validity` | | `ValidityState` | `undefined` |
|
||||
`validationMessage` | | `string` | `undefined` |
|
||||
`willValidate` | | `boolean` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
|
@ -71,9 +71,9 @@ Tabs contain multiple primary or secondary tab children. Use the same type of
|
||||
tab in a tab bar.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<md-tabs>
|
||||
@ -120,9 +120,9 @@ Icons communicate the type of content within a tab. Icons should be simple and
|
||||
recognizable.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<md-tabs>
|
||||
@ -140,9 +140,9 @@ recognizable.
|
||||
Tabs may optionally show icons without a label.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<md-tabs>
|
||||
@ -185,9 +185,9 @@ display the main content destinations.
|
||||
Primary tabs can show their icons inline, like secondary tabs.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<md-tabs>
|
||||
@ -210,9 +210,9 @@ Secondary tabs are used within a content area to further separate related
|
||||
content and establish hierarchy.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<md-tabs>
|
||||
@ -347,7 +347,7 @@ Token | Default value
|
||||
### Secondary tab example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- TODO: add image -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
|
||||
```html
|
||||
|
Loading…
Reference in New Issue
Block a user