New version. Add Material UI implementation with theme customization, about dialog, and news system
45
README.md
Normal file
|
@ -0,0 +1,45 @@
|
|||
# MNotes
|
||||
|
||||
A modern Markdown note-taking application with Material Design 3 styling. MNotes allows you to create, edit, and organize your notes with a clean and intuitive interface.
|
||||
|
||||
## Features
|
||||
|
||||
- **Markdown Support**: Write notes using Markdown syntax with real-time preview
|
||||
- **Material Design 3**: Beautiful and responsive UI following Material Design principles
|
||||
- **Theme Customization**: Choose between light, dark, and sepia themes with customizable primary colors
|
||||
- **GitHub Integration**: Save your notes directly to GitHub repositories
|
||||
- **Local Storage**: Notes are automatically saved to your browser's local storage
|
||||
- **Search Functionality**: Quickly find notes using the built-in search
|
||||
- **Keyboard Shortcuts**: Boost your productivity with keyboard shortcuts
|
||||
- **Auto-save**: Never lose your work with automatic saving
|
||||
- **Export**: Download your notes as Markdown files
|
||||
|
||||
## Getting Started
|
||||
|
||||
Simply open the `index.html` file in your web browser to start using MNotes. No installation or server required!
|
||||
|
||||
## Keyboard Shortcuts
|
||||
|
||||
- `Ctrl+S` / `Cmd+S`: Save current note
|
||||
- `Ctrl+P` / `Cmd+P`: Toggle markdown preview
|
||||
- `Ctrl+B` / `Cmd+B`: Bold text
|
||||
- `Ctrl+I` / `Cmd+I`: Italic text
|
||||
|
||||
## Technology
|
||||
|
||||
MNotes is built using pure HTML, CSS, and JavaScript, with no framework dependencies. It utilizes the Material Web Components library for UI elements.
|
||||
|
||||
## Credits
|
||||
|
||||
- **Jakub Ruzicka / korozelife** ([@thejakubruzicka](https://github.com/thejakubruzicka)) - Main idea
|
||||
- **mxnticek** ([@VlastikYoutubeKo](https://github.com/VlastikYoutubeKo)) - Adding some features
|
||||
- **Gemini AI** (Google AI) - Rough example of the app
|
||||
- **Claude AI** - Finishing touches of the app
|
||||
|
||||
## License
|
||||
|
||||
This project is open source and available under the MIT License.
|
||||
|
||||
## Version
|
||||
|
||||
Current version: 1.0.0
|
834
components-wiki/button.md
Normal file
|
@ -0,0 +1,834 @@
|
|||
<!-- catalog-only-start --><!-- ---
|
||||
name: Buttons
|
||||
dirname: button
|
||||
-----><!-- catalog-only-end -->
|
||||
|
||||
<catalog-component-header>
|
||||
<catalog-component-header-title slot="title">
|
||||
|
||||
# Buttons
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
|
||||
tag: 'docType:reference'
|
||||
*-->
|
||||
|
||||
<!-- go/md-button -->
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
<!-- external-only-start -->
|
||||
**This documentation is fully rendered on the
|
||||
[Material Web catalog](https://material-web.dev/components/button/).**
|
||||
<!-- external-only-end -->
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
|
||||
[Buttons](https://m3.material.io/components/buttons)<!-- {.external} --> help people
|
||||
initiate actions, from sending an email, to sharing a document, to liking a
|
||||
post.
|
||||
|
||||
There are five types of common buttons: elevated, filled, filled tonal,
|
||||
outlined, and text.
|
||||
|
||||
</catalog-component-header-title>
|
||||
|
||||
<img
|
||||
class="hero"
|
||||
alt="A phone showing a payment screen with a green filled button that says 'Make
|
||||
payment'"
|
||||
title="There are 5 types of common buttons"
|
||||
src="images/button/hero.webp">
|
||||
|
||||
</catalog-component-header>
|
||||
|
||||
* [Design article](https://m3.material.io/components/buttons) <!-- {.external} -->
|
||||
* [API Documentation](#api)
|
||||
* [Source code](https://github.com/material-components/material-web/tree/main/button)
|
||||
<!-- {.external} -->
|
||||
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
## Interactive Demo
|
||||
|
||||
{% playgroundexample dirname=dirname %}
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
## Types
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="types-image"
|
||||
style="justify-content:center;"
|
||||
title="Elevated, filled, filled tonal, outlined, and text buttons"
|
||||
aria-label="The 5 types of common buttons">
|
||||
<style>
|
||||
.types-image .wrapper,
|
||||
.types-image .wrapper > * {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.types-image .wrapper > * {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
.types-image span {
|
||||
display: inline-flex;
|
||||
background-color: var(--md-sys-color-inverse-surface);
|
||||
color: var(--md-sys-color-inverse-on-surface);
|
||||
padding: 8px;
|
||||
margin-block-start: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<md-elevated-button has-icon>
|
||||
<md-icon slot="icon">add</md-icon>
|
||||
Elevated
|
||||
</md-elevated-button>
|
||||
<span>1</span>
|
||||
</div>
|
||||
<div>
|
||||
<md-filled-button>Filled</md-filled-button>
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div>
|
||||
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||
<span>3</span>
|
||||
</div>
|
||||
<div>
|
||||
<md-outlined-button>Outlined</md-outlined-button>
|
||||
<span>4</span>
|
||||
</div>
|
||||
<div>
|
||||
<md-text-button>Text</md-text-button>
|
||||
<span>5</span>
|
||||
</div>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
1. [Elevated button](#elevated-button)
|
||||
1. [Filled button](#filled-button)
|
||||
1. [Filled tonal button](#filled-tonal-button)
|
||||
1. [Outlined button](#outlined-button)
|
||||
1. [Text button](#text-button)
|
||||
|
||||
## Usage
|
||||
|
||||
Buttons have label text that describes the action that will occur if a user taps
|
||||
a button.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;gap: 8px;"
|
||||
title="Outlined and filled buttons."
|
||||
aria-label="An outlined button with the text 'Back' next to a filled button with the text 'Complete'">
|
||||
<md-outlined-button>Back</md-outlined-button>
|
||||
<md-filled-button>Complete</md-filled-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-outlined-button>Back</md-outlined-button>
|
||||
<md-filled-button>Complete</md-filled-button>
|
||||
```
|
||||
|
||||
### Icon
|
||||
|
||||
An icon may optionally be added to a button to help communicate the button's
|
||||
action and help draw attention.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;gap: 8px;"
|
||||
title="Outlined and filled buttons."
|
||||
aria-label="An outlined button with the text 'Back' next to a filled button with the text 'Complete'">
|
||||
<md-filled-tonal-button>
|
||||
Send
|
||||
<svg slot="icon" viewBox="0 0 48 48"><path d="M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z"/></svg>
|
||||
</md-filled-tonal-button>
|
||||
|
||||
<md-text-button trailing-icon>
|
||||
Open
|
||||
<svg slot="icon" viewBox="0 0 48 48"><path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z"/></svg>
|
||||
</md-text-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-filled-tonal-button>
|
||||
Send
|
||||
<svg slot="icon" viewBox="0 0 48 48"><path d="M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z"/></svg>
|
||||
</md-filled-tonal-button>
|
||||
|
||||
<md-text-button trailing-icon>
|
||||
Open
|
||||
<svg slot="icon" viewBox="0 0 48 48"><path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z"/></svg>
|
||||
</md-text-button>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Add an
|
||||
[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
|
||||
attribute to buttons whose labels need a more descriptive label.
|
||||
|
||||
```html
|
||||
<md-elevated-button aria-label="Add a new contact">Add</md-elevated-button>
|
||||
```
|
||||
|
||||
### Focusable and disabled
|
||||
|
||||
By default, disabled buttons are not focusable with the keyboard, while
|
||||
"soft-disabled" buttons are. Some use cases encourage focusability of disabled
|
||||
toolbar items to increase their discoverability.
|
||||
|
||||
See the
|
||||
[ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls)<!-- {.external} -->
|
||||
for guidance on when this is recommended.
|
||||
|
||||
```html
|
||||
<div role="toolbar">
|
||||
<md-text-button>Copy</md-text-button>
|
||||
<md-text-button>Cut</md-text-button>
|
||||
<!--
|
||||
This button is disabled but kept focusable to improve its discoverability
|
||||
in the toolbar.
|
||||
-->
|
||||
<md-text-button soft-disabled>Paste</md-text-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Elevated button
|
||||
|
||||
<!-- go/md-elevated-button -->
|
||||
|
||||
[Elevated buttons](https://m3.material.io/components/buttons/guidelines#4e89da4d-a8fa-4e20-bb8d-b8a93eff3e3e)<!-- {.external} -->
|
||||
are essentially filled tonal buttons with a shadow. To prevent shadow creep,
|
||||
only use them when absolutely necessary, such as when the button requires visual
|
||||
separation from a patterned background.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
aria-label="An elevated button.">
|
||||
<md-elevated-button>Elevated</md-elevated-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-elevated-button>Elevated</md-elevated-button>
|
||||
```
|
||||
|
||||
## Filled button
|
||||
|
||||
<!-- go/md-filled-button -->
|
||||
|
||||
[Filled buttons](https://m3.material.io/components/buttons/guidelines#9ecffdb3-ef29-47e7-8d5d-f78b404fcafe)<!-- {.external} -->
|
||||
have the most visual impact after the FAB, and should be used for important,
|
||||
final actions that complete a flow, like Save, Join now, or Confirm.
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
aria-label="A filled button.">
|
||||
<md-filled-button>Filled</md-filled-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-filled-button>Filled</md-filled-button>
|
||||
```
|
||||
|
||||
## Filled tonal button
|
||||
|
||||
<!-- go/md-filled-tonal-button -->
|
||||
|
||||
A
|
||||
[filled tonal button](https://m3.material.io/components/buttons/guidelines#07a1577b-aaf5-4824-a698-03526421058b)<!-- {.external} -->
|
||||
is an alternative middle ground between filled and outlined buttons. They're
|
||||
useful in contexts where a lower-priority button requires slightly more emphasis
|
||||
than an outline would give, such as "Next" in an onboarding flow.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
aria-label="A tonal button.">
|
||||
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||
```
|
||||
|
||||
## Outlined button
|
||||
|
||||
<!-- go/md-outlined-button -->
|
||||
|
||||
[Outlined buttons](https://m3.material.io/components/buttons/guidelines#3742b09f-c224-43e0-a83e-541bd29d0f05)<!-- {.external} -->
|
||||
are medium-emphasis buttons. They contain actions that are important, but aren’t
|
||||
the primary action in an app.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
aria-label="An outlined button.">
|
||||
<md-outlined-button>Outlined</md-outlined-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-outlined-button>Outlined</md-outlined-button>
|
||||
```
|
||||
|
||||
## Text button
|
||||
|
||||
<!-- go/md-text-button -->
|
||||
|
||||
[Text buttons](https://m3.material.io/components/buttons/guidelines#c9bcbc0b-ee05-45ad-8e80-e814ae919fbb)<!-- {.external} -->
|
||||
are used for the lowest priority actions, especially when presenting multiple
|
||||
options.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
aria-label="A text button.">
|
||||
<md-text-button>Text</md-text-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-text-button>Text</md-text-button>
|
||||
```
|
||||
|
||||
## Theming
|
||||
|
||||
Button supports [Material theming](../theming/README.md) and can be customized
|
||||
in terms of color, typography, and shape.
|
||||
|
||||
### Elevated button tokens
|
||||
|
||||
Token | Default value
|
||||
--------------------------------------- | -------------------------------------
|
||||
`--md-elevated-button-container-color` | `--md-sys-color-surface`
|
||||
`--md-elevated-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-elevated-button-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-elevated-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-elevated-button.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Elevated button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
class="styled-example"
|
||||
title="Elevated button theming example."
|
||||
aria-label="Image of an elevated button with a different theme applied">
|
||||
<style>
|
||||
.styled-example {
|
||||
background-color: white;
|
||||
--md-elevated-button-container-shape: 0px;
|
||||
--md-elevated-button-label-text-font: system-ui;
|
||||
--md-sys-color-surface-container-low: #FAFDFC;
|
||||
--md-sys-color-primary: #191C1C;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-elevated-button>Elevated</md-elevated-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-elevated-button-container-shape: 0px;
|
||||
--md-elevated-button-label-text-font: system-ui;
|
||||
--md-sys-color-surface-container-low: #FAFDFC;
|
||||
--md-sys-color-primary: #191C1C;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-elevated-button>Elevated</md-elevated-button>
|
||||
```
|
||||
|
||||
### Filled button tokens
|
||||
|
||||
Token | Default value
|
||||
------------------------------------- | -------------------------------------
|
||||
`--md-filled-button-container-color` | `--md-sys-color-primary`
|
||||
`--md-filled-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-filled-button-label-text-color` | `--md-sys-color-on-primary`
|
||||
`--md-filled-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-button.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Filled button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
class="styled-example"
|
||||
title="Filled button theming example."
|
||||
aria-label="Image of a filled button with a different theme applied">
|
||||
<style>
|
||||
.styled-example {
|
||||
background-color: white;
|
||||
--md-filled-button-container-shape: 0px;
|
||||
--md-filled-button-label-text-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
--md-sys-color-on-primary: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-filled-button>Filled</md-filled-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-filled-button-container-shape: 0px;
|
||||
--md-filled-button-label-text-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
--md-sys-color-on-primary: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-filled-button>Filled</md-filled-button>
|
||||
```
|
||||
|
||||
### Filled tonal button tokens
|
||||
|
||||
Token | Default value
|
||||
------------------------------------------- | -------------
|
||||
`--md-filled-tonal-button-container-color` | `--md-sys-color-secondary-container`
|
||||
`--md-filled-tonal-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-filled-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container`
|
||||
`--md-filled-tonal-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-tonal-button.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Filled tonal button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
class="styled-example"
|
||||
title="Tonal button theming example."
|
||||
aria-label="Image of a tonal button with a different theme applied">
|
||||
<style>
|
||||
.styled-example {
|
||||
background-color: white;
|
||||
--md-filled-tonal-button-container-shape: 0px;
|
||||
--md-filled-tonal-button-label-text-font: system-ui;
|
||||
--md-sys-color-secondary-container: #CCE8E7;
|
||||
--md-sys-color-on-secondary-container: #051F1F;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-filled-tonal-button-container-shape: 0px;
|
||||
--md-filled-tonal-button-label-text-font: system-ui;
|
||||
--md-sys-color-secondary-container: #CCE8E7;
|
||||
--md-sys-color-on-secondary-container: #051F1F;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||
```
|
||||
|
||||
### Outlined button tokens
|
||||
|
||||
Token | Default value
|
||||
--------------------------------------- | -------------------------------------
|
||||
`--md-outlined-button-outline-color` | `--md-sys-color-outline`
|
||||
`--md-outlined-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-outlined-button-label-text-color` | `--md-sys-color-primary`
|
||||
`--md-outlined-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-button.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Outlined button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
class="styled-example"
|
||||
title="Outlined button theming example."
|
||||
aria-label="Image of a outlined button with a different theme applied">
|
||||
<style>
|
||||
.styled-example {
|
||||
background-color: white;
|
||||
--md-outlined-button-container-shape: 0px;
|
||||
--md-outlined-button-label-text-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
--md-sys-color-outline: #6F7979;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-outlined-button>Outlined</md-outlined-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-outlined-button-container-shape: 0px;
|
||||
--md-outlined-button-label-text-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
--md-sys-color-outline: #6F7979;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-outlined-button>Outlined</md-outlined-button>
|
||||
```
|
||||
|
||||
### Text button tokens
|
||||
|
||||
Token | Default value
|
||||
----------------------------------- | -------------------------------------
|
||||
`--md-text-button-label-text-color` | `--md-sys-color-primary`
|
||||
`--md-text-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-text-button.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Text button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
class="styled-example"
|
||||
title="Text button theming example."
|
||||
aria-label="Image of a text button with a different theme applied">
|
||||
<style>
|
||||
.styled-example {
|
||||
background-color: white;
|
||||
--md-text-button-label-text-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-text-button>Text</md-text-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-text-button-label-text-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-text-button>Text</md-text-button>
|
||||
```
|
||||
|
||||
<!-- auto-generated API docs start -->
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### MdElevatedButton <code><md-elevated-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
|
||||
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
|
||||
| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
|
||||
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
|
||||
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
|
||||
| `name` | | `string` | `undefined` | |
|
||||
| `form` | | `HTMLFormElement` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdFilledButton <code><md-filled-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
|
||||
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
|
||||
| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
|
||||
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
|
||||
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
|
||||
| `name` | | `string` | `undefined` | |
|
||||
| `form` | | `HTMLFormElement` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdFilledTonalButton <code><md-filled-tonal-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
|
||||
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
|
||||
| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
|
||||
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
|
||||
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
|
||||
| `name` | | `string` | `undefined` | |
|
||||
| `form` | | `HTMLFormElement` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdOutlinedButton <code><md-outlined-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
|
||||
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
|
||||
| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
|
||||
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
|
||||
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
|
||||
| `name` | | `string` | `undefined` | |
|
||||
| `form` | | `HTMLFormElement` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdTextButton <code><md-text-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
|
||||
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
|
||||
| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
|
||||
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
|
||||
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
|
||||
| `name` | | `string` | `undefined` | |
|
||||
| `form` | | `HTMLFormElement` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
<!-- auto-generated API docs end -->
|
210
components-wiki/checkbox.md
Normal file
|
@ -0,0 +1,210 @@
|
|||
<!-- catalog-only-start --><!-- ---
|
||||
name: Checkbox
|
||||
dirname: checkbox
|
||||
-----><!-- catalog-only-end -->
|
||||
|
||||
<catalog-component-header>
|
||||
<catalog-component-header-title slot="title">
|
||||
|
||||
# Checkbox
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: {
|
||||
owner: 'lizmitchell'
|
||||
reviewed: '2025-05-20'
|
||||
}
|
||||
tag: 'docType:reference'
|
||||
*-->
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
<!-- go/md-checkbox -->
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
<!-- external-only-start -->
|
||||
**This documentation is fully rendered on the
|
||||
[Material Web catalog](https://material-web.dev/components/checkbox/).**
|
||||
<!-- external-only-end -->
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
|
||||
[Checkboxes](https://m3.material.io/components/checkbox)<!-- {.external} --> allow users
|
||||
to select one or more items from a set. Checkboxes can turn an option on or off.
|
||||
|
||||
There's one type of checkbox in Material. Use this selection control when the
|
||||
user needs to select one or more options from a list.
|
||||
|
||||
</catalog-component-header-title>
|
||||
|
||||
<img
|
||||
class="hero"
|
||||
src="images/checkbox/hero.webp"
|
||||
alt="A list of burger additions represented with checkboxes"
|
||||
title="Checkboxes in a list of items.">
|
||||
|
||||
</catalog-component-header>
|
||||
|
||||
* [Design article](https://m3.material.io/components/checkbox) <!-- {.external} -->
|
||||
* [API Documentation](#api)
|
||||
* [Source code](https://github.com/material-components/material-web/tree/main/checkbox)
|
||||
<!-- {.external} -->
|
||||
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
## Interactive Demo
|
||||
|
||||
{% playgroundexample dirname=dirname %}
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
## Usage
|
||||
|
||||
Checkboxes may be standalone, pre-checked, or indeterminate.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/checkbox/usage.html" -->
|
||||
|
||||
```html
|
||||
<md-checkbox touch-target="wrapper"></md-checkbox>
|
||||
<md-checkbox touch-target="wrapper" checked></md-checkbox>
|
||||
<md-checkbox touch-target="wrapper" indeterminate></md-checkbox>
|
||||
```
|
||||
|
||||
### Label
|
||||
|
||||
Associate a label with a checkbox using the `<label>` element.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/checkbox/usage-label.html" -->
|
||||
|
||||
```html
|
||||
<label>
|
||||
<md-checkbox touch-target="wrapper"></md-checkbox>
|
||||
Checkbox one
|
||||
</label>
|
||||
|
||||
<md-checkbox id="checkbox-two" touch-target="wrapper"></md-checkbox>
|
||||
<label for="checkbox-two">Checkbox two</label>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Add an
|
||||
[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
|
||||
attribute to checkboxes without labels or checkboxes whose labels need to be
|
||||
more descriptive.
|
||||
|
||||
```html
|
||||
<md-checkbox aria-label="Select all checkboxes"></md-checkbox>
|
||||
|
||||
<label>
|
||||
<md-checkbox aria-label="Agree to terms and conditions"></md-checkbox>
|
||||
Agree
|
||||
</label>
|
||||
```
|
||||
|
||||
> Note: checkboxes are not automatically labelled by `<label>` elements and
|
||||
> always need an `aria-label`. See b/294081528.
|
||||
|
||||
## Theming
|
||||
|
||||
Checkbox supports [Material theming](../theming/README.md) and can be customized
|
||||
in terms of color and shape.
|
||||
|
||||
### Tokens
|
||||
|
||||
Token | Default value
|
||||
---------------------------------------- | -----------------------------------
|
||||
`--md-checkbox-outline-color` | `--md-sys-color-on-surface-variant`
|
||||
`--md-checkbox-selected-container-color` | `--md-sys-color-primary`
|
||||
`--md-checkbox-selected-icon-color` | `--md-sys-color-on-primary`
|
||||
`--md-checkbox-container-shape` | `2px`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-checkbox.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/checkbox/theming.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
/* System tokens */
|
||||
--md-sys-color-primary: #006a6a;
|
||||
--md-sys-color-on-primary: #ffffff;
|
||||
--md-sys-color-on-surface-variant: #3f4948;
|
||||
|
||||
/* Component tokens */
|
||||
--md-checkbox-container-shape: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-checkbox touch-target="wrapper"></md-checkbox>
|
||||
<md-checkbox touch-target="wrapper" checked></md-checkbox>
|
||||
```
|
||||
|
||||
<!-- auto-generated API docs start -->
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### MdCheckbox <code><md-checkbox></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `checked` | `checked` | `boolean` | `false` | Whether or not the checkbox is selected. |
|
||||
| `indeterminate` | `indeterminate` | `boolean` | `false` | Whether or not the checkbox is indeterminate.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes |
|
||||
| `required` | `required` | `boolean` | `false` | When true, require the checkbox 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 of the checkbox that is submitted with a form when selected.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value |
|
||||
| `disabled` | | `boolean` | `undefined` | |
|
||||
| `name` | | `string` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Methods
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Method | Parameters | Returns | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `formResetCallback` | _None_ | `void` | |
|
||||
| `formStateRestoreCallback` | `state` | `void` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Events
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `change` | `Event` | Yes | No | The native `change` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) |
|
||||
| `input` | `InputEvent` | Yes | Yes | The native `input` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
<!-- auto-generated API docs end -->
|
626
components-wiki/chip.md
Normal file
|
@ -0,0 +1,626 @@
|
|||
<!-- catalog-only-start --><!-- ---
|
||||
name: Chips
|
||||
dirname: chips
|
||||
-----><!-- catalog-only-end -->
|
||||
|
||||
<catalog-component-header image-align="start">
|
||||
<catalog-component-header-title slot="title">
|
||||
|
||||
# Chips
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
|
||||
tag: 'docType:reference'
|
||||
*-->
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
<!-- go/md-chips -->
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
<!-- external-only-start -->
|
||||
**This documentation is fully rendered on the
|
||||
[Material Web catalog](https://material-web.dev/components/chip/)**
|
||||
<!-- external-only-end -->
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
|
||||
[Chips](https://m3.material.io/components/chips)<!-- {.external} --> help people enter
|
||||
information, make selections, filter content, or trigger actions.
|
||||
|
||||
While buttons are expected to appear consistently and with familiar calls to
|
||||
action, chips should appear dynamically as a group of multiple interactive
|
||||
elements.
|
||||
|
||||
</catalog-component-header-title>
|
||||
|
||||
<img class="hero" src="images/chips/hero.webp" alt="Two collections of filter chips, with some options selected and some unselected."
|
||||
title="Filter chips">
|
||||
|
||||
</catalog-component-header>
|
||||
|
||||
* [Design article](https://m3.material.io/components/chips) <!-- {.external} -->
|
||||
* [API Documentation](#api)
|
||||
* [Source code](https://github.com/material-components/material-web/tree/main/chips)
|
||||
<!-- {.external} -->
|
||||
|
||||
## Types
|
||||
|
||||
1. [Assist chip](#assist-chip)
|
||||
1. [Filter chip](#filter-chip)
|
||||
1. [Input chip](#input-chip)
|
||||
1. [Suggestion chip](#suggestion-chip)
|
||||
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
## Interactive Demo
|
||||
|
||||
{% playgroundexample dirname=dirname %}
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
## Usage
|
||||
|
||||
Choose the type of chip based on its purpose and author.
|
||||
|
||||
- **Assist** chips are common actions, such as adding an event to a calendar.
|
||||
- **Filter** chips are tags used to filter content, such as shopping
|
||||
categories.
|
||||
- **Input** chips are pieces of information entered by a user, such as event
|
||||
attendees.
|
||||
- **Suggestion** chips represent dynamic suggestions for user input, such as
|
||||
text message replies.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<md-chip-set>
|
||||
<md-assist-chip label="Assist"></md-assist-chip>
|
||||
<md-filter-chip label="Filter"></md-filter-chip>
|
||||
<md-input-chip label="Input"></md-input-chip>
|
||||
<md-suggestion-chip label="Suggestion"></md-suggestion-chip>
|
||||
</md-chip-set>
|
||||
```
|
||||
|
||||
### Chip sets
|
||||
|
||||
<!-- go/md-chip-set -->
|
||||
|
||||
Chips should always appear in a set. Chip sets are
|
||||
[toolbars](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role)<!-- {.external} -->
|
||||
that can display any type of chip or other toolbar items.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<h3>New event</h3>
|
||||
<md-chip-set>
|
||||
<md-filter-chip label="All day"></md-filter-chip>
|
||||
<md-assist-chip label="Add to calendar"></md-assist-chip>
|
||||
<md-assist-chip label="Set a reminder"></md-assist-chip>
|
||||
</md-chip-set>
|
||||
```
|
||||
|
||||
### Icons
|
||||
|
||||
All chips may display an optional icon. Input chips can specify if an avatar
|
||||
picture is displayed.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-chip-set>
|
||||
<md-assist-chip label="Add to calendar">
|
||||
<md-icon slot="icon">event</md-icon>
|
||||
</md-assist-chip>
|
||||
|
||||
<md-input-chip label="Ping Qiang" avatar>
|
||||
<img slot="icon" src="...">
|
||||
</md-input-chip>
|
||||
</md-chip-set>
|
||||
```
|
||||
|
||||
### Elevated
|
||||
|
||||
Assist, filter, and suggestion chips can be elevated if the placement requires
|
||||
protection, such as on top of an image.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<div>
|
||||
<img src="...">
|
||||
<md-chip-set>
|
||||
<md-suggestion-chip label="Share" elevated></md-suggestion-chip>
|
||||
<md-suggestion-chip label="Favorite" elevated></md-suggestion-chip>
|
||||
</md-chip-set>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Add an
|
||||
[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
|
||||
attribute to chip sets or reference a label with
|
||||
[`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)<!-- {.external} -->.
|
||||
Add an `aria-label` to chips whose labels need to be more descriptive.
|
||||
|
||||
```html
|
||||
<h3 id="dates-label">Dates</h3>
|
||||
<md-chip-set aria-labelledby="dates-label">
|
||||
<md-filter-chip label="Mon" aria-label="Monday"></md-filter-chip>
|
||||
<md-filter-chip label="Tue" aria-label="Tuesday"></md-filter-chip>
|
||||
<md-filter-chip label="Wed" aria-label="Wednesday"></md-filter-chip>
|
||||
</md-chip-set>
|
||||
```
|
||||
|
||||
### Focusable and disabled
|
||||
|
||||
By default, disabled chips are not focusable with the keyboard, while
|
||||
"soft-disabled" chips are. Some use cases encourage focusability of disabled
|
||||
toolbar items to increase their discoverability.
|
||||
|
||||
See the
|
||||
[ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls)<!-- {.external} -->
|
||||
for guidance on when this is recommended.
|
||||
|
||||
```html
|
||||
<md-chip-set aria-label="Actions">
|
||||
<!--
|
||||
Disabled until text is selected. Since both are disabled by default, keep
|
||||
them focusable so that screen readers can discover the actions available.
|
||||
-->
|
||||
<md-assist-chip label="Copy" soft-disabled></md-assist-chip>
|
||||
<md-assist-chip label="Paste" soft-disabled></md-assist-chip>
|
||||
</md-chip-set>
|
||||
<md-outlined-text-field type="textarea"></md-outlined-text-field>
|
||||
```
|
||||
|
||||
## Assist chip
|
||||
|
||||
<!-- go/md-assist-chip -->
|
||||
|
||||
[Assist chips](https://m3.material.io/components/chips/guidelines#5dd1928c-1476-4029-bdc5-fde66fc0dcb1)<!-- {.external} -->
|
||||
represent smart or automated actions that can span multiple apps, such as
|
||||
opening a calendar event from the home screen.
|
||||
|
||||
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 -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<h3>A restaraunt location</h3>
|
||||
<md-chip-set>
|
||||
<md-assist-chip label="Add to my itinerary">
|
||||
<md-icon slot="icon">calendar</md-icon>
|
||||
</md-assist-chip>
|
||||
<md-assist-chip label="12 mins from hotel">
|
||||
<md-icon slot="icon">map</md-icon>
|
||||
</md-assist-chip>
|
||||
</md-chip-set>
|
||||
```
|
||||
|
||||
## Filter chip
|
||||
|
||||
<!-- go/md-filter-chip -->
|
||||
|
||||
[Filter chips](https://m3.material.io/components/chips/guidelines#8d453d50-8d8e-43aa-9ae3-87ed134d2e64)<!-- {.external} -->
|
||||
use tags or descriptive words to filter content. They can be a good alternative
|
||||
to toggle buttons or checkboxes.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<h3>Choose where to share</h3>
|
||||
<md-chip-set>
|
||||
<md-filter-chip label="Docs"></md-filter-chip>
|
||||
<md-filter-chip label="Slides" selected></md-filter-chip>
|
||||
<md-filter-chip label="Sheets" selected></md-filter-chip>
|
||||
<md-filter-chip label="Images"></md-filter-chip>
|
||||
</md-chip-set>
|
||||
```
|
||||
|
||||
### Removable
|
||||
|
||||
Filter chips can optionally be removable from the chip set. Removable chips have
|
||||
a trailing remove icon.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<h3>Colors</h3>
|
||||
<md-chip-set>
|
||||
<md-filter-chip label="Red" removable selected></md-filter-chip>
|
||||
<md-filter-chip label="Yellow" removable></md-filter-chip>
|
||||
<md-filter-chip label="Blue" removable></md-filter-chip>
|
||||
<md-filter-chip label="Green" removable></md-filter-chip>
|
||||
</md-chip-set>
|
||||
```
|
||||
|
||||
## Input chip
|
||||
|
||||
<!-- go/md-input-chip -->
|
||||
|
||||
[Input chips](https://m3.material.io/components/chips/guidelines#4d2d5ef5-3fcd-46e9-99f2-067747b2393f)<!-- {.external} -->
|
||||
represent discrete pieces of information entered by a user, such as Gmail
|
||||
contacts or filter options within a search field.
|
||||
|
||||
Input chips whose icons are user images may add the `avatar` attribute to
|
||||
display the image in a larger circle.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-outlined-text-field label="Attendees" type="email"></md-outlined-text-field>
|
||||
|
||||
<md-chip-set>
|
||||
<md-input-chip label="Ping Qiang" avatar>
|
||||
<img slot="icon" src="...">
|
||||
</md-input-chip>
|
||||
<md-input-chip label="Thea Schröder" avatar>
|
||||
<img slot="icon" src="...">
|
||||
</md-input-chip>
|
||||
</md-chip-set>
|
||||
```
|
||||
|
||||
### Remove-only
|
||||
|
||||
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 -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<h3>Favorite movies</h3>
|
||||
<md-chip-set>
|
||||
<md-input-chip label="Star Wars" remove-only></md-input-chip>
|
||||
<md-input-chip label="Star Trek" remove-only></md-input-chip>
|
||||
</md-chip-set>
|
||||
```
|
||||
|
||||
## Suggestion chip
|
||||
|
||||
<!-- go/md-suggestion-chip -->
|
||||
|
||||
[Suggestion chips](https://m3.material.io/components/chips/guidelines#36d7bb16-a9bf-4cf6-a73d-8e05510d66a7)<!-- {.external} -->
|
||||
help narrow a user’s intent by presenting dynamically generated suggestions,
|
||||
such as possible responses or search filters.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<h3>Suggested reply</h3>
|
||||
<md-chip-set>
|
||||
<md-suggestion-chip label="I agree"></md-suggestion-chip>
|
||||
<md-suggestion-chip label="Looks good to me"></md-suggestion-chip>
|
||||
<md-suggestion-chip label="Thank you"></md-suggestion-chip>
|
||||
</md-chip-set>
|
||||
```
|
||||
|
||||
## Theming
|
||||
|
||||
Chips support [Material theming](../theming/README.md) and can be customized in
|
||||
terms of color, typography, and shape.
|
||||
|
||||
### Assist chip tokens
|
||||
|
||||
Token | Default value
|
||||
----------------------------------- | -------------------------------------
|
||||
`--md-assist-chip-outline-color` | `--md-sys-color-outline`
|
||||
`--md-assist-chip-container-shape` | `--md-sys-shape-corner-small`
|
||||
`--md-assist-chip-icon-size` | `18px`
|
||||
`--md-assist-chip-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-assist-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-assist-chip.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Assist chip example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-assist-chip-container-shape: 0px;
|
||||
--md-assist-chip-label-text-font: system-ui;
|
||||
--md-sys-color-outline: #6F7979;
|
||||
--md-sys-color-on-surface: #191C1C;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-assist-chip label="Assist"></md-assist-chip>
|
||||
```
|
||||
|
||||
### Filter chip tokens
|
||||
|
||||
Token | Default value
|
||||
------------------------------------------- | -------------
|
||||
`--md-filter-chip-selected-container-color` | `--md-sys-color-secondary-container`
|
||||
`--md-filter-chip-outline-color` | `--md-sys-color-outline`
|
||||
`--md-filter-chip-container-shape` | `--md-sys-shape-corner-small`
|
||||
`--md-filter-chip-icon-size` | `18px`
|
||||
`--md-filter-chip-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-filter-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filter-chip.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Filter chip example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-filter-chip-container-shape: 0px;
|
||||
--md-filter-chip-label-text-font: system-ui;
|
||||
--md-sys-color-outline: #6f7979;
|
||||
--md-sys-color-on-surface: #191c1c;
|
||||
--md-sys-color-secondary-container: #cce8e7;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-filter-chip label="Filter"></md-filter-chip>
|
||||
```
|
||||
|
||||
### Input chip tokens
|
||||
|
||||
Token | Default value
|
||||
---------------------------------- | -------------------------------------
|
||||
`--md-input-chip-outline-color` | `--md-sys-color-outline`
|
||||
`--md-input-chip-container-shape` | `--md-sys-shape-corner-small`
|
||||
`--md-input-chip-icon-size` | `18px`
|
||||
`--md-input-chip-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-input-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-input-chip.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Input chip example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-input-chip-container-shape: 0px;
|
||||
--md-input-chip-label-text-font: system-ui;
|
||||
--md-sys-color-outline: #6f7979;
|
||||
--md-sys-color-on-surface: #191c1c;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-input-chip label="Input"></md-input-chip>
|
||||
```
|
||||
|
||||
### Suggestion chip tokens
|
||||
|
||||
Token | Default value
|
||||
--------------------------------------- | -------------------------------------
|
||||
`--md-suggestion-chip-outline-color` | `--md-sys-color-outline`
|
||||
`--md-suggestion-chip-container-shape` | `--md-sys-shape-corner-small`
|
||||
`--md-suggestion-chip-icon-size` | `18px`
|
||||
`--md-suggestion-chip-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-suggestion-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-suggestion-chip.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Suggestion chip example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-suggestion-chip-container-shape: 0px;
|
||||
--md-suggestion-chip-label-text-font: system-ui;
|
||||
--md-sys-color-outline: #6f7979;
|
||||
--md-sys-color-on-surface: #191c1c;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-suggestion-chip label="Suggestion"></md-suggestion-chip>
|
||||
```
|
||||
|
||||
<!-- auto-generated API docs start -->
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### MdChipSet <code><md-chip-set></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `chips` | | `Chip[]` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdAssistChip <code><md-assist-chip></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `elevated` | `elevated` | `boolean` | `false` | |
|
||||
| `href` | `href` | `string` | `''` | |
|
||||
| `target` | `target` | `string` | `''` | |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
|
||||
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `label` | `label` | `string` | `''` | The label of the chip. |
|
||||
| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Events
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdFilterChip <code><md-filter-chip></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `elevated` | `elevated` | `boolean` | `false` | |
|
||||
| `removable` | `removable` | `boolean` | `false` | |
|
||||
| `selected` | `selected` | `boolean` | `false` | |
|
||||
| `hasSelectedIcon` | `has-selected-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a filter chip has a `slot="selected-icon"` to avoid a Flash Of Unstyled Content. |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
|
||||
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `label` | `label` | `string` | `''` | The label of the chip. |
|
||||
| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
|
||||
| `handleTrailingActionFocus` | | `() => void` | `undefined` | |
|
||||
| `ariaLabelRemove` | | `string` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Events
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `remove` | `Event` | No | No | Dispatched when the remove button is clicked. |
|
||||
| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdInputChip <code><md-input-chip></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `avatar` | `avatar` | `boolean` | `false` | |
|
||||
| `href` | `href` | `string` | `''` | |
|
||||
| `target` | `target` | `string` | `''` | |
|
||||
| `removeOnly` | `remove-only` | `boolean` | `false` | |
|
||||
| `selected` | `selected` | `boolean` | `false` | |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
|
||||
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `label` | `label` | `string` | `''` | The label of the chip. |
|
||||
| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
|
||||
| `handleTrailingActionFocus` | | `() => void` | `undefined` | |
|
||||
| `ariaLabelRemove` | | `string` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Events
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `remove` | `Event` | No | No | Dispatched when the remove button is clicked. |
|
||||
| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdSuggestionChip <code><md-suggestion-chip></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `elevated` | `elevated` | `boolean` | `false` | |
|
||||
| `href` | `href` | `string` | `''` | |
|
||||
| `target` | `target` | `string` | `''` | |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
|
||||
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `label` | `label` | `string` | `''` | The label of the chip. |
|
||||
| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Events
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
<!-- auto-generated API docs end -->
|
262
components-wiki/dialog.md
Normal file
|
@ -0,0 +1,262 @@
|
|||
<!-- catalog-only-start --><!-- ---
|
||||
name: Dialogs
|
||||
dirname: dialog
|
||||
-----><!-- catalog-only-end -->
|
||||
|
||||
<catalog-component-header image-align="start">
|
||||
<catalog-component-header-title slot="title">
|
||||
|
||||
# Dialogs
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
|
||||
tag: 'docType:reference'
|
||||
*-->
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
<!-- go/md-dialog -->
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
<!-- external-only-start -->
|
||||
**This documentation is fully rendered on the
|
||||
[Material Web catalog](https://material-web.dev/components/dialog/)**
|
||||
<!-- external-only-end -->
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
|
||||
[Dialogs](https://m3.material.io/components/dialogs)<!-- {.external} --> provide
|
||||
important prompts in a user flow.
|
||||
|
||||
</catalog-component-header-title>
|
||||
|
||||
<img class="hero" src="images/dialog/hero.webp" alt="A dialog displaying phone ringtone options."
|
||||
title="A dialog">
|
||||
|
||||
</catalog-component-header>
|
||||
|
||||
* [Design article](https://m3.material.io/components/dialogs) <!-- {.external} -->
|
||||
* [API Documentation](#api)
|
||||
* [Source code](https://github.com/material-components/material-web/tree/main/dialog)
|
||||
<!-- {.external} -->
|
||||
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
## Interactive Demo
|
||||
|
||||
{% playgroundexample dirname=dirname %}
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
## Usage
|
||||
|
||||
Dialogs behave like
|
||||
[`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement)<!-- {.external} -->
|
||||
elements, and can be closed with a `<form method="dialog">` element.
|
||||
|
||||
Dialogs have three optional sections: the headline title, the main content, and
|
||||
action buttons.
|
||||
|
||||
```html
|
||||
<md-dialog>
|
||||
<div slot="headline">
|
||||
Dialog title
|
||||
</div>
|
||||
<form slot="content" id="form-id" method="dialog">
|
||||
A simple dialog with free-form content.
|
||||
</form>
|
||||
<div slot="actions">
|
||||
<md-text-button form="form-id">Ok</md-text-button>
|
||||
</div>
|
||||
</md-dialog>
|
||||
```
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-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.
|
||||
|
||||
### Opening and closing
|
||||
|
||||
Dialogs are opened and closed by setting the `open` attribute or property.
|
||||
|
||||
```html
|
||||
<md-dialog open>
|
||||
<div slot="content">
|
||||
A dialog that is opened by default.
|
||||
</div>
|
||||
</md-dialog>
|
||||
```
|
||||
|
||||
Dialogs are also opened and closed by calling `dialog.show()` and
|
||||
`dialog.close()`.
|
||||
|
||||
Both return a Promise that resolves after the dialog's animation finishes.
|
||||
|
||||
```ts
|
||||
closeButton.addEventListener('click', async () => {
|
||||
await dialog.close();
|
||||
});
|
||||
```
|
||||
|
||||
### Return value
|
||||
|
||||
A button's value attribute will set the dialog's `returnValue` property to
|
||||
identify which button closed it.
|
||||
|
||||
```html
|
||||
<md-dialog open>
|
||||
<form slot="content" id="form-id" method="dialog">...</form>
|
||||
<div slot="actions">
|
||||
<md-text-button form="form-id" value="cancel">Cancel</md-text-button>
|
||||
<md-text-button form="form-id" value="ok">Ok</md-text-button>
|
||||
</div>
|
||||
</md-dialog>
|
||||
```
|
||||
|
||||
```ts
|
||||
dialog.addEventListener('close', () => {
|
||||
const cancelClicked = dialog.returnValue === 'cancel';
|
||||
const okClicked = dialog.returnValue === 'ok';
|
||||
});
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Dialogs are labelled by their headlines. Add an
|
||||
[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
|
||||
attribute to dialogs without a headline.
|
||||
|
||||
```html
|
||||
<md-dialog aria-label="Error message">
|
||||
<div slot="content">An error occurred, details ...</div>
|
||||
</md-dialog>
|
||||
```
|
||||
|
||||
### Alerts
|
||||
|
||||
Add a
|
||||
[`type="alert"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role)
|
||||
attribute to dialogs that need to communicate an important message and require a
|
||||
user's response.
|
||||
|
||||
Common examples include error messages that require confirmation and other
|
||||
action confirmation prompts.
|
||||
|
||||
```html
|
||||
<md-dialog type="alert">
|
||||
<div slot="headline">Confirm deletion</div>
|
||||
<form slot="content" id="form-id" method="dialog">
|
||||
Are you sure you wish to delete this item?
|
||||
</form>
|
||||
<div slot="actions">
|
||||
<md-text-button form="form-id" value="cancel">Cancel</md-text-button>
|
||||
<md-text-button form="form-id" value="delete">Delete</md-text-button>
|
||||
</div>
|
||||
</md-dialog>
|
||||
```
|
||||
|
||||
## Theming
|
||||
|
||||
Dialogs supports [Material theming](../theming/README.md) and can be customized
|
||||
in terms of color, typography, and shape.
|
||||
|
||||
### Tokens
|
||||
|
||||
Token | Default value
|
||||
----------------------------------- | ---------------------------------------
|
||||
`--md-dialog-container-color` | `--md-sys-color-surface-container-high`
|
||||
`--md-dialog-headline-color` | `--md-sys-color-on-surface`
|
||||
`--md-dialog-headline-font` | `--md-sys-typescale-headline-small-font`
|
||||
`--md-dialog-supporting-text-color` | `--md-sys-color-on-surface-variant`
|
||||
`--md-dialog-supporting-text-font` | `--md-sys-typescale-body-medium-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-dialog.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
<!-- Need to add image -->
|
||||
<!-- no-catalog-end -->
|
||||
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
/* System tokens */
|
||||
--md-sys-color-surface-container-highest: #dde4e3;
|
||||
--md-sys-color-on-surface: #161d1d;
|
||||
--md-sys-color-on-surface-variant: #3f4948;
|
||||
--md-sys-typescale-body-medium: system-ui 16px/24px;
|
||||
--md-sys-typescale-headline-small: system-ui 24px/32px;
|
||||
|
||||
/* Component tokens */
|
||||
--md-dialog-container-shape: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-dialog>
|
||||
<div slot="headline">Title</div>
|
||||
<div slot="content">Dialog content</div>
|
||||
</md-dialog>
|
||||
```
|
||||
|
||||
<!-- auto-generated API docs start -->
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### MdDialog <code><md-dialog></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `quick` | `quick` | `boolean` | `false` | Skips the opening and closing animations. |
|
||||
| `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. |
|
||||
| `noFocusTrap` | `no-focus-trap` | `boolean` | `false` | Disables focus trapping, which by default keeps keyboard Tab navigation within the dialog.<br>When disabled, after focusing the last element of a dialog, pressing Tab again will release focus from the window back to the browser (such as the URL bar).<br>Focus trapping is recommended for accessibility, and should not typically be disabled. Only turn this off if the use case of a dialog is more accessible without focus trapping. |
|
||||
| `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. |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Methods
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Method | Parameters | Returns | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `show` | _None_ | `Promise<void>` | Opens the dialog and fires a cancelable `open` event. After a dialog's animation, an `opened` event is fired.<br>Add an `autofocus` attribute to a child of the dialog that should receive focus after opening. |
|
||||
| `close` | `returnValue` | `Promise<void>` | Closes the dialog and fires a cancelable `close` event. After a dialog's animation, a `closed` event is fired. |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Events
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `open` | `Event` | No | No | Dispatched when the dialog is opening before any animations. |
|
||||
| `opened` | `Event` | No | No | Dispatched when the dialog has opened after any animations. |
|
||||
| `close` | `Event` | No | No | Dispatched when the dialog is closing before any animations. |
|
||||
| `closed` | `Event` | No | No | Dispatched when the dialog has closed after any animations. |
|
||||
| `cancel` | `Event` | No | No | Dispatched when the dialog has been canceled by clicking on the scrim or pressing Escape. |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
<!-- auto-generated API docs end -->
|
140
components-wiki/divider.md
Normal file
|
@ -0,0 +1,140 @@
|
|||
# Divider
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
|
||||
tag: 'docType:reference'
|
||||
*-->
|
||||
|
||||
<!-- go/md-divider -->
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
A [divider](https://m3.material.io/components/divider)<!-- {.external} --> is a thin line
|
||||
that groups content in lists and containers.
|
||||
|
||||
Dividers can reinforce tapability, such as when used to separate list items or
|
||||
define tappable regions in an accordion.
|
||||
|
||||

|
||||
|
||||
* [Design article](https://m3.material.io/components/divider) <!-- {.external} -->
|
||||
* [API Documentation](#api)
|
||||
* [Source code](https://github.com/material-components/material-web/tree/main/divider)
|
||||
<!-- {.external} -->
|
||||
|
||||
## Usage
|
||||
|
||||
Use full width dividers to separate larger sections of unrelated content.
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<section>
|
||||
<p>Lorem ipsum...</p>
|
||||
<md-divider></md-divider>
|
||||
<p>Lorem ipsum...</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### Inset dividers
|
||||
|
||||
Use inset dividers to separate related content within a section.
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<section>
|
||||
<p>Material 2</p>
|
||||
<md-divider inset></md-divider>
|
||||
<p>Material 3</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
Inset dividers are equally indented from both sides of the screen by default.
|
||||
Use `inset-start` or `inset-end` to change this.
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<section>
|
||||
<p>Material 2</p>
|
||||
<md-divider inset-start></md-divider>
|
||||
<p>Material 3</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Dividers are decorative by default and not announced by assistive technology.
|
||||
|
||||
Add a
|
||||
[`role="separator"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role)<!-- {.external} -->
|
||||
attribute to non-decorative dividers that should be announced.
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>Item one</li>
|
||||
<md-divider inset></md-divider>
|
||||
<li>Item two</li>
|
||||
<md-divider role="separator"></md-divider>
|
||||
<li>Item three</li>
|
||||
<md-divider inset></md-divider>
|
||||
<li>Item four</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
## Theming
|
||||
|
||||
Divider supports [theming](../theming/README.md) and can be customized with CSS
|
||||
custom property tokens.
|
||||
|
||||
### Tokens
|
||||
|
||||
Token | Default value
|
||||
------------------------ | --------------------------------
|
||||
`--md-divider-color` | `--md-sys-color-outline-variant`
|
||||
`--md-divider-thickness` | `1px`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-divider.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Example
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-sys-color-outline-variant: #BEC9C8;
|
||||
--md-divider-thickness: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section>
|
||||
<p>Lorem ipsum...</p>
|
||||
<md-divider></md-divider>
|
||||
<p>Lorem ipsum...</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
<!-- auto-generated API docs start -->
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### MdDivider <code><md-divider></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `inset` | `inset` | `boolean` | `false` | Indents the divider with equal padding on both sides. |
|
||||
| `insetStart` | `inset-start` | `boolean` | `false` | Indents the divider with padding on the leading side. |
|
||||
| `insetEnd` | `inset-end` | `boolean` | `false` | Indents the divider with padding on the trailing side. |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
<!-- auto-generated API docs end -->
|
125
components-wiki/elevation.md
Normal file
|
@ -0,0 +1,125 @@
|
|||
# Elevation
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
|
||||
tag: 'docType:reference'
|
||||
*-->
|
||||
|
||||
<!-- go/md-elevation -->
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
[Elevation](https://m3.material.io/styles/elevation)<!-- {.external} --> is the relative
|
||||
distance between two surfaces along the z-axis.
|
||||
|
||||
Material's elevation system is deliberately limited to just a handful of levels.
|
||||
This creative constraint means you need to make thoughtful decisions about your
|
||||
UI’s elevation story.
|
||||
|
||||

|
||||
|
||||
* [Design article](https://m3.material.io/styles/elevation) <!-- {.external} -->
|
||||
* [API Documentation](#api)
|
||||
* [Source code](https://github.com/material-components/material-web/tree/main/elevation)
|
||||
<!-- {.external} -->
|
||||
|
||||
## Usage
|
||||
|
||||
Elevation can be set from 0 to 5 using the `--md-elevation-level` CSS custom
|
||||
property. The elevation will automatically fill the nearest `position: relative`
|
||||
element's size and shape.
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<style>
|
||||
.surface {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
|
||||
--md-elevation-level: 3;
|
||||
}
|
||||
</style>
|
||||
<div class="surface">
|
||||
<md-elevation></md-elevation>
|
||||
<!-- Content -->
|
||||
</div>
|
||||
```
|
||||
|
||||
### Animation
|
||||
|
||||
Shadows may be animated between levels by adding `transition-duration` and
|
||||
`transition-easing-function` CSS properties.
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<style>
|
||||
.surface {
|
||||
/* ... */
|
||||
transition-duration: 250ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
|
||||
--md-elevation-level: 3;
|
||||
}
|
||||
|
||||
.surface:active {
|
||||
--md-elevation-level: 0;
|
||||
}
|
||||
</style>
|
||||
<div class="surface">
|
||||
<md-elevation></md-elevation>
|
||||
<!-- Content -->
|
||||
</div>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Elevation is a visual component and does not have accessibility concerns.
|
||||
|
||||
## Theming
|
||||
|
||||
Elevation supports [Material theming](../theming/README.md) and can be
|
||||
customized in terms of color.
|
||||
|
||||
### Tokens
|
||||
|
||||
Token | Default value
|
||||
----------------------------- | -----------------------
|
||||
`--md-elevation-level` | `0`
|
||||
`--md-elevation-shadow-color` | `--md-sys-color-shadow`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-elevation.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Example
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<style>
|
||||
.surface {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--md-elevation-level: 5;
|
||||
--md-sys-color-shadow: #006A6A;
|
||||
}
|
||||
</style>
|
||||
<div class="surface">
|
||||
<md-elevation></md-elevation>
|
||||
<!-- Content -->
|
||||
</div>
|
||||
```
|
||||
|
||||
<!-- auto-generated API docs start -->
|
||||
<!-- auto-generated API docs end -->
|
522
components-wiki/fab.md
Normal file
|
@ -0,0 +1,522 @@
|
|||
<!-- catalog-only-start --><!-- ---
|
||||
name: Floating action button (FAB)
|
||||
dirname: fab
|
||||
-----><!-- catalog-only-end -->
|
||||
|
||||
<catalog-component-header>
|
||||
<catalog-component-header-title slot="title">
|
||||
|
||||
# Floating action buttons (FAB)
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
|
||||
tag: 'docType:reference'
|
||||
*-->
|
||||
|
||||
<!-- go/md-fab -->
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
<!-- external-only-start -->
|
||||
**This documentation is fully rendered on the
|
||||
[Material Web catalog](https://material-web.dev/components/fab/).**
|
||||
<!-- external-only-end -->
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
|
||||
[FAB](https://m3.material.io/components/floating-action-button)<!-- {.external} -->
|
||||
represents the most important action on a screen. It puts key actions within
|
||||
reach.
|
||||
|
||||
[Extended FABs](https://m3.material.io/components/extended-fab) help people take
|
||||
primary actions. They're wider than FABs to accommodate a text label and larger
|
||||
target area.
|
||||
|
||||
</catalog-component-header-title>
|
||||
|
||||
<img
|
||||
class="hero"
|
||||
alt="A phone showing a payment screen with a green filled button that says 'Make
|
||||
payment'"
|
||||
src="images/fab/hero.webp">
|
||||
|
||||
</catalog-component-header>
|
||||
|
||||
* Design articles
|
||||
* [FAB](https://m3.material.io/components/floating-action-button)
|
||||
<!-- {.external} -->
|
||||
* [Extended FAB](https://m3.material.io/components/extended-fab)
|
||||
<!-- {.external} -->
|
||||
* API Documentation (*coming soon*)
|
||||
* [Source code](https://github.com/material-components/material-web/tree/main/fab)
|
||||
<!-- {.external} -->
|
||||
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
## Interactive Demo
|
||||
|
||||
{% playgroundexample dirname=dirname %}
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
## Types
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/fabs.html" -->
|
||||
|
||||
1. [FAB](#fab)
|
||||
2. [Small FAB](#sizes)
|
||||
3. [Large FAB](#sizes)
|
||||
|
||||
### Extended FAB
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/extended-fabs.html" -->
|
||||
|
||||
* [Extended FAB with both icon and label text](#extended)
|
||||
* [API Documentation](#api)
|
||||
* [Extended FAB without icon](#without-icon)
|
||||
|
||||
## Usage
|
||||
|
||||
FABs should have an icon, such as a font `md-icon`, an `svg`, or an `img`.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/usage-fab.html" -->
|
||||
|
||||
```html
|
||||
<md-fab aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
```
|
||||
|
||||
### Lowered
|
||||
|
||||
FABs can be set to a lower elevation with the `lowered` attribute.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/usage-lowered.html" -->
|
||||
|
||||
```html
|
||||
<md-fab lowered aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Icon-only FABs must include an `aria-label` that describes its action. Otherwise
|
||||
if `aria-label` is not provided, the FAB will default to announcing its visible
|
||||
contents.
|
||||
|
||||
```html
|
||||
<md-fab aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
```
|
||||
|
||||
Extended FABs use their `label` for accessibility. Add an `aria-label` for
|
||||
additional context if needed. By supplying the `label` attribute, the extended
|
||||
FAB will make sure that the icon is not announced.
|
||||
|
||||
```html
|
||||
<md-fab label="Edit" aria-label="Edit Comment">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
```
|
||||
|
||||
## FAB
|
||||
|
||||
FABs should display a clear and understandable icon.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/usage-fab.html" -->
|
||||
|
||||
```html
|
||||
<md-fab aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
```
|
||||
|
||||
### Extended
|
||||
|
||||
FABs may be extended with a label for additional emphasis. Extended FABs can
|
||||
omit their icon.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/usage-extended.html" -->
|
||||
|
||||
```html
|
||||
<md-fab label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
```
|
||||
|
||||
#### Without icon
|
||||
|
||||
Extended FABs are the only FABs that can be used without an icon.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/usage-without-icon.html" -->
|
||||
|
||||
```html
|
||||
<md-fab label="Reroute"></md-fab>
|
||||
```
|
||||
|
||||
### Colors
|
||||
|
||||
FAB colors may be changed with the `variant` attribute. It can be set to
|
||||
"surface" (default), "primary", "secondary", or "tertiary".
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/usage-color.html" -->
|
||||
|
||||
```html
|
||||
<md-fab variant="primary" aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
<md-fab variant="secondary" aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
<md-fab variant="tertiary" aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
FABs may be small, medium (default), or large by setting the `size` attribute.
|
||||
Small FABs can optionally further reduce their touch target.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/usage-sizes.html" -->
|
||||
|
||||
```html
|
||||
<md-fab size="small" touch-target="none" aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
<md-fab size="small" aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
<md-fab aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
<md-fab size="large" aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
```
|
||||
|
||||
## Branded FAB
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
<!-- go/md-branded-fab -->
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
|
||||
Branded FABs use a brightly colored logo for their icon. Unlike [FAB](#fab),
|
||||
branded FABs do not have color variants.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/usage-branded.html" -->
|
||||
|
||||
```html
|
||||
<md-branded-fab size="small" aria-label="Add">
|
||||
<svg slot="icon" viewBox="0 0 36 36">
|
||||
<path fill="#34A853" d="M16 16v14h4V20z"></path>
|
||||
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
|
||||
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
|
||||
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
|
||||
<path fill="none" d="M0 0h36v36H0z"></path>
|
||||
</svg>
|
||||
</md-branded-fab>
|
||||
```
|
||||
|
||||
### Extended
|
||||
|
||||
Branded FABs may be extended with a label for additional emphasis. Unlike
|
||||
[FAB](#fab), branded FABs should always display their logo icon.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/usage-branded-extended.html" -->
|
||||
|
||||
```html
|
||||
<md-branded-fab label="Add">
|
||||
<svg slot="icon" viewBox="0 0 36 36">
|
||||
<path fill="#34A853" d="M16 16v14h4V20z"></path>
|
||||
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
|
||||
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
|
||||
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
|
||||
<path fill="none" d="M0 0h36v36H0z"></path>
|
||||
</svg>
|
||||
</md-branded-fab>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Branded FABs may be medium (default) or large by setting the `size` attribute.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/usage-branded-sizes.html" -->
|
||||
|
||||
```html
|
||||
<md-branded-fab aria-label="Add">
|
||||
<svg slot="icon" viewBox="0 0 36 36">
|
||||
<path fill="#34A853" d="M16 16v14h4V20z"></path>
|
||||
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
|
||||
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
|
||||
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
|
||||
<path fill="none" d="M0 0h36v36H0z"></path>
|
||||
</svg>
|
||||
</md-branded-fab>
|
||||
<md-branded-fab size="large" aria-label="Add">
|
||||
<svg slot="icon" viewBox="0 0 36 36">
|
||||
<path fill="#34A853" d="M16 16v14h4V20z"></path>
|
||||
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
|
||||
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
|
||||
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
|
||||
<path fill="none" d="M0 0h36v36H0z"></path>
|
||||
</svg>
|
||||
</md-branded-fab>
|
||||
```
|
||||
|
||||
## Theming
|
||||
|
||||
FAB supports [Material theming](../theming/README.md) and can be customized in
|
||||
terms of color, typography, and shape.
|
||||
|
||||
### FAB tokens
|
||||
|
||||
Token | Default value
|
||||
---------------------------------- | ---------------------------------------
|
||||
`--md-fab-container-color` | `--md-sys-color-surface-container-high`
|
||||
`--md-fab-lowered-container-color` | `--md-sys-color-surface-container-low`
|
||||
`--md-fab-container-shape` | `--md-sys-shape-corner-large`
|
||||
`--md-fab-icon-color` | `--md-sys-color-primary`
|
||||
`--md-fab-icon-size` | `24px`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-fab.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### FAB example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/theming-fab.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-sys-color-surface-container-high: #e3e9e9;
|
||||
--md-sys-color-primary: #006a6a;
|
||||
--md-fab-container-shape: 0px;
|
||||
--md-fab-icon-size: 36px;
|
||||
background-color: #f4fbfa;
|
||||
}
|
||||
</style>
|
||||
<md-fab aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
```
|
||||
|
||||
#### Sizes tokens
|
||||
|
||||
Token | Default value
|
||||
-------------------------------- | -------------
|
||||
`--md-fab-small-container-shape` | `--md-sys-shape-corner-medium`
|
||||
`--md-fab-small-icon-size` | `24px`
|
||||
`--md-fab-large-container-shape` | `--md-sys-shape-corner-extra-large`
|
||||
`--md-fab-large-icon-size` | `36px`
|
||||
|
||||
#### Extended FAB tokens
|
||||
|
||||
Token | Default value
|
||||
-------------------------- | -------------------------------------
|
||||
`--md-fab-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
#### Extended FAB example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/theming-extended.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-sys-color-surface-container-high: #e3e9e9;
|
||||
--md-sys-color-on-surface: #161d1d;
|
||||
--md-sys-color-primary: #006a6a;
|
||||
--md-fab-container-shape: 0px;
|
||||
--md-fab-icon-size: 36px;
|
||||
background-color: #f4fbfa;
|
||||
}
|
||||
</style>
|
||||
<md-fab label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
```
|
||||
|
||||
### Branded FAB tokens
|
||||
|
||||
Token | Default value
|
||||
---------------------------------- | ---------------------------------------
|
||||
`--md-fab-branded-container-color` | `--md-sys-color-surface-container-high`
|
||||
`--md-fab-branded-container-shape` | `--md-sys-shape-corner-large`
|
||||
`--md-fab-branded-icon-size` | `36px`
|
||||
`--md-fab-branded-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-fab-branded.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Branded FAB example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/fab/theming-branded.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-sys-color-surface-container-high: #e3e9e9;
|
||||
--md-sys-color-on-surface: #161d1d;
|
||||
--md-fab-branded-icon-size: 48px;
|
||||
--md-fab-branded-container-shape: 0px;
|
||||
background-color: #f4fbfa;
|
||||
}
|
||||
</style>
|
||||
<md-branded-fab size="small" aria-label="Add">
|
||||
<svg slot="icon" viewBox="0 0 36 36">
|
||||
<path fill="#34A853" d="M16 16v14h4V20z"></path>
|
||||
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
|
||||
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
|
||||
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
|
||||
<path fill="none" d="M0 0h36v36H0z"></path>
|
||||
</svg>
|
||||
</md-branded-fab>
|
||||
<md-branded-fab size="small" label="Add">
|
||||
<svg slot="icon" viewBox="0 0 36 36">
|
||||
<path fill="#34A853" d="M16 16v14h4V20z"></path>
|
||||
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
|
||||
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
|
||||
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
|
||||
<path fill="none" d="M0 0h36v36H0z"></path>
|
||||
</svg>
|
||||
</md-branded-fab>
|
||||
```
|
||||
|
||||
<!-- auto-generated API docs start -->
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### MdFab <code><md-fab></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `variant` | `variant` | `string` | `'surface'` | The FAB color variant to render. |
|
||||
| `size` | `size` | `string` | `'medium'` | The size of the FAB.<br>NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not have different sizes. |
|
||||
| `label` | `label` | `string` | `''` | The text to display on the FAB. |
|
||||
| `lowered` | `lowered` | `boolean` | `false` | Lowers the FAB's elevation. |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdBrandedFab <code><md-branded-fab></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `variant` | `variant` | `string` | `'surface'` | The FAB color variant to render. |
|
||||
| `size` | `size` | `string` | `'medium'` | The size of the FAB.<br>NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not have different sizes. |
|
||||
| `label` | `label` | `string` | `''` | The text to display on the FAB. |
|
||||
| `lowered` | `lowered` | `boolean` | `false` | Lowers the FAB's elevation. |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Methods
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Method | Parameters | Returns | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `getRenderClasses` | _None_ | `{ primary: boolean; secondary: boolean; tertiary: boolean; small: boolean; lowered: boolean; large: boolean; extended: boolean; }` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
<!-- auto-generated API docs end -->
|
22
components-wiki/figures/checkbox/theming.html
Normal file
|
@ -0,0 +1,22 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content: center; align-items: center"
|
||||
class="styled-example"
|
||||
aria-label="Image of a checkbox with a different theme applied"
|
||||
>
|
||||
<style>
|
||||
.styled-example {
|
||||
background-color: white;
|
||||
border-radius: 28px;
|
||||
/* System tokens */
|
||||
--md-sys-color-primary: #006a6a;
|
||||
--md-sys-color-on-primary: #ffffff;
|
||||
--md-sys-color-on-surface-variant: #3f4948;
|
||||
/* Component tokens */
|
||||
--md-checkbox-container-shape: 0px;
|
||||
}
|
||||
</style>
|
||||
<md-checkbox touch-target="wrapper"></md-checkbox>
|
||||
<md-checkbox touch-target="wrapper" checked></md-checkbox>
|
||||
</figure>
|
||||
</div>
|
13
components-wiki/figures/checkbox/usage-label.html
Normal file
|
@ -0,0 +1,13 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content: center; align-items: center"
|
||||
aria-label="Two checkboxes with labels"
|
||||
>
|
||||
<label style="display: flex; align-items: center">
|
||||
<md-checkbox touch-target="wrapper"></md-checkbox>
|
||||
Checkbox one
|
||||
</label>
|
||||
<md-checkbox id="checkbox-two" touch-target="wrapper"></md-checkbox>
|
||||
<label for="checkbox-two">Checkbox two</label>
|
||||
</figure>
|
||||
</div>
|
9
components-wiki/figures/checkbox/usage.html
Normal file
|
@ -0,0 +1,9 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;"
|
||||
aria-label="Three checkboxes in a row that are unselected, selected, and indeterminate">
|
||||
<md-checkbox touch-target="wrapper"></md-checkbox>
|
||||
<md-checkbox touch-target="wrapper" checked></md-checkbox>
|
||||
<md-checkbox touch-target="wrapper" indeterminate></md-checkbox>
|
||||
</figure>
|
||||
</div>
|
25
components-wiki/figures/fab/extended-fabs.html
Normal file
|
@ -0,0 +1,25 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="types-image"
|
||||
style="justify-content:center;"
|
||||
title="There are two types of extended FABs with and without icon"
|
||||
aria-label="2 examples of extended FABs">
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<div class="fab-wrapper">
|
||||
<md-fab label="navigate" variant="primary">
|
||||
<md-icon slot="icon">navigation</md-icon>
|
||||
</md-fab>
|
||||
</div>
|
||||
<span>1</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="fab-wrapper">
|
||||
<md-fab variant="surface" label="reroute">
|
||||
</md-fab>
|
||||
</div>
|
||||
<span>2</span>
|
||||
</div>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
65
components-wiki/figures/fab/fabs.html
Normal file
|
@ -0,0 +1,65 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="types-image"
|
||||
style="justify-content:center;"
|
||||
title="There are three sizes of floating action buttons: FAB, small FAB, and large FAB"
|
||||
aria-label="The 3 sizes of FAB">
|
||||
<style>
|
||||
.types-image .wrapper,
|
||||
.types-image .wrapper > * {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.types-image .wrapper > * {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
.types-image span {
|
||||
display: inline-flex;
|
||||
background-color: var(--md-sys-color-inverse-surface);
|
||||
color: var(--md-sys-color-inverse-on-surface);
|
||||
padding: 8px;
|
||||
margin-block-start: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.types-image .fab-wrapper {
|
||||
height: 96px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<div class="fab-wrapper">
|
||||
<md-fab variant="primary" aria-label="Accessibility">
|
||||
<md-icon slot="icon">accessible_forward</md-icon>
|
||||
</md-fab>
|
||||
</div>
|
||||
<span>1</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="fab-wrapper">
|
||||
<md-fab variant="tertiary" size="small" aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
</div>
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="fab-wrapper">
|
||||
<md-fab size="large" aria-label="Color Palette">
|
||||
<md-icon slot="icon">palette</md-icon>
|
||||
</md-fab>
|
||||
</div>
|
||||
<span>3</span>
|
||||
</div>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
33
components-wiki/figures/fab/theming-branded.html
Normal file
|
@ -0,0 +1,33 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="styled-example branded"
|
||||
aria-label="Image of two branded fabs, one regular, one extended with the visible label Add with a different theme applied"
|
||||
style="padding-block: 16px;gap: 16px;display: flex;">
|
||||
<style>
|
||||
.styled-example.branded {
|
||||
--md-sys-color-on-surface: #161d1d;
|
||||
--md-fab-branded-label-text-font: system-ui;
|
||||
--md-fab-branded-icon-size: 48px;
|
||||
--md-fab-branded-container-shape: 0px;
|
||||
}
|
||||
</style>
|
||||
<md-branded-fab size="small" aria-label="Add">
|
||||
<svg slot="icon" viewBox="0 0 36 36">
|
||||
<path fill="#34A853" d="M16 16v14h4V20z"></path>
|
||||
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
|
||||
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
|
||||
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
|
||||
<path fill="none" d="M0 0h36v36H0z"></path>
|
||||
</svg>
|
||||
</md-branded-fab>
|
||||
<md-branded-fab size="small" label="Add">
|
||||
<svg slot="icon" viewBox="0 0 36 36">
|
||||
<path fill="#34A853" d="M16 16v14h4V20z"></path>
|
||||
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
|
||||
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
|
||||
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
|
||||
<path fill="none" d="M0 0h36v36H0z"></path>
|
||||
</svg>
|
||||
</md-branded-fab>
|
||||
</figure>
|
||||
</div>
|
17
components-wiki/figures/fab/theming-extended.html
Normal file
|
@ -0,0 +1,17 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="styled-example extended"
|
||||
aria-label="Image of an extended FAB with a different theme applied"
|
||||
style="padding-block: 16px;">
|
||||
<style>
|
||||
.styled-example.extended {
|
||||
--md-fab-label-text-font: system-ui;
|
||||
--md-fab-icon-size: 36px;
|
||||
--md-fab-container-shape: 0px;
|
||||
}
|
||||
</style>
|
||||
<md-fab label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
</figure>
|
||||
</div>
|
21
components-wiki/figures/fab/theming-fab.html
Normal file
|
@ -0,0 +1,21 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="styled-example fab"
|
||||
aria-label="Image of a fab with a different theme applied"
|
||||
style="padding-block: 16px;">
|
||||
<style>
|
||||
.styled-example {
|
||||
--md-sys-color-surface-container-high: #e3e9e9;
|
||||
--md-sys-color-primary: #006a6a;
|
||||
background-color: #f4fbfa;
|
||||
}
|
||||
.styled-example.fab {
|
||||
--md-fab-icon-size: 36px;
|
||||
--md-fab-container-shape: 0px;
|
||||
}
|
||||
</style>
|
||||
<md-fab aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
</figure>
|
||||
</div>
|
15
components-wiki/figures/fab/usage-branded-extended.html
Normal file
|
@ -0,0 +1,15 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="An extended branded fab with a google-colored plus icon and the visible text Add"
|
||||
style="padding-block: 16px;">
|
||||
<md-branded-fab label="Add">
|
||||
<svg slot="icon" viewBox="0 0 36 36">
|
||||
<path fill="#34A853" d="M16 16v14h4V20z"></path>
|
||||
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
|
||||
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
|
||||
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
|
||||
<path fill="none" d="M0 0h36v36H0z"></path>
|
||||
</svg>
|
||||
</md-branded-fab>
|
||||
</figure>
|
||||
</div>
|
25
components-wiki/figures/fab/usage-branded-sizes.html
Normal file
|
@ -0,0 +1,25 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="Two branded FABs next to each other with a google-branded plus icon. A medium sized one and a large one."
|
||||
style="padding-block: 16px; gap: 16px; display: flex"
|
||||
>
|
||||
<md-branded-fab aria-label="Add">
|
||||
<svg slot="icon" viewBox="0 0 36 36">
|
||||
<path fill="#34A853" d="M16 16v14h4V20z"></path>
|
||||
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
|
||||
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
|
||||
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
|
||||
<path fill="none" d="M0 0h36v36H0z"></path>
|
||||
</svg>
|
||||
</md-branded-fab>
|
||||
<md-branded-fab size="large" aria-label="Add">
|
||||
<svg slot="icon" viewBox="0 0 36 36">
|
||||
<path fill="#34A853" d="M16 16v14h4V20z"></path>
|
||||
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
|
||||
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
|
||||
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
|
||||
<path fill="none" d="M0 0h36v36H0z"></path>
|
||||
</svg>
|
||||
</md-branded-fab>
|
||||
</figure>
|
||||
</div>
|
15
components-wiki/figures/fab/usage-branded.html
Normal file
|
@ -0,0 +1,15 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="A branded FAB with a google-colored plus icon."
|
||||
style="padding-block: 16px;">
|
||||
<md-branded-fab size="small" aria-label="Add">
|
||||
<svg slot="icon" viewBox="0 0 36 36">
|
||||
<path fill="#34A853" d="M16 16v14h4V20z"></path>
|
||||
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
|
||||
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
|
||||
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
|
||||
<path fill="none" d="M0 0h36v36H0z"></path>
|
||||
</svg>
|
||||
</md-branded-fab>
|
||||
</figure>
|
||||
</div>
|
15
components-wiki/figures/fab/usage-color.html
Normal file
|
@ -0,0 +1,15 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="Three fabs with edit icons next to each other but the first is primary colored, second is secondary, and the last is tertiary colored."
|
||||
style="padding-block: 16px;gap: 16px;display: flex;">
|
||||
<md-fab variant="primary" aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
<md-fab variant="secondary" aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
<md-fab variant="tertiary" aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
</figure>
|
||||
</div>
|
9
components-wiki/figures/fab/usage-extended.html
Normal file
|
@ -0,0 +1,9 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="An extended FAB with an edit icon and the visible text edit"
|
||||
style="padding-block: 16px;">
|
||||
<md-fab label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
</figure>
|
||||
</div>
|
9
components-wiki/figures/fab/usage-fab.html
Normal file
|
@ -0,0 +1,9 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="A standard surface fab"
|
||||
style="padding-block: 16px;">
|
||||
<md-fab aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
</figure>
|
||||
</div>
|
9
components-wiki/figures/fab/usage-lowered.html
Normal file
|
@ -0,0 +1,9 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="A standard fab with an edit icon and lowered in elevation"
|
||||
style="padding-block: 16px;">
|
||||
<md-fab lowered aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
</figure>
|
||||
</div>
|
19
components-wiki/figures/fab/usage-sizes.html
Normal file
|
@ -0,0 +1,19 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="Four surface fabs side by side with edit icons of visual size size small, small, medium, and large"
|
||||
style="padding-block: 16px; gap: 16px; display: flex"
|
||||
>
|
||||
<md-fab size="small" touch-target="none" aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
<md-fab size="small" aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
<md-fab aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
<md-fab size="large" aria-label="Edit">
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
</figure>
|
||||
</div>
|
7
components-wiki/figures/fab/usage-without-icon.html
Normal file
|
@ -0,0 +1,7 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="An extended FAB with a visible label saying reroute"
|
||||
style="padding-block: 16px;">
|
||||
<md-fab label="Reroute"></md-fab>
|
||||
</figure>
|
||||
</div>
|
66
components-wiki/figures/iconbutton/buttons.html
Normal file
|
@ -0,0 +1,66 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="types-image"
|
||||
style="justify-content:center;"
|
||||
title="1 - Standard Icon Button. 2 - Contained Icon Button (including filled, filled tonal, and outlined styles)"
|
||||
aria-label="Side by side view of standard and contained icon buttons">
|
||||
<style>
|
||||
.types-image .wrapper,
|
||||
.types-image .wrapper > * {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.types-image .wrapper > * {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
.types-image span {
|
||||
display: inline-flex;
|
||||
background-color: var(--md-sys-color-inverse-surface);
|
||||
color: var(--md-sys-color-inverse-on-surface);
|
||||
padding: 8px;
|
||||
margin-block-start: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.types-image .wrapper > div > div {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<div>
|
||||
<md-icon-button>
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-icon-button>
|
||||
<md-icon-button toggle selected>
|
||||
<md-icon slot="selected" class="filled">bookmark</md-icon>
|
||||
<md-icon class="filled">bookmark</md-icon>
|
||||
</md-icon-button>
|
||||
</div>
|
||||
<span>1</span>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<md-filled-icon-button>
|
||||
<md-icon>videocam</md-icon>
|
||||
</md-filled-icon-button>
|
||||
<md-filled-tonal-icon-button>
|
||||
<md-icon>settings</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
<md-outlined-icon-button>
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
</div>
|
||||
<span>2</span>
|
||||
</div>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
20
components-wiki/figures/iconbutton/theming-filled-tonal.html
Normal file
|
@ -0,0 +1,20 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="styled-example tonal"
|
||||
title="Filled tonal icon button theming example."
|
||||
aria-label="Image of a filled tonal icon button with a different theme applied">
|
||||
<style>
|
||||
.styled-example.tonal {
|
||||
--md-filled-tonal-icon-button-container-width: 80px;
|
||||
--md-filled-tonal-icon-button-container-height: 80px;
|
||||
--md-filled-tonal-icon-button-container-shape: 0px;
|
||||
--md-filled-tonal-icon-button-icon-size: 40px;
|
||||
--md-sys-color-secondary-container: #006A6A;
|
||||
padding-block: 8px;
|
||||
}
|
||||
</style>
|
||||
<md-filled-tonal-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
</figure>
|
||||
</div>
|
20
components-wiki/figures/iconbutton/theming-filled.html
Normal file
|
@ -0,0 +1,20 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="styled-example filled red"
|
||||
title="Filled icon button theming example."
|
||||
aria-label="Image of a filled icon button with a different theme applied">
|
||||
<style>
|
||||
.styled-example.filled {
|
||||
--md-filled-icon-button-container-width: 80px;
|
||||
--md-filled-icon-button-container-height: 80px;
|
||||
--md-filled-icon-button-icon-size: 40px;
|
||||
--md-filled-icon-button-container-shape: 0px;
|
||||
--md-sys-color-primary: #dc362e;
|
||||
padding-block: 8px;
|
||||
}
|
||||
</style>
|
||||
<md-filled-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
</figure>
|
||||
</div>
|
21
components-wiki/figures/iconbutton/theming-outlined.html
Normal file
|
@ -0,0 +1,21 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="styled-example outlined"
|
||||
title="Outlined icon button theming example."
|
||||
aria-label="Image of an outlined icon button with a different theme applied">
|
||||
<style>
|
||||
.styled-example.outlined > * {
|
||||
--md-outlined-icon-button-container-width: 80px;
|
||||
--md-outlined-icon-button-container-height: 80px;
|
||||
--md-outlined-icon-button-container-shape: 0px;
|
||||
--md-outlined-icon-button-icon-size: 40px;
|
||||
--md-outlined-icon-button-unselected-outline-width: 4px;
|
||||
--md-sys-color-outline: #006A6A;
|
||||
padding-block: 8px;
|
||||
}
|
||||
</style>
|
||||
<md-outlined-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
</figure>
|
||||
</div>
|
22
components-wiki/figures/iconbutton/theming-standard.html
Normal file
|
@ -0,0 +1,22 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="styled-example standard red"
|
||||
title="Standard icon button theming example."
|
||||
aria-label="Image of a standard icon button with a different theme applied">
|
||||
<style>
|
||||
.styled-example {
|
||||
background-color: white;
|
||||
}
|
||||
.styled-example.red {
|
||||
background-color: #fff8f6;
|
||||
}
|
||||
.styled-example.standard {
|
||||
--md-icon-button-icon-size: 32px;
|
||||
--md-sys-color-on-surface-variant: #dc362e;
|
||||
}
|
||||
</style>
|
||||
<md-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-icon-button>
|
||||
</figure>
|
||||
</div>
|
10
components-wiki/figures/iconbutton/usage-filled-tonal.html
Normal file
|
@ -0,0 +1,10 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;gap: 8px;"
|
||||
title="Filled Tonal Icon Button"
|
||||
aria-label="A filled tonal icon button with a check icon">
|
||||
<md-filled-tonal-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
</figure>
|
||||
</div>
|
10
components-wiki/figures/iconbutton/usage-filled.html
Normal file
|
@ -0,0 +1,10 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;gap: 8px;"
|
||||
title="Filled Icon Button"
|
||||
aria-label="A circular button with a check icon">
|
||||
<md-filled-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
</figure>
|
||||
</div>
|
10
components-wiki/figures/iconbutton/usage-outlined.html
Normal file
|
@ -0,0 +1,10 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;gap: 8px;"
|
||||
title="Outlined Icon button"
|
||||
aria-label="An outlined circular icon button with a check icon">
|
||||
<md-outlined-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
</figure>
|
||||
</div>
|
10
components-wiki/figures/iconbutton/usage-standard.html
Normal file
|
@ -0,0 +1,10 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;gap: 8px;"
|
||||
title="Standard Icon Button with Check icon"
|
||||
aria-label="A check icon">
|
||||
<md-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-icon-button>
|
||||
</figure>
|
||||
</div>
|
42
components-wiki/figures/iconbutton/usage-toggle.html
Normal file
|
@ -0,0 +1,42 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="gap:8px;flex-direction:column;padding-block:8px;"
|
||||
aria-label="Two rows of toggling icon buttons, the top row is unselected and the bottom row is selected">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<md-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
<md-filled-tonal-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
<md-outlined-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<md-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
<md-filled-tonal-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
<md-outlined-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
19
components-wiki/figures/iconbutton/usage.html
Normal file
|
@ -0,0 +1,19 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;gap: 8px;"
|
||||
title="Icon buttons can be used within other components, such as a bottom app bar"
|
||||
aria-label="A row of icon buttons">
|
||||
<md-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
<md-filled-tonal-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
<md-outlined-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
</figure>
|
||||
</div>
|
39
components-wiki/figures/list/theming-icon.html
Normal file
|
@ -0,0 +1,39 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="styled-example icon"
|
||||
aria-label="Image of a list and icon list items of food names with a different theme applied"
|
||||
style="padding-block: 16px;">
|
||||
<style>
|
||||
.styled-example.icon md-list {
|
||||
--md-list-container-color: #f4fbfa;
|
||||
--md-list-item-label-text-color: #161d1d;
|
||||
--md-list-item-supporting-text-color: #3f4948;
|
||||
--md-list-item-trailing-supporting-text-color: #3f4948;
|
||||
--md-list-item-leading-icon-color: #006a6a;
|
||||
--md-list-item-trailing-icon-color: #006a6a;
|
||||
--md-list-item-leading-icon-size: 20px;
|
||||
--md-list-item-trailing-icon-size: 20px;
|
||||
}
|
||||
.styled-example.icon md-list .unhealthy {
|
||||
--md-list-item-trailing-icon-color: #ba1a1a;
|
||||
}
|
||||
</style>
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<div slot="headline">Eggs</div>
|
||||
<md-icon slot="start">egg</md-icon>
|
||||
<md-icon slot="end">recommend</md-icon>
|
||||
</md-list-item>
|
||||
<md-list-item class="unhealthy">
|
||||
<div slot="headline">Ice Cream</div>
|
||||
<md-icon slot="start">icecream</md-icon>
|
||||
<md-icon slot="end">dangerous</md-icon>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<div slot="headline">Orange</div>
|
||||
<md-icon slot="start">nutrition</md-icon>
|
||||
<md-icon slot="end">recommend</md-icon>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</figure>
|
||||
</div>
|
35
components-wiki/figures/list/theming-image.html
Normal file
|
@ -0,0 +1,35 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="styled-example image"
|
||||
aria-label="Image of a list and image list items of cats with a different theme applied"
|
||||
style="padding-block: 16px"
|
||||
>
|
||||
<style>
|
||||
.styled-example.image md-list {
|
||||
--md-list-container-color: #f4fbfa;
|
||||
--md-list-item-label-text-color: #161d1d;
|
||||
--md-list-item-supporting-text-color: #3f4948;
|
||||
--md-list-item-trailing-supporting-text-color: #3f4948;
|
||||
}
|
||||
.styled-example.image md-list img {
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
</style>
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<div slot="headline">Wide Cat</div>
|
||||
<img loading="lazy" slot="start" src="https://placekitten.com/200/100">
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<div slot="headline">Round kitty cat</div>
|
||||
<img loading="lazy" slot="start" src="https://placekitten.com/202/101">
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<div slot="headline">Softe cate</div>
|
||||
<img loading="lazy" slot="start" src="https://placekitten.com/212/106">
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</figure>
|
||||
</div>
|
42
components-wiki/figures/list/theming-list.html
Normal file
|
@ -0,0 +1,42 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="styled-example list"
|
||||
aria-label="Image of a list and list items of foods with their inventory stock number with a different theme applied"
|
||||
style="padding-block: 16px;">
|
||||
<style>
|
||||
.styled-example {
|
||||
background-color: #f4fbfa;
|
||||
}
|
||||
.styled-example.list md-list {
|
||||
--md-list-container-color: #f4fbfa;
|
||||
--md-list-item-label-text-color: #161d1d;
|
||||
--md-list-item-supporting-text-color: #3f4948;
|
||||
--md-list-item-trailing-supporting-text-color: #3f4948;
|
||||
--md-list-item-label-text-font: system-ui;
|
||||
--md-list-item-supporting-text-font: system-ui;
|
||||
--md-list-item-trailing-supporting-text-font: system-ui;
|
||||
}
|
||||
.styled-example.list md-list [slot="trailing-supporting-text"] {
|
||||
width: 30px;
|
||||
text-align: end;
|
||||
}
|
||||
</style>
|
||||
<md-list>
|
||||
<md-list-item type="button">
|
||||
<div slot="headline">Apple</div>
|
||||
<div slot="supporting-text">In stock</div>
|
||||
<div slot="trailing-supporting-text">+100</div>
|
||||
</md-list-item>
|
||||
<md-list-item type="button">
|
||||
<div slot="headline">Banana</div>
|
||||
<div slot="supporting-text">In stock</div>
|
||||
<div slot="trailing-supporting-text">56</div>
|
||||
</md-list-item>
|
||||
<md-list-item type="button">
|
||||
<div slot="headline">Cucumber</div>
|
||||
<div slot="supporting-text">Low stock</div>
|
||||
<div slot="trailing-supporting-text">5</div>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</figure>
|
||||
</div>
|
31
components-wiki/figures/list/usage-icon.html
Normal file
|
@ -0,0 +1,31 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure aria-label="A list with three items and dividers separating each item. The first item has the Lit logo and the text Lit. The second item has the Polymer logo and the text Polymer. The third item has the Angular logo and the text Angular.">
|
||||
<md-list style="max-width: 300px">
|
||||
<md-list-item>
|
||||
Lit
|
||||
<svg slot="start" style="height: 24px" viewBox="0 0 160 200">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m160 80v80l-40-40zm-40 40v80l40-40zm0-80v80l-40-40zm-40 40v80l40-40zm-40-40v80l40-40zm40-40v80l-40-40zm-40 120v80l-40-40zm-40-40v80l40-40z"
|
||||
/>
|
||||
</svg>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item>
|
||||
Polymer
|
||||
<md-icon slot="start">polymer</md-icon>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item>
|
||||
Angular
|
||||
<svg slot="start" style="height: 24px" viewBox="0 0 250 250">
|
||||
<polygon points="108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5 " />
|
||||
<path
|
||||
d="M125,30L125,30L125,30L31.9,63.2l14.2,123.1L125,230l0,0l0,0l78.9-43.7l14.2-123.1L125,30z M183.1,182.6h-21.7h0
|
||||
l-11.7-29.2H125h0h0h-24.7l-11.7,29.2h0H66.9h0L125,52.1l0,0l0,0l0,0l0,0L183.1,182.6L183.1,182.6z"
|
||||
/>
|
||||
</svg>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</figure>
|
||||
</div>
|
22
components-wiki/figures/list/usage-image.html
Normal file
|
@ -0,0 +1,22 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="A list with three image items. The first item is a square picture of a cat and the text Cat. The second is a picture of a kitten with the text Kitty Cat. The third item is a square image of an older kitten with the text Cate."
|
||||
>
|
||||
<md-list style="max-width: 300px">
|
||||
<md-list-item>
|
||||
Cat
|
||||
<img slot="start" style="width: 56px" src="https://placekitten.com/112/112" />
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item>
|
||||
Kitty Cat
|
||||
<img slot="start" style="width: 56px" src="https://placekitten.com/114/114" />
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item>
|
||||
Cate
|
||||
<img slot="start" style="width: 56px" src="https://placekitten.com/116/116" />
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</figure>
|
||||
</div>
|
30
components-wiki/figures/list/usage.html
Normal file
|
@ -0,0 +1,30 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="Three items in a list. The first item says Apple as its headline. The second one says Banana in its headline as well as Banana is a yellow fruit as its sub header. The third list item says Cucumber in its headline and Cucumbers are long green fruits that are just as long as this multi-line description as its sub header which is on two lines."
|
||||
>
|
||||
<md-list style="max-width: 300px;">
|
||||
<md-list-item>
|
||||
Fruits
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item>
|
||||
Apple
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
Banana
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<div slot="headline">Cucumber</div>
|
||||
<div slot="supporting-text">Cucumbers are long green fruits that are just as long as this multi-line description</div>
|
||||
</md-list-item>
|
||||
<md-list-item
|
||||
interactive
|
||||
href="https://google.com/search?q=buy+kiwis&tbm=shop"
|
||||
target="_blank">
|
||||
<div slot="headline">Shop for Kiwis</div>
|
||||
<div slot="supporting-text">This will link you out in a new tab</div>
|
||||
<md-icon slot="end">open_in_new</md-icon>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</figure>
|
||||
</div>
|
50
components-wiki/figures/menu/theming.html
Normal file
|
@ -0,0 +1,50 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="styled-example menu"
|
||||
aria-label="A green, filled button with the text Themed menu. Interact with the button to open the green themed menu with 0 border-radius."
|
||||
style="padding-block: 16px"
|
||||
>
|
||||
<style>
|
||||
.styled-example {
|
||||
background-color: #f4fbfa;
|
||||
}
|
||||
.styled-example md-filled-button {
|
||||
--md-sys-color-primary: #006a6a;
|
||||
--md-sys-color-on-primary: #ffffff;
|
||||
}
|
||||
.styled-example.menu md-menu {
|
||||
--md-menu-container-color: #f4fbfa;
|
||||
--md-menu-container-shape: 0px;
|
||||
--md-sys-color-on-surface: #161d1d;
|
||||
--md-sys-typescale-body-large-font: system-ui;
|
||||
}
|
||||
.styled-example.menu md-menu-item {
|
||||
border-radius: 28px;
|
||||
}
|
||||
.styled-example.menu md-menu-item::part(focus-ring) {
|
||||
border-radius: 28px;
|
||||
}
|
||||
</style>
|
||||
<span style="position: relative">
|
||||
<md-filled-button id="theming-anchor">Themed menu</md-filled-button>
|
||||
<md-menu id="theming-menu" anchor="theming-anchor">
|
||||
<md-menu-item>
|
||||
<div slot="headline">Apple</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Banana</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Cucumber</div>
|
||||
</md-menu-item>
|
||||
</md-menu>
|
||||
</span>
|
||||
<script type="module">
|
||||
const anchorEl = document.body.querySelector("#theming-anchor");
|
||||
const menuEl = document.body.querySelector("#theming-menu");
|
||||
anchorEl.addEventListener("click", () => {
|
||||
menuEl.show();
|
||||
});
|
||||
</script>
|
||||
</figure>
|
||||
</div>
|
30
components-wiki/figures/menu/usage-document.html
Normal file
|
@ -0,0 +1,30 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content: center"
|
||||
aria-label="A filled button that says open document menu. Interact with the button to open a document menu."
|
||||
>
|
||||
<div>
|
||||
<div style="margin: 16px">
|
||||
<md-filled-button id="usage-document-anchor">Open document menu</md-filled-button>
|
||||
</div>
|
||||
<md-menu positioning="document" id="usage-document" anchor="usage-document-anchor">
|
||||
<md-menu-item>
|
||||
<div slot="headline">Apple</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Banana</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Cucumber</div>
|
||||
</md-menu-item>
|
||||
</md-menu>
|
||||
</div>
|
||||
<script type="module">
|
||||
const anchorEl = document.body.querySelector("#usage-document-anchor");
|
||||
const menuEl = document.body.querySelector("#usage-document");
|
||||
anchorEl.addEventListener("click", () => {
|
||||
menuEl.open = !menuEl.open;
|
||||
});
|
||||
</script>
|
||||
</figure>
|
||||
</div>
|
30
components-wiki/figures/menu/usage-fixed.html
Normal file
|
@ -0,0 +1,30 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content: center"
|
||||
aria-label="A filled button that says open fixed menu. Interact with the button to open a fixed menu."
|
||||
>
|
||||
<div>
|
||||
<div style="margin: 16px">
|
||||
<md-filled-button id="usage-fixed-anchor">Open fixed menu</md-filled-button>
|
||||
</div>
|
||||
<md-menu positioning="fixed" id="usage-fixed" anchor="usage-fixed-anchor">
|
||||
<md-menu-item>
|
||||
<div slot="headline">Apple</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Banana</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Cucumber</div>
|
||||
</md-menu-item>
|
||||
</md-menu>
|
||||
</div>
|
||||
<script type="module">
|
||||
const anchorEl = document.body.querySelector("#usage-fixed-anchor");
|
||||
const menuEl = document.body.querySelector("#usage-fixed");
|
||||
anchorEl.addEventListener("click", () => {
|
||||
menuEl.open = !menuEl.open;
|
||||
});
|
||||
</script>
|
||||
</figure>
|
||||
</div>
|
30
components-wiki/figures/menu/usage-popover.html
Normal file
|
@ -0,0 +1,30 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content: center"
|
||||
aria-label="A filled button that says open popover menu. Interact with the button to open a popover menu."
|
||||
>
|
||||
<div>
|
||||
<div style="margin: 16px">
|
||||
<md-filled-button id="usage-popover-anchor">Open popover menu</md-filled-button>
|
||||
</div>
|
||||
<md-menu positioning="popover" id="usage-popover" anchor="usage-popover-anchor">
|
||||
<md-menu-item>
|
||||
<div slot="headline">Apple</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Banana</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Cucumber</div>
|
||||
</md-menu-item>
|
||||
</md-menu>
|
||||
</div>
|
||||
<script type="module">
|
||||
const anchorEl = document.body.querySelector("#usage-popover-anchor");
|
||||
const menuEl = document.body.querySelector("#usage-popover");
|
||||
anchorEl.addEventListener("click", () => {
|
||||
menuEl.open = !menuEl.open;
|
||||
});
|
||||
</script>
|
||||
</figure>
|
||||
</div>
|
63
components-wiki/figures/menu/usage-submenu.html
Normal file
|
@ -0,0 +1,63 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content: center"
|
||||
aria-label="A filled button that says menu with submenus. Interact with the button to interact with a menu that has two sub menus."
|
||||
>
|
||||
<span style="position: relative">
|
||||
<md-filled-button id="usage-submenu-anchor"> Menu with Submenus </md-filled-button>
|
||||
<!-- Note the has-overflow attribute -->
|
||||
<md-menu has-overflow id="usage-submenu" anchor="usage-submenu-anchor">
|
||||
<md-sub-menu>
|
||||
<md-menu-item slot="item">
|
||||
<div slot="headline">Fruits with A</div>
|
||||
<!-- Arrow icons are helpful affordances -->
|
||||
<md-icon slot="end">arrow_right</md-icon>
|
||||
</md-menu-item>
|
||||
<!-- Submenu must be slotted into sub-menu's menu slot -->
|
||||
<md-menu slot="menu">
|
||||
<md-menu-item>
|
||||
<div slot="headline">Apricot</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Avocado</div>
|
||||
</md-menu-item>
|
||||
<!-- Nest as many as you want and control menu anchoring -->
|
||||
<md-sub-menu menu-corner="start-end" anchor-corner="start-start">
|
||||
<md-menu-item slot="item">
|
||||
<div slot="headline">Apples</div>
|
||||
<!-- Arrow icons are helpful affordances -->
|
||||
<md-icon slot="start">
|
||||
arrow_left
|
||||
</md-icon>
|
||||
</md-menu-item>
|
||||
<md-menu slot="menu">
|
||||
<md-menu-item>
|
||||
<div slot="headline">Fuji</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline" style="white-space: nowrap;">Granny Smith</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline" style="white-space: nowrap;">Red Delicious</div>
|
||||
</md-menu-item>
|
||||
</md-menu>
|
||||
</md-sub-menu>
|
||||
</md-menu>
|
||||
</md-sub-menu>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Banana</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Cucumber</div>
|
||||
</md-menu-item>
|
||||
</md-menu>
|
||||
</span>
|
||||
<script type="module">
|
||||
const anchorEl = document.body.querySelector("#usage-submenu-anchor");
|
||||
const menuEl = document.body.querySelector("#usage-submenu");
|
||||
anchorEl.addEventListener("click", () => {
|
||||
menuEl.open = !menuEl.open;
|
||||
});
|
||||
</script>
|
||||
</figure>
|
||||
</div>
|
58
components-wiki/figures/menu/usage.html
Normal file
|
@ -0,0 +1,58 @@
|
|||
<div class="figure-wrapper">
|
||||
<style>
|
||||
main > .figure-wrapper {
|
||||
/* prevent scrolling bars on menu open */
|
||||
overflow: visible;
|
||||
/* unset page styles */
|
||||
--md-list-item-container-shape: 0px;
|
||||
}
|
||||
</style>
|
||||
<figure
|
||||
style="justify-content: center"
|
||||
aria-label="Two filled buttons next to each other. The first one says set with idref and the other says set with element ref. Interact with them to open their respective menus."
|
||||
>
|
||||
<span style="position: relative; margin-inline-end: 8px">
|
||||
<md-filled-button id="usage-anchor">Set with idref</md-filled-button>
|
||||
<md-menu id="usage-menu" anchor="usage-anchor">
|
||||
<md-menu-item>
|
||||
<div slot="headline">Apple</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Banana</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Cucumber</div>
|
||||
</md-menu-item>
|
||||
</md-menu>
|
||||
</span>
|
||||
<script type="module">
|
||||
const anchorEl = document.body.querySelector("#usage-anchor");
|
||||
const menuEl = document.body.querySelector("#usage-menu");
|
||||
anchorEl.addEventListener("click", () => {
|
||||
menuEl.open = !menuEl.open;
|
||||
});
|
||||
</script>
|
||||
<span style="position: relative">
|
||||
<md-filled-button id="usage-anchor-2">Set with element ref</md-filled-button>
|
||||
<md-menu id="usage-menu-2">
|
||||
<md-menu-item>
|
||||
<div slot="headline">Apple</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Banana</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Cucumber</div>
|
||||
</md-menu-item>
|
||||
</md-menu>
|
||||
</span>
|
||||
<script type="module">
|
||||
const anchorEl = document.body.querySelector("#usage-anchor-2");
|
||||
const menuEl = document.body.querySelector("#usage-menu-2");
|
||||
menuEl.anchorElement = anchorEl;
|
||||
anchorEl.addEventListener("click", () => {
|
||||
menuEl.open = !menuEl.open;
|
||||
});
|
||||
</script>
|
||||
</figure>
|
||||
</div>
|
28
components-wiki/figures/select/theming-filled.html
Normal file
|
@ -0,0 +1,28 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="styled-example filled"
|
||||
title="Filled select theming example"
|
||||
aria-label="Image of a filled select with a different theme applied"
|
||||
>
|
||||
<style>
|
||||
.styled-example.filled {
|
||||
--md-filled-select-text-field-container-shape: 0px;
|
||||
--md-filled-select-text-field-container-color: #f7faf9;
|
||||
--md-filled-select-text-field-input-text-color: #005353;
|
||||
--md-filled-select-text-field-input-text-font: system-ui;
|
||||
}
|
||||
.styled-example.filled md-filled-select::part(menu) {
|
||||
--md-menu-container-color: #f4fbfa;
|
||||
--md-menu-container-shape: 0px;
|
||||
}
|
||||
</style>
|
||||
<md-filled-select>
|
||||
<md-select-option selected value="apple">
|
||||
<div slot="headline">Apple</div>
|
||||
</md-select-option>
|
||||
<md-select-option value="tomato">
|
||||
<div slot="headline">Tomato</div>
|
||||
</md-select-option>
|
||||
</md-filled-select>
|
||||
</figure>
|
||||
</div>
|
34
components-wiki/figures/select/theming-outlined.html
Normal file
|
@ -0,0 +1,34 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
class="styled-example outlined"
|
||||
title="Outlined select theming example"
|
||||
aria-label="Image of an outlined select with a different theme applied"
|
||||
>
|
||||
<style>
|
||||
.figure-wrapper figure {
|
||||
padding-block: 16px;
|
||||
}
|
||||
.styled-example {
|
||||
background-color: #f4fbfa;
|
||||
}
|
||||
.styled-example.outlined {
|
||||
--md-outlined-select-text-field-outline-color: #6e7979;
|
||||
--md-outlined-select-text-field-container-shape: 0px;
|
||||
--md-outlined-select-text-field-input-text-color: #005353;
|
||||
--md-outlined-select-text-field-input-text-font: system-ui;
|
||||
}
|
||||
.styled-example.outlined md-outlined-select::part(menu) {
|
||||
--md-menu-container-color: #f4fbfa;
|
||||
--md-menu-container-shape: 0px;
|
||||
}
|
||||
</style>
|
||||
<md-outlined-select>
|
||||
<md-select-option selected value="apple">
|
||||
<div slot="headline">Apple</div>
|
||||
</md-select-option>
|
||||
<md-select-option value="tomato">
|
||||
<div slot="headline">Tomato</div>
|
||||
</md-select-option>
|
||||
</md-outlined-select>
|
||||
</figure>
|
||||
</div>
|
34
components-wiki/figures/select/usage.html
Normal file
|
@ -0,0 +1,34 @@
|
|||
<div class="figure-wrapper">
|
||||
<style>
|
||||
main > .figure-wrapper {
|
||||
/* prevent scrolling bars on dropdown menu open */
|
||||
overflow: visible;
|
||||
/* unset page styles */
|
||||
--md-list-item-container-shape: 0px;
|
||||
}
|
||||
</style>
|
||||
<figure
|
||||
style="justify-content: center; gap: 8px"
|
||||
title="Example usage of an outlined dropdown menu and a filled dropdown menu."
|
||||
aria-label="An outlined dropdown menu filled with Apple, and a filled dropdown menu."
|
||||
>
|
||||
<md-outlined-select>
|
||||
<md-select-option aria-label="blank"></md-select-option>
|
||||
<md-select-option selected value="apple">
|
||||
<div slot="headline">Apple</div>
|
||||
</md-select-option>
|
||||
<md-select-option value="apricot">
|
||||
<div slot="headline">Apricot</div>
|
||||
</md-select-option>
|
||||
</md-outlined-select>
|
||||
<md-filled-select>
|
||||
<md-select-option aria-label="blank"></md-select-option>
|
||||
<md-select-option value="apple">
|
||||
<div slot="headline">Apple</div>
|
||||
</md-select-option>
|
||||
<md-select-option value="apricot">
|
||||
<div slot="headline">Apricot</div>
|
||||
</md-select-option>
|
||||
</md-filled-select>
|
||||
</figure>
|
||||
</div>
|
22
components-wiki/figures/textfield/theming-filled.html
Normal file
|
@ -0,0 +1,22 @@
|
|||
<div class="figure-wrapper">
|
||||
<style>
|
||||
figure.themed {
|
||||
background-color: #f4fbfa;
|
||||
}
|
||||
figure.themed.filled {
|
||||
--md-filled-text-field-container-shape: 0px;
|
||||
--md-sys-typescale-body-large: 400 1rem system-ui;
|
||||
--md-sys-color-primary: #006a6a;
|
||||
--md-sys-color-surface-container-highest: #e0e3e2;
|
||||
--md-filled-text-field-label-text-color: #3f4948;
|
||||
--md-filled-text-field-input-text-color: #161d1d;
|
||||
}
|
||||
</style>
|
||||
<figure
|
||||
class="themed filled"
|
||||
aria-label="A filled text field with the label filled themed to a greenish color"
|
||||
style="padding-block: 16px; gap: 16px"
|
||||
>
|
||||
<md-filled-text-field label="Filled" value="Value"> </md-filled-text-field>
|
||||
</figure>
|
||||
</div>
|
18
components-wiki/figures/textfield/theming-outlined.html
Normal file
|
@ -0,0 +1,18 @@
|
|||
<div class="figure-wrapper">
|
||||
<style>
|
||||
figure.themed.outlined {
|
||||
--md-outlined-text-field-container-shape: 0px;
|
||||
--md-sys-typescale-body-large: 400 1rem system-ui;
|
||||
--md-sys-color-primary: #006a6a;
|
||||
--md-outlined-text-field-label-text-color: #3f4948;
|
||||
--md-outlined-text-field-input-text-color: #161d1d;
|
||||
}
|
||||
</style>
|
||||
<figure
|
||||
class="themed outlined"
|
||||
aria-label="An outlined text field with the label outlined themed to a greenish color"
|
||||
style="padding-block: 16px; gap: 16px"
|
||||
>
|
||||
<md-outlined-text-field label="Outlined" value="Value"></md-outlined-text-field>
|
||||
</figure>
|
||||
</div>
|
|
@ -0,0 +1,8 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="An outlined textfield with a floating label that says Title and a filled value that says Short and the text 5 / 10 under the field at the end"
|
||||
style="padding-block: 16px; gap: 16px"
|
||||
>
|
||||
<md-outlined-text-field label="Title" value="Short" maxlength="10"></md-outlined-text-field>
|
||||
</figure>
|
||||
</div>
|
19
components-wiki/figures/textfield/usage-icons.html
Normal file
|
@ -0,0 +1,19 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="Three outlined textfields next to each other the first has a search icon at the start the label Search Messages, the second a label that says Password and an eye icon toggle button at the end, and a red, visually errored outlined textfield with the label Username with an exclamation icon at the end and helper error text under the field that says Username not available"
|
||||
style="padding-block: 16px; gap: 16px"
|
||||
>
|
||||
<md-outlined-text-field placeholder="Search for messages" has-leading-icon>
|
||||
<md-icon slot="leading-icon">search</md-icon>
|
||||
</md-outlined-text-field>
|
||||
<md-outlined-text-field label="Password" type="password" has-trailing-icon>
|
||||
<md-icon-button toggle slot="trailing-icon">
|
||||
<md-icon>visibility</md-icon>
|
||||
<md-icon slot="selected">visibility_off</md-icon>
|
||||
</md-icon-button>
|
||||
</md-outlined-text-field>
|
||||
<md-outlined-text-field label="Username" error error-text="Username not available" has-trailing-icon>
|
||||
<md-icon slot="trailing-icon">error</md-icon>
|
||||
</md-outlined-text-field>
|
||||
</figure>
|
||||
</div>
|
11
components-wiki/figures/textfield/usage-label.html
Normal file
|
@ -0,0 +1,11 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="Three outlined textfields next to each other. the first has a label of Favorite food, the second one a placeholder of email@domain.com and there is a label that says First name and an empty outlined textfield next to it"
|
||||
style="padding-block: 16px; gap: 16px"
|
||||
>
|
||||
<md-outlined-text-field label="Favorite food"></md-outlined-text-field>
|
||||
<md-outlined-text-field placeholder="email@domain.com"></md-outlined-text-field>
|
||||
<div>First name</div>
|
||||
<md-outlined-text-field aria-label="First name"></md-outlined-text-field>
|
||||
</figure>
|
||||
</div>
|
14
components-wiki/figures/textfield/usage-prefix.html
Normal file
|
@ -0,0 +1,14 @@
|
|||
<div class="figure-wrapper textarea">
|
||||
<figure
|
||||
aria-label="An outlined textfield with a floating label that says Dollar amount, a prefix dollar sign, the number zero as a value and a suffix of decimal zero zero at the end of the field"
|
||||
style="padding-block: 16px; gap: 16px"
|
||||
>
|
||||
<md-outlined-text-field
|
||||
label="Dollar amount"
|
||||
type="number"
|
||||
value="0"
|
||||
prefix-text="$"
|
||||
suffix-text=".00"
|
||||
></md-outlined-text-field>
|
||||
</figure>
|
||||
</div>
|
17
components-wiki/figures/textfield/usage-supporting-text.html
Normal file
|
@ -0,0 +1,17 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="Two filled fields next to each other. The first has a label that says comments and supporting text under the field that says Provide comments for the issue. The second field has a label of Name with an asterisk and supporting text under the field that has an asterisk followed by the word required"
|
||||
style="padding-block: 16px; gap: 16px"
|
||||
>
|
||||
<md-filled-text-field
|
||||
label="Comments"
|
||||
supporting-text="Provide comments for the issue"
|
||||
></md-filled-text-field>
|
||||
<md-filled-text-field
|
||||
label="Name"
|
||||
required
|
||||
supporting-text="*required"
|
||||
error-text="Please fill out this field"
|
||||
></md-filled-text-field>
|
||||
</figure>
|
||||
</div>
|
13
components-wiki/figures/textfield/usage-textarea.html
Normal file
|
@ -0,0 +1,13 @@
|
|||
<div class="figure-wrapper textarea">
|
||||
<figure
|
||||
aria-label="A filled textarea that is vertically larger and has a label that says Vertical resize"
|
||||
style="padding-block: 16px; gap: 16px"
|
||||
>
|
||||
<style>
|
||||
.figure-wrapper.textarea md-filled-text-field {
|
||||
resize: vertical;
|
||||
}
|
||||
</style>
|
||||
<md-filled-text-field type="textarea" label="Vertical resize" rows="3"></md-filled-text-field>
|
||||
</figure>
|
||||
</div>
|
9
components-wiki/figures/textfield/usage-type.html
Normal file
|
@ -0,0 +1,9 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="Two filled textfields next to each other. The first has a label of Username and the outlined one has a label of Password"
|
||||
style="padding-block: 16px; gap: 16px"
|
||||
>
|
||||
<md-filled-text-field label="Username" type="email"></md-filled-text-field>
|
||||
<md-filled-text-field label="Password" type="password"></md-filled-text-field>
|
||||
</figure>
|
||||
</div>
|
9
components-wiki/figures/textfield/usage.html
Normal file
|
@ -0,0 +1,9 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
aria-label="A filled textfield next to an outlined textfield. Both have a value of Value prefilled"
|
||||
style="padding-block: 16px; gap: 16px"
|
||||
>
|
||||
<md-filled-text-field label="Label" value="Value"></md-filled-text-field>
|
||||
<md-outlined-text-field label="Label" value="Value"></md-outlined-text-field>
|
||||
</figure>
|
||||
</div>
|
174
components-wiki/focus-ring.md
Normal file
|
@ -0,0 +1,174 @@
|
|||
# Focus ring
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
|
||||
tag: 'docType:reference'
|
||||
*-->
|
||||
|
||||
<!-- go/md-focus-ring -->
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
Focus rings are accessible outlines for components to show keyboard focus.
|
||||
|
||||
Focus rings follow the same heuristics as
|
||||
[`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)<!-- {.external} -->
|
||||
to determine when they are visible.
|
||||
|
||||

|
||||
|
||||
* [API Documentation](#api)
|
||||
* [Source code](https://github.com/material-components/material-web/tree/main/focus)
|
||||
<!-- {.external} -->
|
||||
|
||||
## Usage
|
||||
|
||||
Focus rings display on keyboard navigation. They may be attached to a control in
|
||||
one of three ways.
|
||||
|
||||

|
||||
|
||||
1. Attached to the parent element
|
||||
|
||||
```html
|
||||
<button style="position: relative">
|
||||
<md-focus-ring style="--md-focus-ring-shape: 8px"></md-focus-ring>
|
||||
</button>
|
||||
```
|
||||
|
||||
1. Attached to a referenced element
|
||||
|
||||
```html
|
||||
<div style="position: relative">
|
||||
<md-focus-ring for="control" style="--md-focus-ring-shape: 8px"></md-focus-ring>
|
||||
<input id="control">
|
||||
</div>
|
||||
```
|
||||
|
||||
1. Attached imperatively
|
||||
|
||||
```html
|
||||
<div style="position: relative">
|
||||
<md-focus-ring id="ring" style="--md-focus-ring-shape: 8px"></md-focus-ring>
|
||||
<button id="ring-control"></button>
|
||||
</div>
|
||||
<script>
|
||||
const focusRing = document.querySelector('#ring');
|
||||
const control = document.querySelector('#ring-control');
|
||||
focusRing.attach(control);
|
||||
</script>
|
||||
```
|
||||
|
||||
> Note: focus rings must be placed within a `position: relative` container.
|
||||
|
||||
### Inward
|
||||
|
||||
Focus rings can be changed to animate inwards by adding an `inward` attribute.
|
||||
This is useful for components like list items.
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<button style="position: relative">
|
||||
<md-focus-ring inward style="--md-focus-ring-shape: 8px"></md-focus-ring>
|
||||
</button>
|
||||
```
|
||||
|
||||
### Animation
|
||||
|
||||
The focus ring animation may be customized or disabled using CSS custom
|
||||
properties.
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<style>
|
||||
md-focus-ring {
|
||||
--md-focus-ring-duration: 0s; /* disabled animation */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Focus rings are visual components and do not have assistive technology
|
||||
requirements.
|
||||
|
||||
## Theming
|
||||
|
||||
Focus rings supports [Material theming](../theming/README.md) and can be
|
||||
customized in terms of color and shape.
|
||||
|
||||
### Tokens
|
||||
|
||||
Token | Default value
|
||||
----------------------- | --------------------------
|
||||
`--md-focus-ring-color` | `--md-sys-color-secondary`
|
||||
`--md-focus-ring-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-focus-ring-width` | `3px`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-focus-ring.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Example
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<style>
|
||||
md-focus-ring {
|
||||
--md-focus-ring-shape: 0px;
|
||||
--md-focus-ring-width: 2px;
|
||||
--md-focus-ring-active-width: 4px;
|
||||
--md-sys-color-secondary: #4A6363;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button>
|
||||
<md-focus-ring></md-focus-ring>
|
||||
</button>
|
||||
```
|
||||
|
||||
<!-- auto-generated API docs start -->
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### MdFocusRing <code><md-focus-ring></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `visible` | `visible` | `boolean` | `false` | Makes the focus ring visible. |
|
||||
| `inward` | `inward` | `boolean` | `false` | Makes the focus ring animate inwards instead of outwards. |
|
||||
| `htmlFor` | | `string` | `undefined` | |
|
||||
| `control` | | `HTMLElement` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Methods
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Method | Parameters | Returns | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `attach` | `control` | `void` | |
|
||||
| `detach` | _None_ | `void` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Events
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `visibility-changed` | `Event` | No | No | Fired whenever `visible` changes. |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
<!-- auto-generated API docs end -->
|
600
components-wiki/icon-button.md
Normal file
|
@ -0,0 +1,600 @@
|
|||
<!-- catalog-only-start --><!-- ---
|
||||
name: Icon Buttons
|
||||
dirname: iconbutton
|
||||
-----><!-- catalog-only-end -->
|
||||
|
||||
<catalog-component-header>
|
||||
<catalog-component-header-title slot="title">
|
||||
|
||||
# Icon Buttons
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
|
||||
tag: 'docType:reference'
|
||||
*-->
|
||||
|
||||
<!-- go/md-icon-button -->
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
<!-- external-only-start -->
|
||||
**This documentation is fully rendered on the
|
||||
[Material Web catalog](https://material-web.dev/components/icon-button/).**
|
||||
<!-- external-only-end -->
|
||||
|
||||
[Icon buttons](https://m3.material.io/components/icon-buttons)<!-- {.external} --> help
|
||||
people take supplementary actions with a single tap.
|
||||
|
||||
</catalog-component-header-title>
|
||||
<img
|
||||
class="hero"
|
||||
alt="The top half of a phone application with a back icon button at the top left and three icon buttons on the top right, heart, share, and three dot."
|
||||
src="images/iconbutton/hero.webp">
|
||||
|
||||
</catalog-component-header>
|
||||
|
||||
* [Design article](https://m3.material.io/components/icon-buttons) <!-- {.external} -->
|
||||
* [API Documentation](#api)
|
||||
* [Source code](https://github.com/material-components/material-web/tree/main/iconbutton)
|
||||
<!-- {.external} -->
|
||||
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
## Interactive Demo
|
||||
|
||||
{% playgroundexample dirname=dirname, previewHeight=700 %}
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
## Types
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
")
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/iconbutton/buttons.html" -->
|
||||
|
||||
1. [Icon Button](#icon-button)
|
||||
2. [Filled Icon Button](#filled-icon-button)
|
||||
3. [Filled Tonal Icon Button](#filled-tonal-icon-button)
|
||||
4. [Outlined Icon Button](#outlined-icon-button)
|
||||
|
||||
## Usage
|
||||
|
||||
Use icon buttons to display actions in a compact layout. Icon buttons can
|
||||
represent opening actions such as opening an overflow menu or search, or
|
||||
represent binary actions that can be toggled on and off, such as favorite or
|
||||
bookmark.
|
||||
|
||||
Icon buttons can be grouped together or they can stand alone.
|
||||
|
||||
To use icons by name, see the [Icon](icon.md#usage) documentation for loading
|
||||
the icon font.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/iconbutton/usage.html" -->
|
||||
|
||||
```html
|
||||
<md-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
<md-filled-tonal-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
<md-outlined-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
```
|
||||
|
||||
### Links
|
||||
|
||||
Add an
|
||||
[`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href)<!-- {.external} -->
|
||||
and optionally a
|
||||
[`target`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)<!-- {.external} -->
|
||||
attribute to turn the icon button into a link.
|
||||
|
||||
```html
|
||||
<md-icon-button href="https://google.com">
|
||||
<md-icon>check</md-icon>
|
||||
</md-icon-button>
|
||||
```
|
||||
|
||||
### Toggle
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/iconbutton/usage-toggle.html" -->
|
||||
|
||||
Toggle icon buttons allow a single choice to be selected or deselected, such as
|
||||
adding or removing something from favorites.
|
||||
|
||||
Add a second icon in the `slot="selected"` slot to change the icon when
|
||||
selected. Toggle icon buttons can be pre-selected by adding the `selected`
|
||||
attribute.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<md-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
<md-filled-tonal-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
<md-outlined-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
</div>
|
||||
<div>
|
||||
<md-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
<md-filled-tonal-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
<md-outlined-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Add an
|
||||
[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
|
||||
attribute to icon buttons whose labels need a more descriptive label.
|
||||
|
||||
```html
|
||||
<md-icon-button aria-label="Search for Contact">
|
||||
<md-icon>search</md-icon>
|
||||
</md-icon-button>
|
||||
```
|
||||
|
||||
### Toggle
|
||||
|
||||
Add an `aria-label-selected` attribute to toggle buttons whose labels need a
|
||||
more descriptive label when selected.
|
||||
|
||||
```html
|
||||
<md-icon-button toggle
|
||||
aria-label="Unselected"
|
||||
aria-label-selected="Selected">
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-icon-button>
|
||||
```
|
||||
|
||||
### Focusable and disabled
|
||||
|
||||
By default, disabled icon buttons are not focusable with the keyboard, while
|
||||
"soft-disabled" icon buttons are. Some use cases encourage focusability of
|
||||
disabled toolbar items to increase their discoverability.
|
||||
|
||||
See the
|
||||
[ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls)<!-- {.external} -->
|
||||
for guidance on when this is recommended.
|
||||
|
||||
```html
|
||||
<div role="toolbar">
|
||||
<md-icon-button aria-label="Copy">
|
||||
<md-icon>copy</md-icon>
|
||||
</md-icon-button>
|
||||
<md-icon-button aria-label="Cut">
|
||||
<md-icon>cut</md-icon>
|
||||
</md-icon-button>
|
||||
<!--
|
||||
This icon button is disabled but kept focusable to improve its
|
||||
discoverability in the toolbar.
|
||||
-->
|
||||
<md-icon-button aria-label="Paste" soft-disabled>
|
||||
<md-icon>paste</md-icon>
|
||||
</md-icon-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Icon Button
|
||||
|
||||
Standard icon buttons do not have a background or outline, and have the lowest
|
||||
emphasis of the icon buttons.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/iconbutton/usage-standard.html" -->
|
||||
|
||||
```html
|
||||
<md-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-icon-button>
|
||||
```
|
||||
|
||||
## Filled Icon Button
|
||||
|
||||
<!-- go/md-filled-icon-button -->
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/iconbutton/usage-filled.html" -->
|
||||
|
||||
Filled icon buttons have higher visual impact and are best for high emphasis
|
||||
actions.
|
||||
|
||||
```html
|
||||
<md-filled-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
```
|
||||
|
||||
## Filled Tonal Icon Button
|
||||
|
||||
<!-- go/md-filled-tonal-icon-button -->
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/iconbutton/usage-filled-tonal.html" -->
|
||||
|
||||
Filled tonal icon buttons are a middle ground between filled and outlined icon
|
||||
buttons. They're useful in contexts where the button requires slightly more
|
||||
emphasis than an outline would give, such as a secondary action paired with a
|
||||
high emphasis action.
|
||||
|
||||
```html
|
||||
<md-filled-tonal-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
```
|
||||
|
||||
## Outlined Icon Button
|
||||
|
||||
<!-- go/md-outlined-icon-button -->
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/iconbutton/usage-outlined.html" -->
|
||||
|
||||
Outlined icon buttons are medium-emphasis buttons. They're useful when an icon
|
||||
button needs more emphasis than a standard icon button but less than a filled or
|
||||
filled tonal icon button.
|
||||
|
||||
```html
|
||||
<md-outlined-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
```
|
||||
|
||||
## Theming
|
||||
|
||||
Icon Button supports [Material theming](../theming/README.md) and can be
|
||||
customized in terms of color, and shape.
|
||||
|
||||
### Icon Button tokens
|
||||
|
||||
Token | Default value
|
||||
------------------------------------ | -----------------------------------
|
||||
`--md-icon-button-icon-color` | `--md-sys-color-on-surface-variant`
|
||||
`--md-icon-button-state-layer-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-icon-button-icon-size` | `24px`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon-button.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Icon Button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/iconbutton/theming-standard.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-icon-button-icon-size: 32px;
|
||||
--md-sys-color-on-surface-variant: #dc362e;
|
||||
background-color: #fff8f6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-icon-button>
|
||||
```
|
||||
|
||||
### Filled Icon Button tokens
|
||||
|
||||
Token | Default value
|
||||
-------------------------------------------------- | -------------
|
||||
`--md-filled-icon-button-selected-container-color` | `--md-sys-color-primary`
|
||||
`--md-filled-icon-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-filled-icon-button-container-width` | `40px`
|
||||
`--md-filled-icon-button-container-height` | `40px`
|
||||
`--md-filled-icon-button-icon-size` | `24px`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-icon-button.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Filled Icon Button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/iconbutton/theming-filled.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-filled-icon-button-container-width: 80px;
|
||||
--md-filled-icon-button-container-height: 80px;
|
||||
--md-filled-icon-button-icon-size: 40px;
|
||||
--md-filled-icon-button-container-shape: 0px;
|
||||
--md-sys-color-primary: #dc362e;
|
||||
background-color: #fff8f6;
|
||||
}
|
||||
</style>
|
||||
<md-filled-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
```
|
||||
|
||||
### Filled Tonal Icon Button tokens
|
||||
|
||||
Token | Default value
|
||||
-------------------------------------------------------- | -------------
|
||||
`--md-filled-tonal-icon-button-selected-container-color` | `--md-sys-color-secondary-container`
|
||||
`--md-filled-tonal-icon-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-filled-tonal-icon-button-container-width` | `40px`
|
||||
`--md-filled-tonal-icon-button-container-height` | `40px`
|
||||
`--md-filled-tonal-icon-button-icon-size` | `24px`
|
||||
|
||||
### Filled Tonal Icon Button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/iconbutton/theming-filled-tonal.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-filled-tonal-icon-button-container-width: 80px;
|
||||
--md-filled-tonal-icon-button-container-height: 80px;
|
||||
--md-filled-tonal-icon-button-container-shape: 0px;
|
||||
--md-filled-tonal-icon-button-icon-size: 40px;
|
||||
--md-sys-color-secondary-container: #006A6A;
|
||||
}
|
||||
</style>
|
||||
<md-filled-tonal-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
```
|
||||
|
||||
### Outlined Icon Button tokens
|
||||
|
||||
Token | Default value
|
||||
-------------------------------------------- | ----------------------------
|
||||
`--md-outlined-icon-button-outline-color` | `--md-sys-color-outline`
|
||||
`--md-outlined-icon-button-outline-width` | `1px`
|
||||
`--md-outlined-icon-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-outlined-icon-button-container-width` | `40px`
|
||||
`--md-outlined-icon-button-container-height` | `40px`
|
||||
`--md-outlined-icon-button-icon-size` | `24px`
|
||||
|
||||
### Outlined Icon Button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||

|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-include "figures/iconbutton/theming-outlined.html" -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-outlined-icon-button-container-width: 80px;
|
||||
--md-outlined-icon-button-container-height: 80px;
|
||||
--md-outlined-icon-button-container-shape: 0px;
|
||||
--md-outlined-icon-button-icon-size: 40px;
|
||||
--md-outlined-icon-button-outline-width: 4px;
|
||||
--md-sys-color-outline: #006A6A;
|
||||
}
|
||||
</style>
|
||||
<md-outlined-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
```
|
||||
|
||||
<!-- auto-generated API docs start -->
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### MdIconButton <code><md-icon-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
|
||||
| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable).<br>Use this when an icon button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
|
||||
| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
|
||||
| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
|
||||
| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |
|
||||
| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |
|
||||
| `selected` | `selected` | `boolean` | `false` | Sets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no `slot="selected"` icon is provided. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
|
||||
| `name` | | `string` | `undefined` | |
|
||||
| `form` | | `HTMLFormElement` | `undefined` | |
|
||||
| `labels` | | `NodeList` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Events
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `input` | `InputEvent` | Yes | Yes | Dispatched when a toggle button toggles |
|
||||
| `change` | `Event` | Yes | No | Dispatched when a toggle button toggles |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdFilledIconButton <code><md-filled-icon-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
|
||||
| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable).<br>Use this when an icon button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
|
||||
| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
|
||||
| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
|
||||
| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |
|
||||
| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |
|
||||
| `selected` | `selected` | `boolean` | `false` | Sets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no `slot="selected"` icon is provided. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
|
||||
| `name` | | `string` | `undefined` | |
|
||||
| `form` | | `HTMLFormElement` | `undefined` | |
|
||||
| `labels` | | `NodeList` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Events
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `input` | `InputEvent` | Yes | Yes | Dispatched when a toggle button toggles |
|
||||
| `change` | `Event` | Yes | No | Dispatched when a toggle button toggles |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdFilledTonalIconButton <code><md-filled-tonal-icon-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
|
||||
| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable).<br>Use this when an icon button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
|
||||
| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
|
||||
| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
|
||||
| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |
|
||||
| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |
|
||||
| `selected` | `selected` | `boolean` | `false` | Sets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no `slot="selected"` icon is provided. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
|
||||
| `name` | | `string` | `undefined` | |
|
||||
| `form` | | `HTMLFormElement` | `undefined` | |
|
||||
| `labels` | | `NodeList` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Events
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `input` | `InputEvent` | Yes | Yes | Dispatched when a toggle button toggles |
|
||||
| `change` | `Event` | Yes | No | Dispatched when a toggle button toggles |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdOutlinedIconButton <code><md-outlined-icon-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
|
||||
| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable).<br>Use this when an icon button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
||||
| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
|
||||
| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
|
||||
| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
|
||||
| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |
|
||||
| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |
|
||||
| `selected` | `selected` | `boolean` | `false` | Sets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no `slot="selected"` icon is provided. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
|
||||
| `name` | | `string` | `undefined` | |
|
||||
| `form` | | `HTMLFormElement` | `undefined` | |
|
||||
| `labels` | | `NodeList` | `undefined` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
#### Events
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `input` | `InputEvent` | Yes | Yes | Dispatched when a toggle button toggles |
|
||||
| `change` | `Event` | Yes | No | Dispatched when a toggle button toggles |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
<!-- auto-generated API docs end -->
|
204
components-wiki/icon.md
Normal file
|
@ -0,0 +1,204 @@
|
|||
# Icon
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'dfreedm' reviewed: '2025-05-20' }
|
||||
tag: 'docType:reference'
|
||||
*-->
|
||||
|
||||
<!-- go/md-icon -->
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
[Icons](https://m3.material.io/styles/icons/overview)<!-- {.external} --> can be used to
|
||||
represent common actions. Material Symbols are a set of variable icon fonts
|
||||
created at seven weights across three different styles.
|
||||
|
||||

|
||||
|
||||
* [Design article](https://m3.material.io/styles/icons) <!-- {.external} -->
|
||||
* [API Documentation](#api)
|
||||
* [Source code](https://github.com/material-components/material-web/tree/main/icon)
|
||||
<!-- {.external} -->
|
||||
|
||||
## Usage
|
||||
|
||||
Icons can be specified by name, unicode code point, or have an `<svg>` child
|
||||
element.
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<md-icon>settings</md-icon>
|
||||
<md-icon></md-icon>
|
||||
<md-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M10 40V24H4L24 6l10 8.85V9h4v9.55L44 24h-6v16H26.5V28h-5v12Zm3-3h5.5V25h11v12H35V19.95l-11-10-11 10Zm5.5-12h11-11Zm1.25-5.5h8.5q0-1.65-1.275-2.725Q25.7 15.7 24 15.7q-1.7 0-2.975 1.075Q19.75 17.85 19.75 19.5Z"/></svg></md-icon>
|
||||
```
|
||||
|
||||
The full range of icons can be found on the
|
||||
[Material Symbols](https://fonts.google.com/icons)<!-- {.external} --> font page.
|
||||
|
||||
Material Symbols icons are available in three styles: **outlined**, **rounded**,
|
||||
and **sharp**.
|
||||
|
||||
In addition, Material Symbols have four adjustable stylistic variable font
|
||||
attributes called axes. An axis is a typographic term referring to the attribute
|
||||
of a symbol that can be altered to create visual variations.
|
||||
|
||||
Each style symbol contains four axes: **weight**, **fill**, **grade**, and
|
||||
**optical size**.
|
||||
|
||||
The `weight` and `optical size` attributes are handled automatically, but the
|
||||
`fill` and `grade` attributes are custom to the Material Symbols font, and must
|
||||
be set with the
|
||||
[`font-variation-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings)<!-- {.external} -->
|
||||
property.
|
||||
|
||||
### Outlined
|
||||
|
||||
Outlined symbols use stroke and fill attributes for a light, clean style that
|
||||
works well in dense UIs. The stroke weight of outlined icons can be adjusted to
|
||||
complement or contrast the weight of your typography.
|
||||
|
||||
Load the font with
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
|
||||
```
|
||||
|
||||
### Rounded
|
||||
|
||||

|
||||
|
||||
Rounded symbols use a corner radius that pairs well with brands that use heavier
|
||||
typography, curved logos, or circular elements to express their style.
|
||||
|
||||
Load the font with
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Rounded" rel="stylesheet">
|
||||
```
|
||||
|
||||
To use Rounded icons, set `--md-icon-font` to `'Material Symbols Rounded'`.
|
||||
|
||||
### Sharp
|
||||
|
||||

|
||||
|
||||
Sharp symbols display corners with straight edges, for a crisp style that
|
||||
remains legible even at smaller scales. These rectangular shapes can support
|
||||
brand styles that aren’t well-reflected by rounded shapes.
|
||||
|
||||
Load the font with
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Sharp" rel="stylesheet">
|
||||
```
|
||||
|
||||
To use Sharp icons, set `font-family` to `'Material Symbols Sharp'`.
|
||||
|
||||
### Fill
|
||||
|
||||

|
||||
|
||||
Filled Icons gives you the ability to transition from a more outlined style to a
|
||||
reversed or more filled style.
|
||||
|
||||
A fill attribute can be used to convey a state of transition, such as unfilled
|
||||
and filled states. Values range from `0` to `1`, with `1` being completely
|
||||
filled. Along with weight, fill is a primary attribute that impacts the overall
|
||||
look of a symbol.
|
||||
|
||||
All styles of Material Symbols can be filled by setting
|
||||
`font-variation-settings` to `'FILL' 1`.
|
||||
|
||||
## Accessibility
|
||||
|
||||
Icons are mostly intended to be used inside of other components that have
|
||||
accessibility settings.
|
||||
|
||||
If used on their own, Icons should be given an accessible name if they are
|
||||
focusable. If you use icons by name, they will be announced by screen readers
|
||||
without any extra steps.
|
||||
|
||||
If using codepoints, wrap the codepoint in a `<span>` with an
|
||||
[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
|
||||
attribute.
|
||||
|
||||
```html
|
||||
<md-icon tabindex="-1"><span aria-label="home"></span></md-icon>
|
||||
```
|
||||
|
||||
If using SVG icons, add an `aria-label` attribute to the SVG element.
|
||||
|
||||
```html
|
||||
<md-icon tabindex="-1"><svg aria-label="paper airplane" viewBox="0 0 48 48"><path d="M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z"/></svg></md-icon>
|
||||
```
|
||||
|
||||
## Theming
|
||||
|
||||
### Tokens
|
||||
|
||||
Token | Default value
|
||||
---------------- | -----------------------------
|
||||
`--md-icon-font` | `'Material Symbols Outlined'`
|
||||
`--md-icon-size` | `24px`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Example
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
md-icon {
|
||||
color: #006A6A;
|
||||
--md-icon-size: 48px;
|
||||
}
|
||||
.rounded {
|
||||
--md-icon-font: 'Material Symbols Rounded';
|
||||
}
|
||||
.sharp {
|
||||
--md-icon-font: 'Material Symbols Sharp';
|
||||
}
|
||||
md-icon[filled] {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h3>Outlined</h3>
|
||||
<span>
|
||||
<md-icon>settings</md-icon>
|
||||
<md-icon>check_box</md-icon>
|
||||
<md-icon>house</md-icon>
|
||||
<md-icon filled>settings</md-icon>
|
||||
<md-icon filled>check_box</md-icon>
|
||||
<md-icon filled>house</md-icon>
|
||||
</span>
|
||||
<h3>Rounded</h3>
|
||||
<span class="rounded">
|
||||
<md-icon>settings</md-icon>
|
||||
<md-icon>check_box</md-icon>
|
||||
<md-icon>house</md-icon>
|
||||
<md-icon filled>settings</md-icon>
|
||||
<md-icon filled>check_box</md-icon>
|
||||
<md-icon filled>house</md-icon>
|
||||
</span>
|
||||
<h3>Sharp</h3>
|
||||
<span class="sharp">
|
||||
<md-icon>settings</md-icon>
|
||||
<md-icon>check_box</md-icon>
|
||||
<md-icon>house</md-icon>
|
||||
<md-icon filled>settings</md-icon>
|
||||
<md-icon filled>check_box</md-icon>
|
||||
<md-icon filled>house</md-icon>
|
||||
</span>
|
||||
```
|
||||
|
||||
<!-- auto-generated API docs start -->
|
||||
<!-- auto-generated API docs end -->
|
BIN
components-wiki/images/button/hero.webp
Normal file
After Width: | Height: | Size: 31 KiB |
BIN
components-wiki/images/button/theming-elevated-button.webp
Normal file
After Width: | Height: | Size: 1.9 KiB |
BIN
components-wiki/images/button/theming-filled-button.webp
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
components-wiki/images/button/theming-filled-tonal-button.webp
Normal file
After Width: | Height: | Size: 848 B |
BIN
components-wiki/images/button/theming-outlined-button.webp
Normal file
After Width: | Height: | Size: 1.6 KiB |
BIN
components-wiki/images/button/theming-text-button.webp
Normal file
After Width: | Height: | Size: 1,002 B |
BIN
components-wiki/images/button/types.webp
Normal file
After Width: | Height: | Size: 13 KiB |
BIN
components-wiki/images/button/usage-elevated-button.webp
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
components-wiki/images/button/usage-filled-button.webp
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
components-wiki/images/button/usage-filled-tonal-button.webp
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
components-wiki/images/button/usage-icon.webp
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
components-wiki/images/button/usage-outlined-button.webp
Normal file
After Width: | Height: | Size: 2.3 KiB |
BIN
components-wiki/images/button/usage-text-button.webp
Normal file
After Width: | Height: | Size: 864 B |
BIN
components-wiki/images/button/usage.webp
Normal file
After Width: | Height: | Size: 4 KiB |
BIN
components-wiki/images/checkbox/hero.webp
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
components-wiki/images/checkbox/theming.webp
Normal file
After Width: | Height: | Size: 726 B |
BIN
components-wiki/images/checkbox/usage-label.webp
Normal file
After Width: | Height: | Size: 4.7 KiB |
BIN
components-wiki/images/checkbox/usage.webp
Normal file
After Width: | Height: | Size: 1,018 B |
BIN
components-wiki/images/chips/hero.webp
Normal file
After Width: | Height: | Size: 44 KiB |
BIN
components-wiki/images/dialog/hero.webp
Normal file
After Width: | Height: | Size: 30 KiB |
BIN
components-wiki/images/divider/hero.webp
Normal file
After Width: | Height: | Size: 37 KiB |
BIN
components-wiki/images/divider/theming.webp
Normal file
After Width: | Height: | Size: 3.7 KiB |
BIN
components-wiki/images/divider/usage-inset-start.webp
Normal file
After Width: | Height: | Size: 3.2 KiB |
BIN
components-wiki/images/divider/usage-inset.webp
Normal file
After Width: | Height: | Size: 3.2 KiB |
BIN
components-wiki/images/divider/usage.webp
Normal file
After Width: | Height: | Size: 3.7 KiB |
BIN
components-wiki/images/elevation/hero.webp
Normal file
After Width: | Height: | Size: 13 KiB |
BIN
components-wiki/images/elevation/theming.webp
Normal file
After Width: | Height: | Size: 728 B |
BIN
components-wiki/images/elevation/usage-animation.gif
Normal file
After Width: | Height: | Size: 76 KiB |
BIN
components-wiki/images/elevation/usage.webp
Normal file
After Width: | Height: | Size: 606 B |
BIN
components-wiki/images/fab/extended-fabs.webp
Normal file
After Width: | Height: | Size: 5.4 KiB |
BIN
components-wiki/images/fab/fabs.webp
Normal file
After Width: | Height: | Size: 23 KiB |
BIN
components-wiki/images/fab/hero.webp
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
components-wiki/images/fab/small-fabs.webp
Normal file
After Width: | Height: | Size: 3.7 KiB |
BIN
components-wiki/images/fab/theming-branded.webp
Normal file
After Width: | Height: | Size: 2 KiB |
BIN
components-wiki/images/fab/theming-extended.webp
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
components-wiki/images/fab/theming-fab.webp
Normal file
After Width: | Height: | Size: 792 B |