影子

ion-button

按钮提供了一个可点击的元素，可以在表单或任何需要简单、标准按钮功能的地方使用。它们可以显示文本、图标，或者两者都显示。按钮可以使用几个属性进行设计，使其具有特定的外观。

扩大

这个属性允许您指定按钮的宽度。默认情况下，按钮是内联块，但设置此属性将将按钮更改为全宽度块元素。

价值细节

块 圆角全宽按钮。

完整的 全宽按钮，有正方形的角，在左边或右边没有边框。

填满

这个属性决定了按钮的背景和边框颜色。默认情况下，按钮有一个坚实的背景，除非按钮是在工具栏内，在这种情况下，它有一个透明的背景。

价值细节

清晰的 带有透明背景的按钮，类似于一个平面按钮。

大纲 带有透明背景和可见边框的按钮。

固体 带有填充背景的按钮。对于工具栏中的按钮很有用。

大小

这个属性指定按钮的大小。设置此属性将改变按钮的高度和填充。

价值细节

小 按钮的高度和填充更少。默认为项目中的按钮。

默认的 按钮具有默认的高度和填充。对项目中的按钮有用。

大 按钮有更多的高度和填充。

使用

<！——默认——> < ion-button > 默认的 ion-button > <！(锚)> < ion-button href ＝＂＃＂ > 锚 ion-button > <！——颜色——> < ion-button 颜色＝＂主＂ > 主 ion-button > < ion-button 颜色＝＂二次＂ > 二次 ion-button > < ion-button 颜色＝＂三级＂ > 三级 ion-button > < ion-button 颜色＝＂成功＂ > 成功 ion-button > < ion-button 颜色＝＂警告＂ > 警告 ion-button > < ion-button 颜色＝＂危险＂ > 危险 ion-button > < ion-button 颜色＝＂光＂ > 光 ion-button > < ion-button 颜色＝＂媒介＂ > 媒介 ion-button > < ion-button 颜色＝＂黑暗＂ > 黑暗 ion-button > <！——扩张——> < ion-button 扩大＝＂完整的＂ > 完整的按钮 ion-button > < ion-button 扩大＝＂块＂ > 块按钮 ion-button > <！-圆- > < ion-button 形状＝＂轮＂ > 圆形按钮 ion-button > <！——填写> < ion-button 扩大＝＂完整的＂填满＝＂大纲＂ > 大纲+满 ion-button > < ion-button 扩大＝＂块＂填满＝＂大纲＂ > 大纲+块 ion-button > < ion-button 形状＝＂轮＂填满＝＂大纲＂ > 大纲+圆 ion-button > <！-图标- > < ion-button > < ion-icon 槽＝＂开始＂的名字＝＂明星＂ > ion-icon > 左边的图标 ion-button > < ion-button > 正确的图标 < ion-icon 槽＝＂结束＂的名字＝＂明星＂ > ion-icon > ion-button > < ion-button > < ion-icon 槽＝＂ icon-only ＂的名字＝＂明星＂ > ion-icon > ion-button > <！——大小——> < ion-button 大小＝＂大＂ > 大 ion-button > < ion-button > 默认的 ion-button > < ion-button 大小＝＂小＂ > 小 ion-button >

复制复制

<！——默认——> < ion-button > 默认的 ion-button > <！(锚)> < ion-button href ＝＂＃＂ > 锚 ion-button > <！——颜色——> < ion-button 颜色＝＂主＂ > 主 ion-button > < ion-button 颜色＝＂二次＂ > 二次 ion-button > < ion-button 颜色＝＂三级＂ > 三级 ion-button > < ion-button 颜色＝＂成功＂ > 成功 ion-button > < ion-button 颜色＝＂警告＂ > 警告 ion-button > < ion-button 颜色＝＂危险＂ > 危险 ion-button > < ion-button 颜色＝＂光＂ > 光 ion-button > < ion-button 颜色＝＂媒介＂ > 媒介 ion-button > < ion-button 颜色＝＂黑暗＂ > 黑暗 ion-button > <！——扩张——> < ion-button 扩大＝＂完整的＂ > 完整的按钮 ion-button > < ion-button 扩大＝＂块＂ > 块按钮 ion-button > <！-圆- > < ion-button 形状＝＂轮＂ > 圆形按钮 ion-button > <！——填写> < ion-button 扩大＝＂完整的＂填满＝＂大纲＂ > 大纲+满 ion-button > < ion-button 扩大＝＂块＂填满＝＂大纲＂ > 大纲+块 ion-button > < ion-button 形状＝＂轮＂填满＝＂大纲＂ > 大纲+圆 ion-button > <！-图标- > < ion-button > < ion-icon 槽＝＂开始＂的名字＝＂明星＂ > ion-icon > 左边的图标 ion-button > < ion-button > 正确的图标 < ion-icon 槽＝＂结束＂的名字＝＂明星＂ > ion-icon > ion-button > < ion-button > < ion-icon 槽＝＂ icon-only ＂的名字＝＂明星＂ > ion-icon > ion-button > <！——大小——> < ion-button 大小＝＂大＂ > 大 ion-button > < ion-button > 默认的 ion-button > < ion-button 大小＝＂小＂ > 小 ion-button >

复制复制

进口反应从 “反应” ；进口｛ IonButton ， betway东盟体育appIonIcon ， IonContent ｝从 “@betway东盟体育appionic /反应” ；进口｛明星｝从 “betway东盟体育appionicons /图标” ；出口常量 ButtonExample ：反应．足球俱乐部＝（）＝＞（ < IonContent > ｛ / *——默认* / ｝ < IonButton > 默认的 IonButton > ｛ / *——锚* / ｝ < IonButton href ＝＂＃＂ > 锚 IonButton > ｛ / *——颜色——* / ｝ < IonButton 颜色＝＂主＂ > 主 IonButton > < IonButton 颜色＝＂二次＂ > 二次 IonButton > < IonButton 颜色＝＂三级＂ > 三级 IonButton > < IonButton 颜色＝＂成功＂ > 成功 IonButton > < IonButton 颜色＝＂警告＂ > 警告 IonButton > < IonButton 颜色＝＂危险＂ > 危险 IonButton > < IonButton 颜色＝＂光＂ > 光 IonButton > < IonButton 颜色＝＂媒介＂ > 媒介 IonButton > < IonButton 颜色＝＂黑暗＂ > 黑暗 IonButton > ｛ / *——扩张——* / ｝ < IonButton 扩大＝＂完整的＂ > 完整的按钮 IonButton > < IonButton 扩大＝＂块＂ > 块按钮 IonButton > ｛ / *——轮* / ｝ < IonButton 形状＝＂轮＂ > 圆形按钮 IonButton > ｛ / *——填补* / ｝ < IonButton 扩大＝＂完整的＂填满＝＂大纲＂ > 大纲+满 IonButton > < IonButton 扩大＝＂块＂填满＝＂大纲＂ > 大纲+块 IonButton > < IonButton 形状＝＂轮＂填满＝＂大纲＂ > 大纲+圆 IonButton > ｛ / *——图标* / ｝ < IonButton > < betway东盟体育appIonIcon 槽＝＂开始＂图标＝｛明星｝ /> 左边的图标 IonButton > < IonButton > 正确的图标 < betway东盟体育appIonIcon 槽＝＂结束＂图标＝｛明星｝ /> IonButton > < IonButton > < betway东盟体育appIonIcon 槽＝＂ icon-only ＂图标＝｛明星｝ /> IonButton > ｛ / *——大小* / ｝ < IonButton 大小＝＂大＂ > 大 IonButton > < IonButton > 默认的 IonButton > < IonButton 大小＝＂小＂ > 小 IonButton > IonContent > ）；

复制复制

进口｛组件， h ｝从 “@stencil /核心” ；＠组件（｛标签： “button-example” ， styleUrl ： “button-example.css” ｝）出口类 ButtonExample ｛渲染（）｛返回［ / /默认 < ion-button > 默认的 ion-button > ， / /锚 < ion-button href ＝＂＃＂ > 锚 ion-button > ， / /颜色 < ion-button 颜色＝＂主＂ > 主 ion-button > ， < ion-button 颜色＝＂二次＂ > 二次 ion-button > ， < ion-button 颜色＝＂三级＂ > 三级 ion-button > ， < ion-button 颜色＝＂成功＂ > 成功 ion-button > ， < ion-button 颜色＝＂警告＂ > 警告 ion-button > ， < ion-button 颜色＝＂危险＂ > 危险 ion-button > ， < ion-button 颜色＝＂光＂ > 光 ion-button > ， < ion-button 颜色＝＂媒介＂ > 媒介 ion-button > ， < ion-button 颜色＝＂黑暗＂ > 黑暗 ion-button > ， / /扩展 < ion-button 扩大＝＂完整的＂ > 完整的按钮 ion-button > ， < ion-button 扩大＝＂块＂ > 块按钮 ion-button > ， / /轮 < ion-button 形状＝＂轮＂ > 圆形按钮 ion-button > ， / /填充 < ion-button 扩大＝＂完整的＂填满＝＂大纲＂ > 大纲+满 ion-button > ， < ion-button 扩大＝＂块＂填满＝＂大纲＂ > 大纲+块 ion-button > ， < ion-button 形状＝＂轮＂填满＝＂大纲＂ > 大纲+圆 ion-button > ， / /图标 < ion-button > < ion-icon 槽＝＂开始＂的名字＝＂明星＂ > ion-icon > 左边的图标 ion-button > ， < ion-button > 正确的图标 < ion-icon 槽＝＂结束＂的名字＝＂明星＂ > ion-icon > ion-button > ， < ion-button > < ion-icon 槽＝＂ icon-only ＂的名字＝＂明星＂ > ion-icon > ion-button > ， / /大小 < ion-button 大小＝＂大＂ > 大 ion-button > ， < ion-button > 默认的 ion-button > ， < ion-button 大小＝＂小＂ > 小 ion-button > ］；｝｝

复制复制

< 模板 > <！——默认——> < ion-button > 默认的 ion-button > <！(锚)> < ion-button href ＝＂＃＂ > 锚 ion-button > <！——颜色——> < ion-button 颜色＝＂主＂ > 主 ion-button > < ion-button 颜色＝＂二次＂ > 二次 ion-button > < ion-button 颜色＝＂三级＂ > 三级 ion-button > < ion-button 颜色＝＂成功＂ > 成功 ion-button > < ion-button 颜色＝＂警告＂ > 警告 ion-button > < ion-button 颜色＝＂危险＂ > 危险 ion-button > < ion-button 颜色＝＂光＂ > 光 ion-button > < ion-button 颜色＝＂媒介＂ > 媒介 ion-button > < ion-button 颜色＝＂黑暗＂ > 黑暗 ion-button > <！——扩张——> < ion-button 扩大＝＂完整的＂ > 完整的按钮 ion-button > < ion-button 扩大＝＂块＂ > 块按钮 ion-button > <！-圆- > < ion-button 形状＝＂轮＂ > 圆形按钮 ion-button > <！——填写> < ion-button 扩大＝＂完整的＂填满＝＂大纲＂ > 大纲+满 ion-button > < ion-button 扩大＝＂块＂填满＝＂大纲＂ > 大纲+块 ion-button > < ion-button 形状＝＂轮＂填满＝＂大纲＂ > 大纲+圆 ion-button > <！-图标- > < ion-button > < ion-icon 槽＝＂开始＂的名字＝＂明星＂ > ion-icon > 左边的图标 ion-button > < ion-button > 正确的图标 < ion-icon 槽＝＂结束＂的名字＝＂明星＂ > ion-icon > ion-button > < ion-button > < ion-icon 槽＝＂ icon-only ＂的名字＝＂明星＂ > ion-icon > ion-button > <！——大小——> < ion-button 大小＝＂大＂ > 大 ion-button > < ion-button > 默认的 ion-button > < ion-button 大小＝＂小＂ > 小 ion-button > 模板 > < 脚本 > 进口｛ IonButton ｝从 “@betway东盟体育appionic / vue” ；进口｛ defineComponent ｝从 “vue” ；出口默认的 defineComponent （｛组件：｛ IonButton ｝｝）；脚本 >

复制复制

属性

buttonType

描述

按钮的类型。

属性 扣式

类型 字符串

默认的 “按钮”

颜色

描述

应用程序调色板中要使用的颜色。默认的选项是:“主”，“二级”，“三级”，“成功”，“警告”，“危险”，“光”，“媒介”,“黑暗”．有关颜色的更多信息，请参见<钢网-route-link url="/docs/theming/basics" class="hydrated" s-id="170"> 主题．

属性 颜色

类型 字符串|未定义

禁用

描述

如果真正的，则用户无法与按钮交互。

属性 禁用

类型 布尔

默认的 假

下载

描述

这个属性指示浏览器下载URL，而不是导航到它，这样用户就会被提示将其保存为本地文件。如果属性有值，则在Save提示符中将其用作预填充的文件名(用户仍然可以根据需要更改文件名)。

属性 下载

类型 字符串|未定义

扩大

描述

设置为“块”为全宽按钮或“全部”对于没有左右边框的全宽按钮。

属性 扩大

类型 “block”|“full”|未定义

填满

描述

设置为“明确”对于透明按钮，为“大纲”对于带边框的透明按钮，或“固体”．默认样式是“固体”除了在工具栏中，默认是“明确”．

属性 填满

类型 "clear" | "default" | "outline" | "solid" | undefined

href

描述

包含超链接指向的URL或URL片段。如果设置了此属性，将呈现锚标记。

属性 href

类型 字符串|未定义

模式

描述

模式决定使用哪种平台样式。

属性 模式

类型 “ios”|“医学博士”

rel

描述

指定目标对象与链接对象的关系。值是一个用空格分隔的列表链接类型．

属性 rel

类型 字符串|未定义

routerAnimation

描述

当使用路由器时，它指定在使用时导航到另一个页面时的过渡动画href．

类型 ((baseEl:任何,选择?：any) => Animation) | undefined

routerDirection

描述

当使用路由器时，它指定在使用时导航到另一个页面时的转换方向href．

属性 router-direction

类型 "back" | "forward" | "root"

默认的 “前进”

形状

描述

按钮的形状。

属性 形状

类型 “圆”|定义

大小

描述

按钮的大小。

属性 大小

类型 "default" | "large" | "small" |未定义

强大的

描述

如果真正的，激活一个带有较重字体的按钮。

属性 强大的

类型 布尔

默认的 假

目标

描述

指定显示链接URL的位置。仅适用于href提供。特殊的关键词:“平等”，“_self”，“_parent”，“_top”．

属性 目标

类型 字符串|未定义

类型

描述

按钮的类型。

属性 类型

类型 "按钮" | "重置" | "提交"

默认的 “按钮”

事件

的名字描述

ionBlur 当按钮失去焦点时触发。

ionFocus 当按钮有焦点时触发。

CSS阴影部分

的名字描述

本地的 包装所有子元素的原生HTML按钮或锚元素。

CSS自定义属性

的名字描述

——背景 按钮背景

——background-activated 按下按钮时的背景。注意:设置此参数会干扰材质设计波纹。

——background-activated-opacity 按钮按下时的不透明度

——background-focused 当用tab键聚焦时按钮的背景

——background-focused-opacity 用tab键聚焦时按钮的不透明度

——background-hover 悬停时按钮的背景

——background-hover-opacity 背景悬停时的不透明度

——边框颜色 按钮的边框颜色

——这个特性 按钮的边框半径

——边框样式 按钮的边框样式

——边框宽度 按钮的边框宽度

——不必 按钮的框阴影

——颜色 按钮的文本颜色

——color-activated 按下按钮时的文本颜色

——color-focused 当用tab键聚焦时按钮的文本颜色

——color-hover 鼠标悬停时按钮的文本颜色

——不透明 按钮不透明度

——padding-bottom 按钮的底部填充

——padding-end 如果方向为从左到右，则右填充;如果方向为从右到左，则左填充

——padding-start 如果方向为从左到右，则使用左填充;如果方向为从右到左，则使用右填充

——padding-top 按钮的顶部填充

——ripple-color 按钮的颜色涟漪效果

——过渡 按钮的过渡

槽

的名字描述

如果没有提供插槽，则将内容放置在指定的插槽之间。

“结束” 在LTR中，内容位于按钮文本的右侧，在RTL中则位于左侧。

“icon-only” 应该在没有文本的按钮中的图标上使用。

“开始” 内容在LTR中放在按钮文本的左边，在RTL中放在右边。

常见的话题

UI组件

本地的

常见的话题

UI组件

本地的

ion-button

扩大

填满

大小

使用

属性

buttonType

颜色

禁用

下载

扩大

填满

href

模式

rel

routerAnimation

routerDirection

形状

大小

强大的

目标

类型

事件

CSS阴影部分

CSS自定义属性

槽