1. 引入
  2. 示例
    1. 四种类型
    2. 切换
    3. 作为链接
    4. 禁用后仍可聚焦
  3. API
    1. 属性
    2. 事件
    3. 插槽
  4. 主题
    1. 图标按钮 <md-icon-button>
    2. 实心图标按钮 <md-filled-icon-button>
    3. 浅色实心图标按钮 <md-filled-tonal-icon-button>
    4. 描边图标按钮 <md-outlined-icon-button>

图标按钮

图标按钮用来放一个图标操作，例如打开菜单、切换状态，或跳转到链接。

引入

Link to “引入”

四种外观的属性相同。

标签何时使用
<md-icon-button>无底色，优先级最低
<md-filled-icon-button>实心
<md-filled-tonal-icon-button>浅色实心
<md-outlined-icon-button>描边
import 'genv4/iconbutton/icon-button.js';
import 'genv4/iconbutton/filled-icon-button.js';
import 'genv4/iconbutton/filled-tonal-icon-button.js';
import 'genv4/iconbutton/outlined-icon-button.js';

示例

Link to “示例”

四种类型

Link to “四种类型”
menuchecksearchclose
<md-icon-button aria-label="菜单">
  <md-icon>menu</md-icon>
</md-icon-button>
<md-filled-icon-button aria-label="确认">
  <md-icon>check</md-icon>
</md-filled-icon-button>
<md-filled-tonal-icon-button aria-label="搜索">
  <md-icon>search</md-icon>
</md-filled-tonal-icon-button>
<md-outlined-icon-button aria-label="关闭">
  <md-icon>close</md-icon>
</md-outlined-icon-button>

切换

Link to “切换”

加上 toggle 后可以在两个图标之间切换。未选中用默认插槽，选中用 slot="selected"。

closecheck
<md-icon-button toggle aria-label="未选中" aria-label-selected="已选中">
  <md-icon>close</md-icon>
  <md-icon slot="selected">check</md-icon>
</md-icon-button>

作为链接

Link to “作为链接”
open_in_new
<md-icon-button
  href="https://github.com/CTOO-UXD/Web-GenV4"
  target="_blank"
  aria-label="仓库">
  <md-icon>open_in_new</md-icon>
</md-icon-button>

禁用后仍可聚焦

Link to “禁用后仍可聚焦”
content_copycutcontent_paste
<md-icon-button aria-label="复制">
  <md-icon>content_copy</md-icon>
</md-icon-button>
<md-icon-button aria-label="剪切">
  <md-icon>cut</md-icon>
</md-icon-button>
<md-icon-button aria-label="粘贴" soft-disabled>
  <md-icon>content_paste</md-icon>
</md-icon-button>

API

Link to “API”

四种图标按钮的属性相同，下表适用于 <md-icon-button>、<md-filled-icon-button>、<md-filled-tonal-icon-button>、<md-outlined-icon-button>。

属性

Link to “属性”
属性HTML 属性类型默认值说明
softDisabledsoft-disabledbooleanfalse禁用后仍可聚焦。需要让不可用的按钮仍能被键盘发现时使用。
flipIconInRtlflip-icon-in-rtlbooleanfalse从右向左排版时翻转图标。
hrefhrefstring''设置后按钮变成链接，指向该 URL。
downloaddownloadstring''作为链接时，下载文件使用的文件名。不设置则由浏览器决定。
targettargetstring''作为链接时，在何处打开 href。常用 _blank 在新标签页打开。
relrelstring''作为链接时，写到内部 a 元素的 rel。
referrerPolicyreferrerpolicystring''作为链接时，写到内部 a 元素的 referrerpolicy。
ariaLabelSelectedaria-label-selectedstring''可切换且已选中时使用的无障碍名称。
toggletogglebooleanfalse开启后可以在选中和未选中之间切换。
selectedselectedbooleanfalse是否选中。未选中显示默认图标，选中显示 slot="selected" 里的图标。没有选中图标时继续显示默认图标。
namenamestringundefinedThe HTML name to use in form submission.
disableddisabledbooleanundefinedWhether or not the element is disabled.
typetypestring'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.
valuevaluestring''The value of the button. When combined with a name, the submitting button's name/value will be added to the form.
formHTMLFormElementundefinedThe associated form element with which this element's value will submit.
labelsNodeListundefinedThe labels this element is associated with.

事件

Link to “事件”
EventTypeBubblesComposedDescription
inputInputEventYesYesDispatched when a toggle button toggles
changeEventYesNoDispatched when a toggle button toggles

插槽

Link to “插槽”

四种图标按钮共用这些插槽。

名称说明
默认未选中时的图标
selected选中时的图标。不写就继续用默认插槽

主题

Link to “主题”

用组件 CSS 变量覆盖。下面只列出 Sass 里标记为支持的变量。

图标按钮 <md-icon-button>

Link to “图标按钮 <md-icon-button>”
变量默认值
--md-icon-button-disabled-icon-color--md-sys-color-on-surface
--md-icon-button-disabled-icon-opacity0.38
--md-icon-button-focus-icon-color--md-sys-color-on-surface-variant
--md-icon-button-hover-icon-color--md-sys-color-on-surface-variant
--md-icon-button-hover-state-layer-color--md-sys-color-on-surface-variant
--md-icon-button-hover-state-layer-opacity--md-sys-state-hover-state-layer-opacity
--md-icon-button-icon-color--md-sys-color-on-surface-variant
--md-icon-button-icon-size24px
--md-icon-button-pressed-icon-color--md-sys-color-on-surface-variant
--md-icon-button-pressed-state-layer-color--md-sys-color-on-surface-variant
--md-icon-button-pressed-state-layer-opacity--md-sys-state-pressed-state-layer-opacity
--md-icon-button-selected-focus-icon-color--md-sys-color-primary
--md-icon-button-selected-hover-icon-color--md-sys-color-primary
--md-icon-button-selected-hover-state-layer-color--md-sys-color-primary
--md-icon-button-selected-hover-state-layer-opacity--md-sys-state-hover-state-layer-opacity
--md-icon-button-selected-icon-color--md-sys-color-primary
--md-icon-button-selected-pressed-icon-color--md-sys-color-primary
--md-icon-button-selected-pressed-state-layer-color--md-sys-color-primary
--md-icon-button-selected-pressed-state-layer-opacity--md-sys-state-pressed-state-layer-opacity
--md-icon-button-state-layer-height40px
--md-icon-button-state-layer-shape--md-sys-shape-corner-full
--md-icon-button-state-layer-width40px

实心图标按钮 <md-filled-icon-button>

Link to “实心图标按钮 <md-filled-icon-button>”
变量默认值
--md-filled-icon-button-container-color--md-sys-color-primary
--md-filled-icon-button-container-height40px
--md-filled-icon-button-container-shape--md-sys-shape-corner-full
--md-filled-icon-button-container-shape-end-endvar(--md-filled-icon-button-container-shape)
--md-filled-icon-button-container-shape-end-startvar(--md-filled-icon-button-container-shape)
--md-filled-icon-button-container-shape-start-endvar(--md-filled-icon-button-container-shape)
--md-filled-icon-button-container-shape-start-startvar(--md-filled-icon-button-container-shape)
--md-filled-icon-button-container-width40px
--md-filled-icon-button-disabled-container-color--md-sys-color-on-surface
--md-filled-icon-button-disabled-container-opacity0.12
--md-filled-icon-button-disabled-icon-color--md-sys-color-on-surface
--md-filled-icon-button-disabled-icon-opacity0.38
--md-filled-icon-button-focus-icon-color--md-sys-color-on-primary
--md-filled-icon-button-hover-icon-color--md-sys-color-on-primary
--md-filled-icon-button-hover-state-layer-color--md-sys-color-on-primary
--md-filled-icon-button-hover-state-layer-opacity--md-sys-state-hover-state-layer-opacity
--md-filled-icon-button-icon-color--md-sys-color-on-primary
--md-filled-icon-button-icon-size24px
--md-filled-icon-button-pressed-icon-color--md-sys-color-on-primary
--md-filled-icon-button-pressed-state-layer-color--md-sys-color-on-primary
--md-filled-icon-button-pressed-state-layer-opacity--md-sys-state-pressed-state-layer-opacity
--md-filled-icon-button-selected-container-color--md-sys-color-primary
--md-filled-icon-button-toggle-focus-icon-color--md-sys-color-primary
--md-filled-icon-button-toggle-hover-icon-color--md-sys-color-primary
--md-filled-icon-button-toggle-hover-state-layer-color--md-sys-color-primary
--md-filled-icon-button-toggle-icon-color--md-sys-color-primary
--md-filled-icon-button-toggle-pressed-icon-color--md-sys-color-primary
--md-filled-icon-button-toggle-pressed-state-layer-color--md-sys-color-primary
--md-filled-icon-button-toggle-selected-focus-icon-color--md-sys-color-on-primary
--md-filled-icon-button-toggle-selected-hover-icon-color--md-sys-color-on-primary
--md-filled-icon-button-toggle-selected-hover-state-layer-color--md-sys-color-on-primary
--md-filled-icon-button-toggle-selected-icon-color--md-sys-color-on-primary
--md-filled-icon-button-toggle-selected-pressed-icon-color--md-sys-color-on-primary
--md-filled-icon-button-toggle-selected-pressed-state-layer-color--md-sys-color-on-primary
--md-filled-icon-button-unselected-container-color--md-sys-color-surface-container-highest

浅色实心图标按钮 <md-filled-tonal-icon-button>

Link to “浅色实心图标按钮 <md-filled-tonal-icon-button>”
变量默认值
--md-filled-tonal-icon-button-container-color--md-sys-color-secondary-container
--md-filled-tonal-icon-button-container-height40px
--md-filled-tonal-icon-button-container-shape--md-sys-shape-corner-full
--md-filled-tonal-icon-button-container-shape-end-endvar(--md-filled-tonal-icon-button-container-shape)
--md-filled-tonal-icon-button-container-shape-end-startvar(--md-filled-tonal-icon-button-container-shape)
--md-filled-tonal-icon-button-container-shape-start-endvar(--md-filled-tonal-icon-button-container-shape)
--md-filled-tonal-icon-button-container-shape-start-startvar(--md-filled-tonal-icon-button-container-shape)
--md-filled-tonal-icon-button-container-width40px
--md-filled-tonal-icon-button-disabled-container-color--md-sys-color-on-surface
--md-filled-tonal-icon-button-disabled-container-opacity0.12
--md-filled-tonal-icon-button-disabled-icon-color--md-sys-color-on-surface
--md-filled-tonal-icon-button-disabled-icon-opacity0.38
--md-filled-tonal-icon-button-focus-icon-color--md-sys-color-on-secondary-container
--md-filled-tonal-icon-button-hover-icon-color--md-sys-color-on-secondary-container
--md-filled-tonal-icon-button-hover-state-layer-color--md-sys-color-on-secondary-container
--md-filled-tonal-icon-button-hover-state-layer-opacity--md-sys-state-hover-state-layer-opacity
--md-filled-tonal-icon-button-icon-color--md-sys-color-on-secondary-container
--md-filled-tonal-icon-button-icon-size24px
--md-filled-tonal-icon-button-pressed-icon-color--md-sys-color-on-secondary-container
--md-filled-tonal-icon-button-pressed-state-layer-color--md-sys-color-on-secondary-container
--md-filled-tonal-icon-button-pressed-state-layer-opacity--md-sys-state-pressed-state-layer-opacity
--md-filled-tonal-icon-button-selected-container-color--md-sys-color-secondary-container
--md-filled-tonal-icon-button-toggle-focus-icon-color--md-sys-color-on-surface-variant
--md-filled-tonal-icon-button-toggle-hover-icon-color--md-sys-color-on-surface-variant
--md-filled-tonal-icon-button-toggle-hover-state-layer-color--md-sys-color-on-surface-variant
--md-filled-tonal-icon-button-toggle-icon-color--md-sys-color-on-surface-variant
--md-filled-tonal-icon-button-toggle-pressed-icon-color--md-sys-color-on-surface-variant
--md-filled-tonal-icon-button-toggle-pressed-state-layer-color--md-sys-color-on-surface-variant
--md-filled-tonal-icon-button-toggle-selected-focus-icon-color--md-sys-color-on-secondary-container
--md-filled-tonal-icon-button-toggle-selected-hover-icon-color--md-sys-color-on-secondary-container
--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color--md-sys-color-on-secondary-container
--md-filled-tonal-icon-button-toggle-selected-icon-color--md-sys-color-on-secondary-container
--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color--md-sys-color-on-secondary-container
--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color--md-sys-color-on-secondary-container
--md-filled-tonal-icon-button-unselected-container-color--md-sys-color-surface-container-highest

描边图标按钮 <md-outlined-icon-button>

Link to “描边图标按钮 <md-outlined-icon-button>”
变量默认值
--md-outlined-icon-button-container-height40px
--md-outlined-icon-button-container-shape--md-sys-shape-corner-full
--md-outlined-icon-button-container-shape-end-endvar(--md-outlined-icon-button-container-shape)
--md-outlined-icon-button-container-shape-end-startvar(--md-outlined-icon-button-container-shape)
--md-outlined-icon-button-container-shape-start-endvar(--md-outlined-icon-button-container-shape)
--md-outlined-icon-button-container-shape-start-startvar(--md-outlined-icon-button-container-shape)
--md-outlined-icon-button-container-width40px
--md-outlined-icon-button-disabled-icon-color--md-sys-color-on-surface
--md-outlined-icon-button-disabled-icon-opacity0.38
--md-outlined-icon-button-disabled-outline-color--md-sys-color-on-surface
--md-outlined-icon-button-disabled-outline-opacity0.12
--md-outlined-icon-button-disabled-selected-container-color--md-sys-color-on-surface
--md-outlined-icon-button-disabled-selected-container-opacity0.12
--md-outlined-icon-button-focus-icon-color--md-sys-color-on-surface-variant
--md-outlined-icon-button-hover-icon-color--md-sys-color-on-surface-variant
--md-outlined-icon-button-hover-state-layer-color--md-sys-color-on-surface-variant
--md-outlined-icon-button-hover-state-layer-opacity--md-sys-state-hover-state-layer-opacity
--md-outlined-icon-button-icon-color--md-sys-color-on-surface-variant
--md-outlined-icon-button-icon-size24px
--md-outlined-icon-button-outline-color--md-sys-color-outline
--md-outlined-icon-button-outline-width1px
--md-outlined-icon-button-pressed-icon-color--md-sys-color-on-surface
--md-outlined-icon-button-pressed-state-layer-color--md-sys-color-on-surface
--md-outlined-icon-button-pressed-state-layer-opacity--md-sys-state-pressed-state-layer-opacity
--md-outlined-icon-button-selected-container-color--md-sys-color-inverse-surface
--md-outlined-icon-button-selected-focus-icon-color--md-sys-color-inverse-on-surface
--md-outlined-icon-button-selected-hover-icon-color--md-sys-color-inverse-on-surface
--md-outlined-icon-button-selected-hover-state-layer-color--md-sys-color-inverse-on-surface
--md-outlined-icon-button-selected-icon-color--md-sys-color-inverse-on-surface
--md-outlined-icon-button-selected-pressed-icon-color--md-sys-color-inverse-on-surface
--md-outlined-icon-button-selected-pressed-state-layer-color--md-sys-color-inverse-on-surface
开发指南
快速开始主题问题与支持
Components
Ai Input提示横幅 Alert banner按钮 ButtonCheckboxChipsDialogsFloating action button (FAB)图标 Icon图标按钮 Icon ButtonLists菜单 MenuMenus弹窗 Modal步骤条 Process stepperProgress indicatorsRadioRipple搜索栏 Search BarSelectSlidersSwitchTabsText field文本输入 Text Input