ion-button

shadow

按钮（Button）提供可点击元素，可用于表单或任何需要简单标准按钮功能的地方。它们可以显示文本、图标或两者兼有。按钮可以通过多种属性设置样式以获得特定的外观。

基本用法

扩展（Expand）

此属性让你指定按钮的宽度。默认情况下，按钮具有 display: inline-block，但设置此属性会将按钮更改为具有 display: block 的全宽元素。

形状（Shape）

此属性让你指定按钮的形状。默认情况下，按钮是带有小边框半径的矩形，但将其设置为 "round" 会将按钮更改为圆形元素。

填充（Fill）

此属性决定按钮的背景和边框颜色。默认情况下，按钮具有实色背景，除非按钮位于工具栏内，此时它具有透明背景。

尺寸（Size）

此属性指定按钮的尺寸。设置此属性将更改按钮的高度和内边距。

图标

主题

颜色

CSS 自定义属性

无障碍访问

按钮的设计考虑了无障碍性，但可能需要根据其内容进行一些调整。按钮组件渲染原生的 button 元素，使其能够利用原生按钮提供的功能。

溢出文本内容

在许多情况下，按钮的文本内容可能会溢出容器。建议在这种情况下让按钮内部的文本换行，以便所有文本仍然可读。按钮组件会自动调整其高度以适应额外的文本行。

当文本过长无法容纳时，按钮文本不会自动换行到下一行。为了使文本换行，可以添加 ion-text-wrap 类，这将把 white-space 属性设置为 "normal"。这将在未来的主要版本中成为默认行为。

信息

下面按钮上的 max-width 样式仅用于演示目的。文本换行在动态按钮宽度下也能正常工作。

属性

buttonType

说明	The type of button.
属性	button-type
类型	string
默认值	'button'

color

说明	The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
属性	color
类型	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
默认值	undefined

disabled

说明	If true, the user cannot interact with the button.
属性	disabled
类型	boolean
默认值	false

download

说明	This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
属性	download
类型	string ｜ undefined
默认值	undefined

expand

说明	Set to "block" for a full-width button or to "full" for a full-width button with square corners and no left or right borders.
属性	expand
类型	"block" ｜ "full" ｜ undefined
默认值	undefined

fill

说明	Set to "clear" for a transparent button that resembles a flat button, to "outline" for a transparent button with a border, or to "solid" for a button with a filled background. The default fill is "solid" except inside of a toolbar, where the default is "clear".
属性	fill
类型	"clear" ｜ "default" ｜ "outline" ｜ "solid" ｜ undefined
默认值	undefined

form

说明	The HTML form element or form element id. Used to submit a form when the button is not a child of the form. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性	form
类型	HTMLFormElement ｜ string ｜ undefined
默认值	undefined

href

说明	Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
属性	href
类型	string ｜ undefined
默认值	undefined

mode

说明	The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性	mode
类型	"ios" ｜ "md"
默认值	undefined

rel

说明	Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
属性	rel
类型	string ｜ undefined
默认值	undefined

routerAnimation

说明	When using a router, it specifies the transition animation when navigating to another page using href.
属性	undefined
类型	((baseEl: any, opts?: any) => Animation) ｜ undefined
默认值	undefined

routerDirection

说明	When using a router, it specifies the transition direction when navigating to another page using href.
属性	router-direction
类型	"back" ｜ "forward" ｜ "root"
默认值	'forward'

shape

说明	Set to "round" for a button with more rounded corners.
属性	shape
类型	"round" ｜ undefined
默认值	undefined

size

说明	Set to "small" for a button with less height and padding, to "default" for a button with the default height and padding, or to "large" for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is "small" by default. Set the size to "default" inside of an item to make it a standard size button.
属性	size
类型	"default" ｜ "large" ｜ "small" ｜ undefined
默认值	undefined

strong

说明	If true, activates a button with a heavier font weight.
属性	strong
类型	boolean
默认值	false

target

说明	Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".
属性	target
类型	string ｜ undefined
默认值	undefined

type

说明	The type of the button.
属性	type
类型	"button" ｜ "reset" ｜ "submit"
默认值	'button'

事件

Name	说明	冒泡
ionBlur	Emitted when the button loses focus.	true
ionFocus	Emitted when the button has focus.	true

方法

该组件没有可用的公共方法。

CSS 阴影部分

Name	说明
native	The native HTML button or anchor element that wraps all child elements.

CSS 自定义属性

Name	说明
--background	Background of the button
--background-activated	Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
--background-activated-opacity	Opacity of the button when pressed
--background-focused	Background of the button when focused with the tab key
--background-focused-opacity	Opacity of the button when focused with the tab key
--background-hover	Background of the button on hover
--background-hover-opacity	Opacity of the background on hover
--border-color	Border color of the button
--border-radius	Border radius of the button
--border-style	Border style of the button
--border-width	Border width of the button
--box-shadow	Box shadow of the button
--color	Text color of the button
--color-activated	Text color of the button when pressed
--color-focused	Text color of the button when focused with the tab key
--color-hover	Text color of the button when hover
--opacity	Opacity of the button
--padding-bottom	Bottom padding of the button
--padding-end	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
--padding-start	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
--padding-top	Top padding of the button
--ripple-color	Color of the button ripple effect
--transition	Transition of the button

插槽

Name	说明
	Content is placed between the named slots if provided without a slot.
end	Content is placed to the right of the button text in LTR, and to the left in RTL.
icon-only	Should be used on an icon in a button that has no text.
start	Content is placed to the left of the button text in LTR, and to the right in RTL.