🌏 Translated with the assistance of DeepSeek and ChatGPT

Composite Input Controls: Input Group

Used to combine various input controls and buttons together.

Basic Usage

Combines various input controls and buttons. Currently supported components:

• 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>

Rounded Borders

The shape property controls the overall shape.

borderRadius sets the button corner radius; it takes precedence over shape and behaves like the CSS border-radius property.

Due to limited time and resources, custom rounded corners still need refinement, but overall usability is not affected.

<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>

Control Sizes

The size property controls the dimensions of the controls.

<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 State

The disabled attribute applies a disabled state to all child controls.

<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

Attribute	Type	Optional	Default	Description	Version
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True			0.0.2
shape	'rect' | 'round'	True	'rect'	Component shape, overrides the shape of child components; rounding only affects the outer borders on both sides of the child components.	0.0.3
size	'medium' | 'large' | 'small'	True	'medium'	Component size, overrides the size of child components.	0.0.2
disabled	boolean	True	false	Whether to disable.	0.0.2
readonly	boolean	True	false	Whether the input-group is readonly.	0.0.3
pollSizeChange	boolean	True	false	Enables polling for component size changes. This also affects the property of the same name in data input components that are child components.	0.1.0

InputGroupSlots

Slot	Parameter	Description	Version
default		Components to be grouped.	0.0.2

InputGroupLabelProps

Attribute	Type	Optional	Default	Description	Version
backgroundColor	string	True		Background color. Supports CSS-like strings such as 'rgb(r, g, b)' and 'rgba(r, g, b, a)', as well as 3-, 4-, 6-, and 8-digit hexadecimal values.	0.0.2
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True			0.0.2
shape	'rect' | 'round'	True	'rect'	Component shape.	0.0.3
size	'medium' | 'large' | 'small'	True	'medium'	Component size.	0.0.2
pollSizeChange	boolean	True	false	Enables polling for component size changes. This may impact performance. It is typically used to resolve abnormal canvas rendering that occurs when the component's size is affected by its container element.	0.1.0

InputGroupLabelSlots

Slot	Parameter	Description	Version
default		Label content.	0.0.2

NumberOrPercentage

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