复合输入控件 Input Group

用于把各种输入控件和按钮组合在一起。

基础使用

把各种输入控件和按钮组合在一起，目前支持以下组件：

• Input
• InputNumber
• InputTag
• AutoComplete
• Select
• Button
• InputGroupLabel

.ini

<template>
	<px-space direction="vertical">
		<px-input-group>
			<px-input-group-label>
				<IconSearch></IconSearch>
			</px-input-group-label>
			<px-input placeholder="Please input"> </px-input>
			<px-button>Search</px-button>
		</px-input-group>
		<px-input-group>
			<px-input placeholder="Please input file name"> </px-input>
			<px-input-group-label> .ini </px-input-group-label>
		</px-input-group>
		<px-input-group>
			<px-input placeholder="Please input"> </px-input>
			<px-input-number placeholder="Please input" :default-value="0"> </px-input-number>
		</px-input-group>
	</px-space>
</template>
<script setup lang="ts">
import { IconSearch } from '@pixelium/web-vue/icon-hn/es'
</script>
<style lang="css" scoped>
.px-input,
.px-input-number {
	width: 320px;
}
</style>

圆角边框

shape 属性控制形状。

borderRadius 设置按钮圆角，优先级高于 shape，与 CSS border-radius 行为一致。

精力和技术力不太充足，自定义圆角还有需要优化的地方，但整体不影响使用。

<template>
	<px-space direction="vertical">
		<px-input-group shape="round">
			<px-input-group-label>
				<IconSearch></IconSearch>
			</px-input-group-label>
			<px-input placeholder="Please input"> </px-input>
			<px-button>Search</px-button>
		</px-input-group>
		<px-input-group :border-radius="[20, 16, 20, 16]">
			<px-input-group-label>
				<IconSearch></IconSearch>
			</px-input-group-label>
			<px-input placeholder="Please input"> </px-input>
			<px-button>Search</px-button>
		</px-input-group>
	</px-space>
</template>
<script setup lang="ts">
import { IconSearch } from '@pixelium/web-vue/icon-hn/es'
</script>
<style lang="css" scoped>
.px-input {
	width: 320px;
}
</style>

控件尺寸

size 属性控制尺寸。

<template>
	<px-space direction="vertical">
		<px-input-group size="small">
			<px-input-group-label>
				<IconBolt></IconBolt>
			</px-input-group-label>
			<px-input-number placeholder="Please input number" :default-value="0"> </px-input-number>
			<px-button>Confirm</px-button>
		</px-input-group>
		<px-input-group>
			<px-input-group-label>
				<IconBolt></IconBolt>
			</px-input-group-label>
			<px-input-number placeholder="Please input number" :default-value="0"> </px-input-number>
			<px-button>Confirm</px-button>
		</px-input-group>
		<px-input-group size="large">
			<px-input-group-label>
				<IconBolt></IconBolt>
			</px-input-group-label>
			<px-input-number placeholder="Please input number" :default-value="0"> </px-input-number>
			<px-button>Confirm</px-button>
		</px-input-group>
	</px-space>
</template>

<script setup lang="ts">
import { IconBolt } from '@pixelium/web-vue/icon-hn/es'
</script>

<style lang="css" scoped>
.px-input-number {
	width: 320px;
}
</style>

禁用状态

disabled 会设置子控件的禁用状态。

<template>
	<px-input-group disabled>
		<px-input placeholder="Please input"> </px-input>
		<px-input-number placeholder="Please input" :default-value="0"> </px-input-number>
	</px-input-group>
</template>
<style lang="css" scoped>
.px-input,
.px-input-number {
	width: 320px;
}
</style>

API

InputGroupProps

属性	类型	可选	默认值	描述	版本
borderRadius	NumberOrPercentage | NumberOrPercentage[]	是		圆角半径，优先级高于 shape，将覆盖子组件的 borderRadius，圆角仅作用于两侧子组件的外侧边框。与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。	0.0.2
shape	'default' | 'round'	是	'default'	组件形状，将覆盖子组件的 shape，圆角仅作用于两侧子组件的外侧边框。	0.0.2
size	'medium' | 'large' | 'small'	是	'medium'	组件尺寸，将覆盖子组件的 size。	0.0.2
disabled	boolean	是	false	是否禁用，子组件的 disabled 和当前属性取或，决定该子组件是否禁用。	0.0.2

InputGroupSlots

插槽	参数	描述	版本
default		需要组合的组件。	0.0.2

InputGroupLabelProps

属性	类型	可选	默认值	描述	版本
backgroundColor	string	是		背景颜色，支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)' 字符串和 3、4、6、8 位长度的十六位数字表示。	0.0.2
borderRadius	NumberOrPercentage | NumberOrPercentage[]	是		圆角半径，优先级高于 shape。与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。	0.0.2
shape	'default' | 'round'	是	'default'	组件形状。	0.0.2
size	'medium' | 'large' | 'small'	是	'medium'	组件尺寸。	0.0.2

InputGroupLabelSlots

插槽	参数	描述	版本
default		标签内容。	0.0.2

NumberOrPercentage

export type NumberOrPercentage = number | `${number}%`