ion-segment-button

shadow

分段按钮（Segment button）是分段控件（segment）内部的一组相关按钮。它们在水平行中显示。可以通过将分段控件的 value 设置为分段按钮的 value 来默认选中一个分段按钮。一次只能选择一个分段按钮。

基本用法

布局

layout 属性默认设置为 "icon-top"。当分段按钮同时具有图标和标签时，图标将显示在标签上方。可以通过将 layout 属性设置为 "icon-bottom"、"icon-start" 或 "icon-end" 来更改此行为，这将分别使图标显示在标签下方、标签开始处（LTR 中为左侧，RTL 中为右侧）或标签结束处（LTR 中为右侧，RTL 中为左侧）。

主题

CSS 阴影部分

CSS 自定义属性

属性

disabled

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

layout

说明	Set the layout of the text and icon in the segment.
属性	layout
类型	"icon-bottom" ｜ "icon-end" ｜ "icon-hide" ｜ "icon-start" ｜ "icon-top" ｜ "label-hide" ｜ undefined
默认值	'icon-top'

mode

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

type

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

value

说明	The value of the segment button.
属性	value
类型	number ｜ string
默认值	'ion-sb-' + ids++

事件

该组件没有可用的事件。

方法

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

CSS 阴影部分

Name	说明
indicator	The indicator displayed on the checked segment button.
indicator-background	The background element for the indicator displayed on the checked segment button.
native	The native HTML button element that wraps all child elements.

CSS 自定义属性

Name	说明
--background	Background of the segment button
--background-checked	Background of the checked segment button
--background-focused	Background of the segment button when focused with the tab key
--background-focused-opacity	Opacity of the segment button background when focused with the tab key
--background-hover	Background of the segment button on hover
--background-hover-opacity	Opacity of the segment button background on hover
--border-color	Color of the segment button border
--border-radius	Radius of the segment button border
--border-style	Style of the segment button border
--border-width	Width of the segment button border
--color	Color of the segment button
--color-checked	Color of the checked segment button
--color-focused	Color of the segment button when focused with the tab key
--color-hover	Color of the segment button on hover
--indicator-box-shadow	Box shadow on the indicator for the checked segment button
--indicator-color	Color of the indicator for the checked segment button
--indicator-height	Height of the indicator for the checked segment button
--indicator-transform	Transform of the indicator for the checked segment button
--indicator-transition	Transition of the indicator for the checked segment button
--margin-bottom	Bottom margin of the segment button
--margin-end	Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button
--margin-start	Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button
--margin-top	Top margin of the segment button
--padding-bottom	Bottom padding of the segment button
--padding-end	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button
--padding-start	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button
--padding-top	Top padding of the segment button
--transition	Transition of the segment button

插槽

该组件没有可用的插槽。