ion-button
按钮提供一个可点击的元素，可用于表单或任何需要简单标准按钮功能的地方。它们可以显示文本、图标或两者兼而有之。按钮可以使用多个属性进行样式设置，以呈现特定外观。
基本用法
展开
此属性允许您指定按钮的宽度。默认情况下，按钮具有 display: inline-block，但设置此属性将更改按钮为具有 display: block 的全宽元素。
形状
此属性允许您指定按钮的形状。默认情况下，按钮是矩形的，具有小的边框半径，但将其设置为 "round" 将更改按钮为圆形元素。
填充
此属性确定按钮的背景色和边框颜色。默认情况下，按钮具有实心背景，除非按钮位于工具栏内，在这种情况下，它具有透明背景。
尺寸
此属性指定按钮的尺寸。设置此属性将更改按钮的高度和填充。
图标
主题
颜色
CSS 自定义属性
无障碍性
按钮是为无障碍性而构建的，但可能需要根据其内容进行一些调整。按钮组件呈现一个本地的 按钮元素，这使它能够利用本地按钮提供的功能。
文本内容溢出
在许多情况下，按钮的文本内容可能会溢出容器。建议在发生这种情况时将文本包装在按钮内，以便所有文本仍然可以读取。按钮组件将自动调整其高度以容纳额外的文本行。
当文本过长而无法容纳时，按钮文本不会自动换行。为了使文本换行，可以添加 ion-text-wrap 类，这将把 white-space 属性设置为 "normal"。这将在将来的主要版本中成为默认设置。
信息
仅出于演示目的，在下面的按钮上设置了 max-width 样式。文本换行将与动态按钮宽度一起使用。
属性
buttonType
| 描述 | 按钮的类型。 |
| 属性 | button-type |
| 类型 | 字符串 |
| 默认 | '按钮' |
颜色
| 描述 | 要从应用程序的颜色调色板中使用的颜色。默认选项为："primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium" 和 "dark"。有关颜色的更多信息，请参阅 主题。 |
| 属性 | 颜色 |
| 类型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ 字符串 ｜ 未定义 |
| 默认 | 未定义 |
禁用
| 描述 | 如果为 true，则用户无法与按钮交互。 |
| 属性 | 禁用 |
| 类型 | 布尔值 |
| 默认 | false |
下载
| 描述 | 此属性指示浏览器下载 URL 而不是导航到它，因此用户将被提示将其保存为本地文件。如果属性具有值，则该值用作保存提示中预先填写的文件名（用户仍然可以更改文件名，如果他们希望更改）。 |
| 属性 | 下载 |
| 类型 | 字符串 ｜ 未定义 |
| 默认 | 未定义 |
展开
| 描述 | 设置为 "block" 以获得全宽按钮，或设置为 "full" 以获得具有方形角且没有左右边框的全宽按钮。 |
| 属性 | 展开 |
| 类型 | "block" ｜ "full" ｜ 未定义 |
| 默认 | 未定义 |
填充
| 描述 | 设置为 "clear" 以获得类似于扁平按钮的透明按钮，设置为 "outline" 以获得带有边框的透明按钮，或设置为 "solid" 以获得带有填充背景的按钮。默认填充为 "solid"，除非按钮位于工具栏内，在这种情况下，默认填充为 "clear"。 |
| 属性 | 填充 |
| 类型 | "clear" ｜ "default" ｜ "outline" ｜ "solid" ｜ 未定义 |
| 默认 | 未定义 |
表单
| 描述 | HTML 表单元素或表单元素 ID。用于在按钮不是表单子元素时提交表单。 |
| 属性 | 表单 |
| 类型 | HTMLFormElement ｜ 字符串 ｜ 未定义 |
| 默认 | 未定义 |
href
| 描述 | 包含超链接指向的 URL 或 URL 片段。如果设置了此属性，将呈现锚标记。 |
| 属性 | href |
| 类型 | 字符串 ｜ 未定义 |
| 默认 | 未定义 |
模式
| 描述 | 模式决定使用哪个平台样式。 |
| 属性 | 模式 |
| 类型 | "ios" ｜ "md" |
| 默认 | 未定义 |
rel
| 描述 | 指定目标对象的与链接对象的关系。该值是 链接类型 的空格分隔列表。 |
| 属性 | rel |
| 类型 | 字符串 ｜ 未定义 |
| 默认 | 未定义 |
routerAnimation
| 描述 | 使用路由器时，它指定使用 href 导航到另一个页面时的过渡动画。 |
| 属性 | 未定义 |
| 类型 | ((baseEl: any, opts?: any) => Animation) ｜ 未定义 |
| 默认 | 未定义 |
routerDirection
| 描述 | 使用路由器时，它指定使用 href 导航到另一个页面时的过渡方向。 |
| 属性 | router-direction |
| 类型 | "back" ｜ "forward" ｜ "root" |
| 默认 | 'forward' |
形状
| 描述 | 设置为 "round" 以获得具有更多圆角的按钮。 |
| 属性 | 形状 |
| 类型 | "round" ｜ 未定义 |
| 默认 | 未定义 |
尺寸
| 描述 | 设置为 "small" 以获得具有较小高度和填充的按钮，设置为 "default" 以获得具有默认高度和填充的按钮，或设置为 "large" 以获得具有较大高度和填充的按钮。默认情况下，尺寸未设置，除非按钮位于项目内，在这种情况下，默认尺寸为 "small"。在项目内将尺寸设置为 "default" 以使其成为标准尺寸的按钮。 |
| 属性 | 尺寸 |
| 类型 | "默认" ｜ "大" ｜ "小" ｜ 未定义 |
| 默认 | 未定义 |
强
| 描述 | 如果为 true，则激活具有更粗字体权重的按钮。 |
| 属性 | 强 |
| 类型 | 布尔值 |
| 默认 | false |
目标
| 描述 | 指定显示链接 URL 的位置。仅在提供 href 时适用。特殊关键字："_blank"、"_self"、"_parent"、"_top"。 |
| 属性 | 目标 |
| 类型 | 字符串 ｜ 未定义 |
| 默认 | 未定义 |
类型
| 描述 | 按钮的类型。 |
| 属性 | 类型 |
| 类型 | "按钮" ｜ "重置" ｜ "提交" |
| 默认 | '按钮' |
事件
| 名称 | 描述 | 冒泡 |
|---|---|---|
ionBlur | 按钮失去焦点时发出。 | true |
ionFocus | 按钮获得焦点时发出。 | true |
方法
此组件没有可用的公共方法。
CSS 阴影部分
| 名称 | 描述 |
|---|---|
原生 | 包裹所有子元素的原生 HTML 按钮或锚元素。 |
CSS 自定义属性
- iOS
- MD
| 名称 | 描述 |
|---|---|
--background | 按钮的背景 |
--background-activated | 按下时的按钮背景。注意：设置此属性会影响 Material Design 波纹效果。 |
--background-activated-opacity | 按下时的按钮不透明度 |
--background-focused | 使用 Tab 键聚焦时的按钮背景 |
--background-focused-opacity | 使用 Tab 键聚焦时的按钮不透明度 |
--background-hover | 鼠标悬停时的按钮背景 |
--background-hover-opacity | 鼠标悬停时的背景不透明度 |
--border-color | 按钮的边框颜色 |
--border-radius | 按钮的边框圆角 |
--border-style | 按钮的边框样式 |
--border-width | 按钮的边框宽度 |
--box-shadow | 按钮的阴影 |
--color | 按钮的文字颜色 |
--color-activated | 按下时的按钮文字颜色 |
--color-focused | 使用 Tab 键聚焦时的按钮文字颜色 |
--color-hover | 鼠标悬停时的按钮文字颜色 |
--opacity | 按钮的不透明度 |
--padding-bottom | 按钮的下边距 |
--padding-end | 如果方向为从左到右，则为按钮的右边距；如果方向为从右到左，则为左边距。 |
--padding-start | 如果方向为从左到右，则为按钮的左边距；如果方向为从右到左，则为右边距。 |
--padding-top | 按钮的上边距 |
--ripple-color | 按钮波纹效果的颜色 |
--transition | 按钮的过渡 |
| 名称 | 描述 |
|---|---|
--background | 按钮的背景 |
--background-activated | 按下时的按钮背景。注意：设置此属性会影响 Material Design 波纹效果。 |
--background-activated-opacity | 按下时的按钮不透明度 |
--background-focused | 使用 Tab 键聚焦时的按钮背景 |
--background-focused-opacity | 使用 Tab 键聚焦时的按钮不透明度 |
--background-hover | 鼠标悬停时的按钮背景 |
--background-hover-opacity | 鼠标悬停时的背景不透明度 |
--border-color | 按钮的边框颜色 |
--border-radius | 按钮的边框圆角 |
--border-style | 按钮的边框样式 |
--border-width | 按钮的边框宽度 |
--box-shadow | 按钮的阴影 |
--color | 按钮的文字颜色 |
--color-activated | 按下时的按钮文字颜色 |
--color-focused | 使用 Tab 键聚焦时的按钮文字颜色 |
--color-hover | 鼠标悬停时的按钮文字颜色 |
--opacity | 按钮的不透明度 |
--padding-bottom | 按钮的下边距 |
--padding-end | 如果方向为从左到右，则为按钮的右边距；如果方向为从右到左，则为左边距。 |
--padding-start | 如果方向为从左到右，则为按钮的左边距；如果方向为从右到左，则为右边距。 |
--padding-top | 按钮的上边距 |
--ripple-color | 按钮波纹效果的颜色 |
--transition | 按钮的过渡 |
插槽
| 名称 | 描述 |
|---|---|
| `` | 如果没有提供插槽，则将内容放在名为插槽之间。 |
end | 在 LTR 中，内容放在按钮文本的右侧；在 RTL 中，内容放在按钮文本的左侧。 |
icon-only | 应在没有文本的按钮中的图标上使用。 |
start | 在 LTR 中，内容放在按钮文本的左侧；在 RTL 中，内容放在按钮文本的右侧。 |