mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
Merge pull request #4502 from material-components:fab-docs
PiperOrigin-RevId: 547954160
This commit is contained in:
Copybara-Service
commit
6116ed8f47
@ -75,7 +75,7 @@ module.exports = function (eleventyConfig) {
|
||||
|
||||
// Add a TOC plugin (implementation is TODO for now)
|
||||
eleventyConfig.addPlugin(pluginTOC, {
|
||||
tags: ['h2', 'h3'],
|
||||
tags: ['h2', 'h3', 'h4'],
|
||||
wrapper: 'div',
|
||||
});
|
||||
|
||||
|
||||
8
catalog/src/hydration-entrypoints/components/fab.ts
Normal file
8
catalog/src/hydration-entrypoints/components/fab.ts
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2023 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import '@material/web/fab/fab.js';
|
||||
import '@material/web/fab/branded-fab.js';
|
||||
@ -28,3 +28,5 @@ import '@material/web/button/tonal-button.js';
|
||||
import '@material/web/button/outlined-button.js';
|
||||
import '@material/web/button/text-button.js';
|
||||
import '@material/web/progress/linear-progress.js';
|
||||
import '@material/web/fab/fab.js';
|
||||
import '@material/web/fab/branded-fab.js';
|
||||
|
||||
474
docs/components/fab.md
Normal file
474
docs/components/fab.md
Normal file
@ -0,0 +1,474 @@
|
||||
<!-- 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)
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'emarquez' reviewed: '2023-06-15' }
|
||||
tag: 'docType:reference'
|
||||
*-->
|
||||
|
||||
<!-- go/md-fab -->
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
<!-- github-only-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
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-end -->
|
||||
<!-- catalog-include "figures/fab/fabs.html" -->
|
||||
|
||||
1. [FAB](#fab-1)
|
||||
2. [Small FAB](#small)
|
||||
3. [Large FAB](#large)
|
||||
|
||||
### Extended FAB
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-end -->
|
||||
<!-- catalog-include "figures/fab/extended-fabs.html" -->
|
||||
|
||||
1. [Extended FAB with both icon and label text](#extended-fab-1)
|
||||
2. [Extended FAB without icon](#without-icon)
|
||||
|
||||
## Usage
|
||||
|
||||
FABs should have an icon, such as a font `md-icon`, an `svg`, or an `img`.
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-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.
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-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" has-icon>
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
```
|
||||
|
||||
## FAB
|
||||
|
||||
FABs should display a clear and understandable icon.
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-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.
|
||||
|
||||
*SSR note:* extended FABs with icons should add the `has-icon` attribute to
|
||||
avoid a flash of unstyled content. Otherwise, the client will automatically
|
||||
detect if an icon is slotted into the element, but that event is not fired upon
|
||||
hydration of a SSRd declarative shadow DOM template.
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-end -->
|
||||
<!-- catalog-include "figures/fab/usage-extended.html" -->
|
||||
|
||||
```html
|
||||
<md-fab label="Edit" has-icon>
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
```
|
||||
|
||||
#### Without icon
|
||||
|
||||
Extended FABs are the only FABs that can be used without an icon.
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-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".
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-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.
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-end -->
|
||||
<!-- catalog-include "figures/fab/usage-sizes.html" -->
|
||||
|
||||
```html
|
||||
<md-fab size="small" reduced-touch-target 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
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
<!-- go/md-branded-fab -->
|
||||
|
||||
<!-- github-only-end -->
|
||||
|
||||
Branded FABs use a brightly colored logo for their icon. Unlike [FAB](#fab),
|
||||
branded FABs do not have color variants.
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-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.
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-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.
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-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.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` | `16px`
|
||||
`--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
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-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` | `12px`
|
||||
`--md-fab-small-icon-size` | `24px`
|
||||
`--md-fab-large-container-shape` | `28px`
|
||||
`--md-fab-large-icon-size` | `36px`
|
||||
|
||||
#### Extended FAB tokens
|
||||
|
||||
Token | Default value
|
||||
-------------------------- | -------------------------------
|
||||
`--md-fab-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
||||
|
||||
#### Extended FAB example
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-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" has-icon>
|
||||
<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` | `16px`
|
||||
`--md-fab-branded-icon-size` | `36px`
|
||||
`--md-fab-branded-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-fab-branded.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Branded FAB example
|
||||
|
||||
<!-- github-only-start -->
|
||||
|
||||
|
||||
|
||||
<!-- github-only-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>
|
||||
```
|
||||
25
docs/components/figures/fab/extended-fabs.html
Normal file
25
docs/components/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" has-icon>
|
||||
<md-icon slot="icon" aria-hidden="true">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
docs/components/figures/fab/fabs.html
Normal file
65
docs/components/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
docs/components/figures/fab/theming-branded.html
Normal file
33
docs/components/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-type: 500 0.875rem/1.25rem 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
docs/components/figures/fab/theming-extended.html
Normal file
17
docs/components/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-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-fab-icon-size: 36px;
|
||||
--md-fab-container-shape: 0px;
|
||||
}
|
||||
</style>
|
||||
<md-fab label="Edit" has-icon>
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
</figure>
|
||||
</div>
|
||||
21
docs/components/figures/fab/theming-fab.html
Normal file
21
docs/components/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
docs/components/figures/fab/usage-branded-extended.html
Normal file
15
docs/components/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
docs/components/figures/fab/usage-branded-sizes.html
Normal file
25
docs/components/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
docs/components/figures/fab/usage-branded.html
Normal file
15
docs/components/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
docs/components/figures/fab/usage-color.html
Normal file
15
docs/components/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
docs/components/figures/fab/usage-extended.html
Normal file
9
docs/components/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" has-icon>
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
</figure>
|
||||
</div>
|
||||
9
docs/components/figures/fab/usage-fab.html
Normal file
9
docs/components/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
docs/components/figures/fab/usage-lowered.html
Normal file
9
docs/components/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
docs/components/figures/fab/usage-sizes.html
Normal file
19
docs/components/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" reduced-touch-target 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
docs/components/figures/fab/usage-without-icon.html
Normal file
7
docs/components/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>
|
||||
BIN
docs/components/images/fab/extended-fabs.webp
Normal file
BIN
docs/components/images/fab/extended-fabs.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
docs/components/images/fab/fabs.webp
Normal file
BIN
docs/components/images/fab/fabs.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
docs/components/images/fab/hero.webp
Normal file
BIN
docs/components/images/fab/hero.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
docs/components/images/fab/small-fabs.webp
Normal file
BIN
docs/components/images/fab/small-fabs.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
docs/components/images/fab/theming-branded.webp
Normal file
BIN
docs/components/images/fab/theming-branded.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
docs/components/images/fab/theming-extended.webp
Normal file
BIN
docs/components/images/fab/theming-extended.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
docs/components/images/fab/theming-fab.webp
Normal file
BIN
docs/components/images/fab/theming-fab.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 792 B |
BIN
docs/components/images/fab/usage-branded-extended.webp
Normal file
BIN
docs/components/images/fab/usage-branded-extended.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
docs/components/images/fab/usage-branded-sizes.webp
Normal file
BIN
docs/components/images/fab/usage-branded-sizes.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
docs/components/images/fab/usage-branded.webp
Normal file
BIN
docs/components/images/fab/usage-branded.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
docs/components/images/fab/usage-color.webp
Normal file
BIN
docs/components/images/fab/usage-color.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
docs/components/images/fab/usage-extended.webp
Normal file
BIN
docs/components/images/fab/usage-extended.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
docs/components/images/fab/usage-fab.webp
Normal file
BIN
docs/components/images/fab/usage-fab.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
docs/components/images/fab/usage-lowered.webp
Normal file
BIN
docs/components/images/fab/usage-lowered.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
docs/components/images/fab/usage-sizes.webp
Normal file
BIN
docs/components/images/fab/usage-sizes.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
docs/components/images/fab/usage-without-icon.webp
Normal file
BIN
docs/components/images/fab/usage-without-icon.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Loading…
Reference in New Issue
Block a user