阴影
分段按钮是 分段 内相关按钮的组。它们以水平行显示。通过将分段的 value
设置为分段按钮的 value
,可以默认选择一个分段按钮。一次只能选择一个分段按钮。
默认情况下,layout
属性设置为 "icon-top"
。当分段按钮同时具有图标和标签时,它将显示图标在标签之上。可以通过将 layout
属性设置为 "icon-bottom"
、"icon-start"
或 "icon-end"
来更改此行为,这将分别显示图标在标签下方、标签的开始位置(LTR 中为左侧,RTL 中为右侧)或标签的末尾位置(LTR 中为右侧,RTL 中为左侧)。
contentId
描述 | 分段内容的 id 。 |
属性 | content-id |
类型 | string | undefined |
默认值 | undefined |
描述 | 如果为 true ,用户将无法与分段按钮交互。 |
属性 | disabled |
类型 | boolean |
默认值 | false |
描述 | 设置分段中文本和图标的布局。 |
属性 | layout |
类型 | "icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined |
默认值 | 'icon-top' |
描述 | 模式决定使用哪个平台样式。 |
属性 | mode |
类型 | "ios" | "md" |
默认值 | undefined |
描述 | 按钮的类型。 |
属性 | type |
类型 | "button" | "reset" | "submit" |
默认值 | 'button' |
描述 | 分段按钮的值。 |
属性 | value |
类型 | number | string |
默认值 | 'ion-sb-' + ids++ |
此组件没有可用事件。
此组件没有公开可用方法。
名称 | 描述 |
---|
indicator | 在选中的分段按钮上显示的指示器。 |
indicator-background | 在选中的分段按钮上显示的指示器的背景元素。 |
native | 包含所有子元素的原生 HTML 按钮元素。 |
名称 | 描述 |
---|
--background | 分段按钮的背景 |
--background-checked | 选中的分段按钮的背景 |
--background-focused | 使用 Tab 键聚焦时分段按钮的背景 |
--background-focused-opacity | 使用 Tab 键聚焦时分段按钮背景的不透明度 |
--background-hover | 悬停时分段按钮的背景 |
--background-hover-opacity | 悬停时分段按钮背景的不透明度 |
--border-color | 分段按钮边框的颜色 |
--border-radius | 分段按钮边框的半径 |
--border-style | 分段按钮边框的样式 |
--border-width | 分段按钮边框的宽度 |
--color | 分段按钮的颜色 |
--color-checked | 选中的分段按钮的颜色 |
--color-focused | 使用 Tab 键聚焦时分段按钮的颜色 |
--color-hover | 悬停时分段按钮的颜色 |
--indicator-box-shadow | 选中分段按钮的指示器的盒子阴影 |
--indicator-color | 选中分段按钮的指示器的颜色 |
--indicator-height | 选中分段按钮的指示器的高度 |
--indicator-transform | 选中分段按钮的指示器的变换 |
--indicator-transition | 选中分段按钮的指示器的过渡 |
--margin-bottom | 分段按钮的下边距 |
--margin-end | 如果方向为从左到右,则为分段按钮的右边距,如果方向为从右到左,则为左边距 |
--margin-start | 如果方向为从左到右,则为分段按钮的左边距,如果方向为从右到左,则为右边距 |
--margin-top | 分段按钮的上边距 |
--padding-bottom | 分段按钮的下填充 |
--padding-end | 如果方向为从左到右,则为分段按钮的右填充,如果方向为从右到左,则为左填充 |
--padding-start | 如果方向为从左到右,则为分段按钮的左填充,如果方向为从右到左,则为右填充 |
--padding-top | 分段按钮的上填充 |
--transition | 分段按钮的过渡 |
名称 | 描述 |
---|
--background | 分段按钮的背景 |
--background-checked | 选中的分段按钮的背景 |
--background-focused | 使用 Tab 键聚焦时分段按钮的背景 |
--background-focused-opacity | 使用 Tab 键聚焦时分段按钮背景的不透明度 |
--background-hover | 悬停时分段按钮的背景 |
--background-hover-opacity | 悬停时分段按钮背景的不透明度 |
--border-color | 分段按钮边框的颜色 |
--border-radius | 分段按钮边框的半径 |
--border-style | 分段按钮边框的样式 |
--border-width | 分段按钮边框的宽度 |
--color | 分段按钮的颜色 |
--color-checked | 选中的分段按钮的颜色 |
--color-focused | 使用 Tab 键聚焦时分段按钮的颜色 |
--color-hover | 悬停时分段按钮的颜色 |
--indicator-box-shadow | 选中分段按钮的指示器的盒子阴影 |
--indicator-color | 选中分段按钮的指示器的颜色 |
--indicator-height | 选中分段按钮的指示器的高度 |
--indicator-transform | 选中分段按钮的指示器的变换 |
--indicator-transition | 选中分段按钮的指示器的过渡 |
--margin-bottom | 分段按钮的下边距 |
--margin-end | 如果方向为从左到右,则为分段按钮的右边距,如果方向为从右到左,则为左边距 |
--margin-start | 如果方向为从左到右,则为分段按钮的左边距,如果方向为从右到左,则为右边距 |
--margin-top | 分段按钮的上边距 |
--padding-bottom | 分段按钮的下填充 |
--padding-end | 如果方向为从左到右,则为分段按钮的右填充,如果方向为从右到左,则为左填充 |
--padding-start | 如果方向为从左到右,则为分段按钮的左填充,如果方向为从右到左,则为右填充 |
--padding-top | 分段按钮的上填充 |
--transition | 分段按钮的过渡 |
此组件没有可用插槽。