按钮
按钮用来触发一个操作，例如提交表单、确认，或打开一个链接。
按要使用的外观分别引入。一个操作区域里只放一个实心按钮作为主操作。
| 标签 | 何时使用 |
|---|---|
<md-filled-button> | 主操作 |
<md-filled-tonal-button> | 比描边更需要强调的次主操作 |
<md-elevated-button> | 需要和有图案的背景分开时 |
<md-outlined-button> | 次操作 |
<md-text-button> | 最低优先级的操作 |
import 'genv4/button/filled-button.js';
import 'genv4/button/filled-tonal-button.js';
import 'genv4/button/elevated-button.js';
import 'genv4/button/outlined-button.js';
import 'genv4/button/text-button.js';五种类型
Link to “五种类型”<md-filled-button>实心</md-filled-button>
<md-filled-tonal-button>浅色实心</md-filled-tonal-button>
<md-elevated-button>凸起</md-elevated-button>
<md-outlined-button>描边</md-outlined-button>
<md-text-button>文字</md-text-button><md-filled-button has-icon>
<md-icon slot="icon">upload</md-icon>
上传
</md-filled-button>作为链接
Link to “作为链接”<md-filled-button
href="https://github.com/bingomaha-creator/GenV4"
target="_blank">
仓库
</md-filled-button>禁用后不可聚焦。软禁用仍可聚焦，适合工具栏里需要被发现的不可用操作。
<md-filled-button disabled>禁用</md-filled-button>
<md-filled-button soft-disabled>软禁用</md-filled-button>五种按钮的属性相同，下表适用于 <md-filled-button>、<md-filled-tonal-button>、<md-elevated-button>、<md-outlined-button>、<md-text-button>。
| 属性 | HTML 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
softDisabled | soft-disabled | boolean | false | 禁用后仍可聚焦。需要让不可用的按钮仍能被键盘发现时使用。 |
href | href | string | '' | 设置后按钮变成链接，指向该 URL。 |
download | download | string | '' | 作为链接时，下载文件使用的文件名。不设置则由浏览器决定。 |
target | target | string | '' | 作为链接时，在何处打开 href。常用 _blank 在新标签页打开。 |
rel | rel | string | '' | 作为链接时，写到内部 a 元素的 rel。 |
referrerPolicy | referrerpolicy | string | '' | 作为链接时，写到内部 a 元素的 referrerpolicy。 |
trailingIcon | trailing-icon | boolean | false | 把图标放到文字后面。链接按钮不能用末尾图标。 |
hasIcon | has-icon | boolean | false | 是否显示图标。 |
name | name | string | undefined | The HTML name to use in form submission. |
disabled | disabled | boolean | undefined | Whether or not the element is disabled. |
type | type | string | 'submit' | A string indicating the form submission behavior of the element. - submit: The element submits the form. This is the default value if the attribute is not specified, or if it is dynamically changed to an empty or invalid value. - reset: The element resets the form. - button: The element does nothing. |
value | value | string | '' | The value of the button. When combined with a name, the submitting button's name/value will be added to the form. |
form | HTMLFormElement | undefined | The associated form element with which this element's value will submit. | |
labels | NodeList | undefined | The labels this element is associated with. |
五种按钮共用这些插槽。
| 名称 | 说明 |
|---|---|
| 默认 | 按钮文字 |
icon | 图标。显示时加上 has-icon。trailing-icon 把图标放到文字后面。链接按钮不能用末尾图标。 |
用组件 CSS 变量覆盖。下面只列出 Sass 里标记为支持的变量。
凸起按钮 <md-elevated-button>
Link to “凸起按钮 <md-elevated-button>” | 变量 | 默认值 |
|---|---|
--md-elevated-button-container-color | --md-sys-color-surface-container-low |
--md-elevated-button-container-elevation | --md-sys-elevation-level1 |
--md-elevated-button-container-height | 40px |
--md-elevated-button-container-shadow-color | --md-sys-color-shadow |
--md-elevated-button-container-shape | --md-sys-shape-corner-full |
--md-elevated-button-container-shape-end-end | var(--md-elevated-button-container-shape) |
--md-elevated-button-container-shape-end-start | var(--md-elevated-button-container-shape) |
--md-elevated-button-container-shape-start-end | var(--md-elevated-button-container-shape) |
--md-elevated-button-container-shape-start-start | var(--md-elevated-button-container-shape) |
--md-elevated-button-disabled-container-color | --md-sys-color-on-surface |
--md-elevated-button-disabled-container-elevation | --md-sys-elevation-level0 |
--md-elevated-button-disabled-container-opacity | 0.12 |
--md-elevated-button-disabled-icon-color | --md-sys-color-on-surface |
--md-elevated-button-disabled-icon-opacity | 0.38 |
--md-elevated-button-disabled-label-text-color | --md-sys-color-on-surface |
--md-elevated-button-disabled-label-text-opacity | 0.38 |
--md-elevated-button-focus-container-elevation | --md-sys-elevation-level1 |
--md-elevated-button-focus-icon-color | --md-sys-color-primary |
--md-elevated-button-focus-label-text-color | --md-sys-color-primary |
--md-elevated-button-hover-container-elevation | --md-sys-elevation-level2 |
--md-elevated-button-hover-icon-color | --md-sys-color-primary |
--md-elevated-button-hover-label-text-color | --md-sys-color-primary |
--md-elevated-button-hover-state-layer-color | --md-sys-color-primary |
--md-elevated-button-hover-state-layer-opacity | --md-sys-state-hover-state-layer-opacity |
--md-elevated-button-icon-color | --md-sys-color-primary |
--md-elevated-button-icon-size | 18px |
--md-elevated-button-label-text-color | --md-sys-color-primary |
--md-elevated-button-label-text-font | --md-sys-typescale-label-large-font |
--md-elevated-button-label-text-line-height | --md-sys-typescale-label-large-line-height |
--md-elevated-button-label-text-size | --md-sys-typescale-label-large-size |
--md-elevated-button-label-text-weight | --md-sys-typescale-label-large-weight |
--md-elevated-button-leading-space | 24px |
--md-elevated-button-pressed-container-elevation | --md-sys-elevation-level1 |
--md-elevated-button-pressed-icon-color | --md-sys-color-primary |
--md-elevated-button-pressed-label-text-color | --md-sys-color-primary |
--md-elevated-button-pressed-state-layer-color | --md-sys-color-primary |
--md-elevated-button-pressed-state-layer-opacity | --md-sys-state-pressed-state-layer-opacity |
--md-elevated-button-trailing-space | 24px |
--md-elevated-button-with-leading-icon-leading-space | 16px |
--md-elevated-button-with-leading-icon-trailing-space | 24px |
--md-elevated-button-with-trailing-icon-leading-space | 24px |
--md-elevated-button-with-trailing-icon-trailing-space | 16px |
实心按钮 <md-filled-button>
Link to “实心按钮 <md-filled-button>” | 变量 | 默认值 |
|---|---|
--md-filled-button-container-color | --md-sys-color-primary |
--md-filled-button-container-elevation | --md-sys-elevation-level0 |
--md-filled-button-container-height | 40px |
--md-filled-button-container-shadow-color | --md-sys-color-shadow |
--md-filled-button-container-shape | --md-sys-shape-corner-full |
--md-filled-button-container-shape-end-end | var(--md-filled-button-container-shape) |
--md-filled-button-container-shape-end-start | var(--md-filled-button-container-shape) |
--md-filled-button-container-shape-start-end | var(--md-filled-button-container-shape) |
--md-filled-button-container-shape-start-start | var(--md-filled-button-container-shape) |
--md-filled-button-disabled-container-color | --md-sys-color-on-surface |
--md-filled-button-disabled-container-elevation | --md-sys-elevation-level0 |
--md-filled-button-disabled-container-opacity | 0.12 |
--md-filled-button-disabled-icon-color | --md-sys-color-on-surface |
--md-filled-button-disabled-icon-opacity | 0.38 |
--md-filled-button-disabled-label-text-color | --md-sys-color-on-surface |
--md-filled-button-disabled-label-text-opacity | 0.38 |
--md-filled-button-focus-container-elevation | --md-sys-elevation-level0 |
--md-filled-button-focus-icon-color | --md-sys-color-on-primary |
--md-filled-button-focus-label-text-color | --md-sys-color-on-primary |
--md-filled-button-hover-container-elevation | --md-sys-elevation-level1 |
--md-filled-button-hover-icon-color | --md-sys-color-on-primary |
--md-filled-button-hover-label-text-color | --md-sys-color-on-primary |
--md-filled-button-hover-state-layer-color | --md-sys-color-on-primary |
--md-filled-button-hover-state-layer-opacity | --md-sys-state-hover-state-layer-opacity |
--md-filled-button-icon-color | --md-sys-color-on-primary |
--md-filled-button-icon-size | 18px |
--md-filled-button-label-text-color | --md-sys-color-on-primary |
--md-filled-button-label-text-font | --md-sys-typescale-label-large-font |
--md-filled-button-label-text-line-height | --md-sys-typescale-label-large-line-height |
--md-filled-button-label-text-size | --md-sys-typescale-label-large-size |
--md-filled-button-label-text-weight | --md-sys-typescale-label-large-weight |
--md-filled-button-leading-space | 24px |
--md-filled-button-pressed-container-elevation | --md-sys-elevation-level0 |
--md-filled-button-pressed-icon-color | --md-sys-color-on-primary |
--md-filled-button-pressed-label-text-color | --md-sys-color-on-primary |
--md-filled-button-pressed-state-layer-color | --md-sys-color-on-primary |
--md-filled-button-pressed-state-layer-opacity | --md-sys-state-pressed-state-layer-opacity |
--md-filled-button-trailing-space | 24px |
--md-filled-button-with-leading-icon-leading-space | 16px |
--md-filled-button-with-leading-icon-trailing-space | 24px |
--md-filled-button-with-trailing-icon-leading-space | 24px |
--md-filled-button-with-trailing-icon-trailing-space | 16px |
浅色实心按钮 <md-filled-tonal-button>
Link to “浅色实心按钮 <md-filled-tonal-button>” | 变量 | 默认值 |
|---|---|
--md-filled-tonal-button-container-color | --md-sys-color-secondary-container |
--md-filled-tonal-button-container-elevation | --md-sys-elevation-level0 |
--md-filled-tonal-button-container-height | 40px |
--md-filled-tonal-button-container-shadow-color | --md-sys-color-shadow |
--md-filled-tonal-button-container-shape | --md-sys-shape-corner-full |
--md-filled-tonal-button-container-shape-end-end | var(--md-filled-tonal-button-container-shape) |
--md-filled-tonal-button-container-shape-end-start | var(--md-filled-tonal-button-container-shape) |
--md-filled-tonal-button-container-shape-start-end | var(--md-filled-tonal-button-container-shape) |
--md-filled-tonal-button-container-shape-start-start | var(--md-filled-tonal-button-container-shape) |
--md-filled-tonal-button-disabled-container-color | --md-sys-color-on-surface |
--md-filled-tonal-button-disabled-container-elevation | --md-sys-elevation-level0 |
--md-filled-tonal-button-disabled-container-opacity | 0.12 |
--md-filled-tonal-button-disabled-icon-color | --md-sys-color-on-surface |
--md-filled-tonal-button-disabled-icon-opacity | 0.38 |
--md-filled-tonal-button-disabled-label-text-color | --md-sys-color-on-surface |
--md-filled-tonal-button-disabled-label-text-opacity | 0.38 |
--md-filled-tonal-button-focus-container-elevation | --md-sys-elevation-level0 |
--md-filled-tonal-button-focus-icon-color | --md-sys-color-on-secondary-container |
--md-filled-tonal-button-focus-label-text-color | --md-sys-color-on-secondary-container |
--md-filled-tonal-button-hover-container-elevation | --md-sys-elevation-level1 |
--md-filled-tonal-button-hover-icon-color | --md-sys-color-on-secondary-container |
--md-filled-tonal-button-hover-label-text-color | --md-sys-color-on-secondary-container |
--md-filled-tonal-button-hover-state-layer-color | --md-sys-color-on-secondary-container |
--md-filled-tonal-button-hover-state-layer-opacity | --md-sys-state-hover-state-layer-opacity |
--md-filled-tonal-button-icon-color | --md-sys-color-on-secondary-container |
--md-filled-tonal-button-icon-size | 18px |
--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 |
--md-filled-tonal-button-label-text-line-height | --md-sys-typescale-label-large-line-height |
--md-filled-tonal-button-label-text-size | --md-sys-typescale-label-large-size |
--md-filled-tonal-button-label-text-weight | --md-sys-typescale-label-large-weight |
--md-filled-tonal-button-leading-space | 24px |
--md-filled-tonal-button-pressed-container-elevation | --md-sys-elevation-level0 |
--md-filled-tonal-button-pressed-icon-color | --md-sys-color-on-secondary-container |
--md-filled-tonal-button-pressed-label-text-color | --md-sys-color-on-secondary-container |
--md-filled-tonal-button-pressed-state-layer-color | --md-sys-color-on-secondary-container |
--md-filled-tonal-button-pressed-state-layer-opacity | --md-sys-state-pressed-state-layer-opacity |
--md-filled-tonal-button-trailing-space | 24px |
--md-filled-tonal-button-with-leading-icon-leading-space | 16px |
--md-filled-tonal-button-with-leading-icon-trailing-space | 24px |
--md-filled-tonal-button-with-trailing-icon-leading-space | 24px |
--md-filled-tonal-button-with-trailing-icon-trailing-space | 16px |
描边按钮 <md-outlined-button>
Link to “描边按钮 <md-outlined-button>” | 变量 | 默认值 |
|---|---|
--md-outlined-button-container-height | 40px |
--md-outlined-button-container-shape | --md-sys-shape-corner-full |
--md-outlined-button-container-shape-end-end | var(--md-outlined-button-container-shape) |
--md-outlined-button-container-shape-end-start | var(--md-outlined-button-container-shape) |
--md-outlined-button-container-shape-start-end | var(--md-outlined-button-container-shape) |
--md-outlined-button-container-shape-start-start | var(--md-outlined-button-container-shape) |
--md-outlined-button-disabled-icon-color | --md-sys-color-on-surface |
--md-outlined-button-disabled-icon-opacity | 0.38 |
--md-outlined-button-disabled-label-text-color | --md-sys-color-on-surface |
--md-outlined-button-disabled-label-text-opacity | 0.38 |
--md-outlined-button-disabled-outline-color | --md-sys-color-on-surface |
--md-outlined-button-disabled-outline-opacity | 0.12 |
--md-outlined-button-focus-icon-color | --md-sys-color-primary |
--md-outlined-button-focus-label-text-color | --md-sys-color-primary |
--md-outlined-button-hover-icon-color | --md-sys-color-primary |
--md-outlined-button-hover-label-text-color | --md-sys-color-primary |
--md-outlined-button-hover-state-layer-color | --md-sys-color-primary |
--md-outlined-button-hover-state-layer-opacity | --md-sys-state-hover-state-layer-opacity |
--md-outlined-button-icon-color | --md-sys-color-primary |
--md-outlined-button-icon-size | 18px |
--md-outlined-button-label-text-color | --md-sys-color-primary |
--md-outlined-button-label-text-font | --md-sys-typescale-label-large-font |
--md-outlined-button-label-text-line-height | --md-sys-typescale-label-large-line-height |
--md-outlined-button-label-text-size | --md-sys-typescale-label-large-size |
--md-outlined-button-label-text-weight | --md-sys-typescale-label-large-weight |
--md-outlined-button-leading-space | 24px |
--md-outlined-button-outline-color | --md-sys-color-outline |
--md-outlined-button-outline-width | 1px |
--md-outlined-button-pressed-icon-color | --md-sys-color-primary |
--md-outlined-button-pressed-label-text-color | --md-sys-color-primary |
--md-outlined-button-pressed-outline-color | --md-sys-color-outline |
--md-outlined-button-pressed-state-layer-color | --md-sys-color-primary |
--md-outlined-button-pressed-state-layer-opacity | --md-sys-state-pressed-state-layer-opacity |
--md-outlined-button-trailing-space | 24px |
--md-outlined-button-with-leading-icon-leading-space | 16px |
--md-outlined-button-with-leading-icon-trailing-space | 24px |
--md-outlined-button-with-trailing-icon-leading-space | 24px |
--md-outlined-button-with-trailing-icon-trailing-space | 16px |
文字按钮 <md-text-button>
Link to “文字按钮 <md-text-button>” | 变量 | 默认值 |
|---|---|
--md-text-button-container-height | 40px |
--md-text-button-container-shape | --md-sys-shape-corner-full |
--md-text-button-container-shape-end-end | var(--md-text-button-container-shape) |
--md-text-button-container-shape-end-start | var(--md-text-button-container-shape) |
--md-text-button-container-shape-start-end | var(--md-text-button-container-shape) |
--md-text-button-container-shape-start-start | var(--md-text-button-container-shape) |
--md-text-button-disabled-icon-color | --md-sys-color-on-surface |
--md-text-button-disabled-icon-opacity | 0.38 |
--md-text-button-disabled-label-text-color | --md-sys-color-on-surface |
--md-text-button-disabled-label-text-opacity | 0.38 |
--md-text-button-focus-icon-color | --md-sys-color-primary |
--md-text-button-focus-label-text-color | --md-sys-color-primary |
--md-text-button-hover-icon-color | --md-sys-color-primary |
--md-text-button-hover-label-text-color | --md-sys-color-primary |
--md-text-button-hover-state-layer-color | --md-sys-color-primary |
--md-text-button-hover-state-layer-opacity | --md-sys-state-hover-state-layer-opacity |
--md-text-button-icon-color | --md-sys-color-primary |
--md-text-button-icon-size | 18px |
--md-text-button-label-text-color | --md-sys-color-primary |
--md-text-button-label-text-font | --md-sys-typescale-label-large-font |
--md-text-button-label-text-line-height | --md-sys-typescale-label-large-line-height |
--md-text-button-label-text-size | --md-sys-typescale-label-large-size |
--md-text-button-label-text-weight | --md-sys-typescale-label-large-weight |
--md-text-button-leading-space | 12px |
--md-text-button-pressed-icon-color | --md-sys-color-primary |
--md-text-button-pressed-label-text-color | --md-sys-color-primary |
--md-text-button-pressed-state-layer-color | --md-sys-color-primary |
--md-text-button-pressed-state-layer-opacity | --md-sys-state-pressed-state-layer-opacity |
--md-text-button-trailing-space | 12px |
--md-text-button-with-leading-icon-leading-space | 12px |
--md-text-button-with-leading-icon-trailing-space | 16px |
--md-text-button-with-trailing-icon-leading-space | 16px |
--md-text-button-with-trailing-icon-trailing-space | 12px |