Compare commits

...

2 Commits

Author SHA1 Message Date
HIsheR 5131977f54 chore(backlog): 记录 g03 完成 2026-10-23 19:04:29 +08:00
HIsheR bfa70132da iter(g03): 输入组件补 prefix/suffix 附加块 2026-10-23 19:04:27 +08:00
13 changed files with 172 additions and 30 deletions
+1 -1
View File
@@ -386,7 +386,7 @@
"title": "textField/textarea/inputNumber 补 prefix/suffix 附加内容槽",
"motivation": "搜索框放大镜、金额单位等前后缀是输入组件高频需求,目前只能外部拼装",
"acceptance": "三个输入组件新增 prefix/suffix(string|HTMLElement),渲染为输入框内侧前后附加块;manifest 参数表与 llms-full 同步;npm run check 全绿",
"status": "open",
"status": "done",
"notes": "自补:可用性细节方向"
}
]
+40 -7
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-23T10:58:48.833Z",
"generatedAt": "2026-10-23T11:03:12.689Z",
"repoRoot": ".",
"packages": [
{
@@ -143,9 +143,9 @@
"entry": "src/index.ts",
"exports": [
"button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用",
"textField(props):文本输入,value 信号双向绑定,disabled 支持布尔或信号禁用",
"inputNumber(props):数字输入,−/+ 按钮 + 键盘 ↑↓ 调节,value 信号双向绑定,min/max/step 超界自动夹取",
"textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号禁用",
"textField(props):文本输入,value 信号双向绑定,disabled 支持布尔或信号,onInput 输入回调;prefix/suffix 可选渲染为输入框内侧附加块",
"inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节,min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块",
"textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块",
"slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值",
"checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用",
"switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用",
@@ -325,13 +325,24 @@
"t": "(value: string) => void",
"k": 1,
"d": "输入回调,每次按键触发"
},
{
"n": "prefix",
"t": "string | HTMLElement",
"d": "前置附加块(textField/inputNumber 在输入框内侧前、textarea 在上方);缺省不渲染"
},
{
"n": "suffix",
"t": "string | HTMLElement",
"d": "后置附加块(textField/inputNumber 在输入框内侧后、textarea 在下方);缺省不渲染"
}
],
"example": "const name = signal(''); const el = textField({ value: name, placeholder: '输入名字…', onInput: (v) => console.log(v) })",
"steps": [
"先用 signal('') 创建字符串信号",
"传入 value 完成双向绑定:用户输入自动写回,外部赋值自动回显",
"在任意响应式位置用 name() 读取最新值,如 () => `你好,${name()}`"
"在任意响应式位置用 name() 读取最新值,如 () => `你好,${name()}`",
"需要图标、货币符、单位等前后缀时传 prefix/suffix(字符串或 DOM),控件会包进带边框的附加组,聚焦光环由组统一承载"
]
},
{
@@ -371,13 +382,24 @@
"t": "(value: number) => void",
"k": 1,
"d": "值变化回调(已夹取到合法区间)"
},
{
"n": "prefix",
"t": "string | HTMLElement",
"d": "前置附加块(textField/inputNumber 在输入框内侧前、textarea 在上方);缺省不渲染"
},
{
"n": "suffix",
"t": "string | HTMLElement",
"d": "后置附加块(textField/inputNumber 在输入框内侧后、textarea 在下方);缺省不渲染"
}
],
"example": "const qty = signal(1); const el = inputNumber({ value: qty, min: 1, max: 99, onChange: (v) => console.log(v) })",
"steps": [
"用 signal(1) 创建数字信号并传入 value 完成双向绑定",
"点击 −/+ 按钮或在输入框聚焦时按 ↑↓ 以 step 调节;直接输入在失焦或回车时解析",
"非法输入自动回滚为当前值;min/max 超界自动夹取,disabled 支持布尔或信号禁用"
"非法输入自动回滚为当前值;min/max 超界自动夹取,disabled 支持布尔或信号禁用",
"需要图标、货币符、单位等前后缀时传 prefix/suffix(字符串或 DOM),控件会包进带边框的附加组,聚焦光环由组统一承载"
]
},
{
@@ -411,13 +433,24 @@
"t": "(value: string) => void",
"k": 1,
"d": "输入回调"
},
{
"n": "prefix",
"t": "string | HTMLElement",
"d": "前置附加块(textField/inputNumber 在输入框内侧前、textarea 在上方);缺省不渲染"
},
{
"n": "suffix",
"t": "string | HTMLElement",
"d": "后置附加块(textField/inputNumber 在输入框内侧后、textarea 在下方);缺省不渲染"
}
],
"example": "const bio = signal(''); textarea({ value: bio, rows: 4, placeholder: '一句话介绍…' })",
"steps": [
"创建信号并传入 value",
"用 rows 控制初始高度,用户可纵向拉伸",
"字数统计等派生逻辑直接在响应式文本里读 bio().length"
"字数统计等派生逻辑直接在响应式文本里读 bio().length",
"需要图标、货币符、单位等前后缀时传 prefix/suffix(字符串或 DOM),控件会包进带边框的附加组,聚焦光环由组统一承载"
]
},
{
+1
View File
@@ -47,3 +47,4 @@
{"ts":"2026-10-23T18:53:33+08:00","id":"f06","result":"done","commit":"a5439fe","summary":"pnpm-lock.yaml 经 pnpm install --lockfile-only 生成入库;ARCHITECTURE.md 目录树补 scripts/、COMMITTING、ITERATION、pnpm-workspace、.ua 明细"}
{"ts":"2026-10-23T18:55:24+08:00","id":"g01","result":"done","commit":"98f557c","summary":"writeIfChanged 支持归一化比较,llms-full.txt 仅时间戳之差时跳写,docs 双跑工作区干净;backlog 灌入 g01-g03"}
{"ts":"2026-10-23T18:59:34+08:00","id":"g02","result":"done","commit":"33979b2","summary":"新增 image 组件:缩略图点击/回车开遮罩大图,Esc/点击遮罩关闭并归还焦点;组件 33→34,manifest/docs/README/demo 同步"}
{"ts":"2026-10-23T19:04:29+08:00","id":"g03","result":"done","commit":"bfa7013","summary":"textField/textarea/inputNumber 新增 prefix/suffix(addonWrap 零侵入包装,无附加不包裹),样式聚焦光环由组承载;demo 与 manifest 同步"}
+6 -1
View File
@@ -127,6 +127,8 @@ const volume = signal(40);
// —— 数字输入:购买数量演示,与禁用态实例共用同一信号 ——
const qty = signal(1);
const price = signal('9.9'); // 演示 suffix 附加块
const amount = signal(2); // 演示 inputNumber 前后缀
// —— 步骤条:下单流程演示,按钮推进、点已完成步骤回跳 ——
const stepIdx = signal(0);
@@ -169,8 +171,10 @@ const content = h(
section(
'sec-bind',
'双向绑定',
'textField 与信号双向同步:输入即回显。',
'textField 与信号双向同步:输入即回显;prefix/suffix 渲染为输入框内侧附加块。',
textField({ placeholder: '输入名字…', value: name }),
textField({ placeholder: '搜索…', value: name, prefix: '🔍' }),
textField({ value: price, suffix: '元' }),
h('span', { class: 'out' }, () => (name() ? `你好,${name()}!` : '等待输入…')),
),
section(
@@ -267,6 +271,7 @@ const content = h(
{ class: 'row' },
inputNumber({ value: qty, min: 1, max: 99, onChange: (v) => toast.info(`数量 ${v}`) }),
inputNumber({ value: qty, disabled: locked }),
inputNumber({ value: amount, min: 0, prefix: '¥', suffix: '件' }),
),
),
section(
+13 -4
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-23T10:58:48.833Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-23T11:03:12.689Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -104,6 +104,8 @@ button({ label: '提交', variant: 'primary', onClick: () => console.log('clicke
- placeholder:string —— 占位文案
- disabled:boolean | Signal<boolean> —— 禁用态:布尔直接置位,传信号则动态同步
- onInput(回调):(value: string) => void —— 输入回调,每次按键触发
- prefix:string | HTMLElement —— 前置附加块(textField/inputNumber 在输入框内侧前、textarea 在上方);缺省不渲染
- suffix:string | HTMLElement —— 后置附加块(textField/inputNumber 在输入框内侧后、textarea 在下方);缺省不渲染
示例:
@@ -116,6 +118,7 @@ const name = signal(''); const el = textField({ value: name, placeholder: '输
1. 先用 signal('') 创建字符串信号
2. 传入 value 完成双向绑定:用户输入自动写回,外部赋值自动回显
3. 在任意响应式位置用 name() 读取最新值,如 () => `你好,${name()}`
4. 需要图标、货币符、单位等前后缀时传 prefix/suffix(字符串或 DOM),控件会包进带边框的附加组,聚焦光环由组统一承载
现场演示:apps/docs/demo.html#sec-bind
@@ -129,6 +132,8 @@ const name = signal(''); const el = textField({ value: name, placeholder: '输
- step(默认 1):number —— 步长;缺省 1
- disabled:boolean | Signal<boolean> —— 禁用态:布尔直接置位,传信号则动态同步
- onChange(回调):(value: number) => void —— 值变化回调(已夹取到合法区间)
- prefix:string | HTMLElement —— 前置附加块(textField/inputNumber 在输入框内侧前、textarea 在上方);缺省不渲染
- suffix:string | HTMLElement —— 后置附加块(textField/inputNumber 在输入框内侧后、textarea 在下方);缺省不渲染
示例:
@@ -141,6 +146,7 @@ const qty = signal(1); const el = inputNumber({ value: qty, min: 1, max: 99, onC
1. 用 signal(1) 创建数字信号并传入 value 完成双向绑定
2. 点击 −/+ 按钮或在输入框聚焦时按 ↑↓ 以 step 调节;直接输入在失焦或回车时解析
3. 非法输入自动回滚为当前值;min/max 超界自动夹取,disabled 支持布尔或信号禁用
4. 需要图标、货币符、单位等前后缀时传 prefix/suffix(字符串或 DOM),控件会包进带边框的附加组,聚焦光环由组统一承载
现场演示:apps/docs/demo.html#sec-inputnumber
@@ -153,6 +159,8 @@ const qty = signal(1); const el = inputNumber({ value: qty, min: 1, max: 99, onC
- placeholder:string —— 占位文案
- disabled:boolean | Signal<boolean> —— 禁用态:布尔直接置位,传信号则动态同步
- onInput(回调):(value: string) => void —— 输入回调
- prefix:string | HTMLElement —— 前置附加块(textField/inputNumber 在输入框内侧前、textarea 在上方);缺省不渲染
- suffix:string | HTMLElement —— 后置附加块(textField/inputNumber 在输入框内侧后、textarea 在下方);缺省不渲染
示例:
@@ -165,6 +173,7 @@ const bio = signal(''); textarea({ value: bio, rows: 4, placeholder: '一句话
1. 创建信号并传入 value
2. 用 rows 控制初始高度,用户可纵向拉伸
3. 字数统计等派生逻辑直接在响应式文本里读 bio().length
4. 需要图标、货币符、单位等前后缀时传 prefix/suffix(字符串或 DOM),控件会包进带边框的附加组,聚焦光环由组统一承载
现场演示:apps/docs/demo.html#sec-form
@@ -892,9 +901,9 @@ dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓
API 速览:
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用
- textField(props):文本输入,value 信号双向绑定,disabled 支持布尔或信号禁用
- inputNumber(props):数字输入,−/+ 按钮 + 键盘 ↑↓ 调节,value 信号双向绑定,min/max/step 超界自动夹取
- textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号禁用
- textField(props):文本输入,value 信号双向绑定,disabled 支持布尔或信号,onInput 输入回调;prefix/suffix 可选渲染为输入框内侧附加块
- inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节,min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块
- textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块
- slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值
- checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用
- switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用
+3 -3
View File
@@ -48,9 +48,9 @@
- 描述: DOM 皮肤组件库:button / textField / textarea / slider / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / image / tag / avatar / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / drawer / form / formItem / dataTable,构建在 @ui-arch/frame 与 @ui-arch/table-core 之上,样式只消费 --ua-* 令牌。
- API:
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用
- textField(props):文本输入,value 信号双向绑定,disabled 支持布尔或信号禁用
- inputNumber(props):数字输入,−/+ 按钮 + 键盘 ↑↓ 调节,value 信号双向绑定,min/max/step 超界自动夹取
- textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号禁用
- textField(props):文本输入,value 信号双向绑定,disabled 支持布尔或信号,onInput 输入回调;prefix/suffix 可选渲染为输入框内侧附加块
- inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节,min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块
- textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块
- slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值
- checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用
- switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用
+13
View File
@@ -0,0 +1,13 @@
import { h } from '@ui-arch/frame';
/*** 输入附加块包装:prefix/suffix 存在时把控件包进附加组,否则原样返回(零侵入,结构不变) ***/
export function addonWrap(
el: HTMLElement,
prefix?: string | HTMLElement,
suffix?: string | HTMLElement,
column = false, // 多行控件用纵向布局:prefix 在上、suffix 在下
): HTMLElement {
if (!prefix && !suffix) return el; // 卫语句:无附加不包裹
const addon = (v?: string | HTMLElement) => (v == null ? null : h('span', { class: 'ua-input-addon' }, v));
return h('div', { class: column ? 'ua-input-group ua-input-group-column' : 'ua-input-group' }, addon(prefix), el, addon(suffix));
}
+3 -2
View File
@@ -1,9 +1,10 @@
import { effect, h } from '@ui-arch/frame';
import { button } from './button.js';
import { addonWrap } from './addons.js';
import type { InputNumberProps } from './types.js';
/*** 数字输入:−/+ 按钮 + 输入框三段式,value 信号双向绑定,min/max/step 超界自动夹取,键盘 ↑↓ 调节 ***/
export function inputNumber(props: InputNumberProps): HTMLDivElement {
export function inputNumber(props: InputNumberProps): HTMLElement {
const min = props.min ?? -Infinity; // 无下限缺省
const max = props.max ?? Infinity; // 无上限缺省
const step = props.step ?? 1; // 步长缺省 1
@@ -22,5 +23,5 @@ export function inputNumber(props: InputNumberProps): HTMLDivElement {
const inc = button({ label: '+', variant: 'ghost', disabled: props.disabled, onClick: () => emit(props.value() + step) });
dec.setAttribute('aria-label', '减少');
inc.setAttribute('aria-label', '增加');
return h('div', { class: 'ua-input-number', role: 'group' }, dec, input, inc) as HTMLDivElement;
return addonWrap(h('div', { class: 'ua-input-number', role: 'group' }, dec, input, inc) as HTMLDivElement, props.prefix, props.suffix);
}
+4 -3
View File
@@ -1,8 +1,9 @@
import { effect, h } from '@ui-arch/frame';
import { addonWrap } from './addons.js';
import type { TextFieldProps } from './types.js';
/*** 文本输入:value 信号双向绑定,disabled 支持布尔或信号禁用,onInput 为输入回调 ***/
export function textField(props: TextFieldProps): HTMLInputElement {
/*** 文本输入:value 信号双向绑定,disabled 支持布尔或信号禁用,onInput 为输入回调;prefix/suffix 包附加组 ***/
export function textField(props: TextFieldProps): HTMLElement {
const el = h('input', { class: 'ua-input', placeholder: props.placeholder ?? '', disabled: props.disabled }) as HTMLInputElement; // false/undefined 移除属性,Signal 走响应式
if (props.value) {
const signal = props.value;
@@ -12,5 +13,5 @@ export function textField(props: TextFieldProps): HTMLInputElement {
});
}
if (props.onInput) el.addEventListener('input', () => props.onInput!(el.value));
return el;
return addonWrap(el, props.prefix, props.suffix);
}
+4 -3
View File
@@ -1,8 +1,9 @@
import { effect, h } from '@ui-arch/frame';
import { addonWrap } from './addons.js';
import type { TextareaProps } from './types.js';
/*** 多行输入:value 信号双向绑定,disabled 支持布尔或信号禁用,onInput 为输入回调 ***/
export function textarea(props: TextareaProps): HTMLTextAreaElement {
/*** 多行输入:value 信号双向绑定,disabled 支持布尔或信号禁用,onInput 为输入回调;prefix/suffix 包纵向附加组 ***/
export function textarea(props: TextareaProps): HTMLElement {
const el = h('textarea', { class: 'ua-textarea', rows: props.rows ?? 3, placeholder: props.placeholder ?? '', disabled: props.disabled }) as HTMLTextAreaElement; // false/undefined 移除属性,Signal 走响应式
if (props.value) {
const signal = props.value;
@@ -12,5 +13,5 @@ export function textarea(props: TextareaProps): HTMLTextAreaElement {
});
}
if (props.onInput) el.addEventListener('input', () => props.onInput!(el.value));
return el;
return addonWrap(el, props.prefix, props.suffix, true);
}
+6
View File
@@ -32,6 +32,8 @@ export interface TextFieldProps {
value?: Signal<string>; // 双向绑定的信号
disabled?: boolean | Signal<boolean>; // 禁用态:布尔直接置位,传信号则动态同步
onInput?: (value: string) => void; // 输入回调
prefix?: string | HTMLElement; // 输入框内侧前置附加块(如图标、货币符);缺省不渲染
suffix?: string | HTMLElement; // 输入框内侧后置附加块(如单位);缺省不渲染
}
/*** 卡片入参 ***/
@@ -163,6 +165,8 @@ export interface TextareaProps {
value?: Signal<string>; // 双向绑定的信号
disabled?: boolean | Signal<boolean>; // 禁用态:布尔直接置位,传信号则动态同步
onInput?: (value: string) => void; // 输入回调
prefix?: string | HTMLElement; // 上方附加块(如标题、计数说明);缺省不渲染
suffix?: string | HTMLElement; // 下方附加块(如字数提示);缺省不渲染
}
/*** 数字输入入参 ***/
@@ -173,6 +177,8 @@ export interface InputNumberProps {
step?: number; // 步长;缺省 1
disabled?: boolean | Signal<boolean>; // 禁用态:布尔直接置位,传信号则动态同步
onChange?: (value: number) => void; // 值变化回调(已夹取到合法区间)
prefix?: string | HTMLElement; // −/+ 按钮前的附加块(如货币符);缺省不渲染
suffix?: string | HTMLElement; // +/+ 按钮后的附加块(如单位);缺省不渲染
}
/*** 步骤条条目 ***/
+39 -6
View File
@@ -14,9 +14,9 @@
"entry": "src/index.ts",
"exports": [
"button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用",
"textField(props):文本输入,value 信号双向绑定,disabled 支持布尔或信号禁用",
"inputNumber(props):数字输入,−/+ 按钮 + 键盘 ↑↓ 调节,value 信号双向绑定,min/max/step 超界自动夹取",
"textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号禁用",
"textField(props):文本输入,value 信号双向绑定,disabled 支持布尔或信号,onInput 输入回调;prefix/suffix 可选渲染为输入框内侧附加块",
"inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节,min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块",
"textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块",
"slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值",
"checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用",
"switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用",
@@ -196,13 +196,24 @@
"t": "(value: string) => void",
"k": 1,
"d": "输入回调,每次按键触发"
},
{
"n": "prefix",
"t": "string | HTMLElement",
"d": "前置附加块(textField/inputNumber 在输入框内侧前、textarea 在上方);缺省不渲染"
},
{
"n": "suffix",
"t": "string | HTMLElement",
"d": "后置附加块(textField/inputNumber 在输入框内侧后、textarea 在下方);缺省不渲染"
}
],
"example": "const name = signal(''); const el = textField({ value: name, placeholder: '输入名字…', onInput: (v) => console.log(v) })",
"steps": [
"先用 signal('') 创建字符串信号",
"传入 value 完成双向绑定:用户输入自动写回,外部赋值自动回显",
"在任意响应式位置用 name() 读取最新值,如 () => `你好,${name()}`"
"在任意响应式位置用 name() 读取最新值,如 () => `你好,${name()}`",
"需要图标、货币符、单位等前后缀时传 prefix/suffix(字符串或 DOM),控件会包进带边框的附加组,聚焦光环由组统一承载"
]
},
{
@@ -242,13 +253,24 @@
"t": "(value: number) => void",
"k": 1,
"d": "值变化回调(已夹取到合法区间)"
},
{
"n": "prefix",
"t": "string | HTMLElement",
"d": "前置附加块(textField/inputNumber 在输入框内侧前、textarea 在上方);缺省不渲染"
},
{
"n": "suffix",
"t": "string | HTMLElement",
"d": "后置附加块(textField/inputNumber 在输入框内侧后、textarea 在下方);缺省不渲染"
}
],
"example": "const qty = signal(1); const el = inputNumber({ value: qty, min: 1, max: 99, onChange: (v) => console.log(v) })",
"steps": [
"用 signal(1) 创建数字信号并传入 value 完成双向绑定",
"点击 −/+ 按钮或在输入框聚焦时按 ↑↓ 以 step 调节;直接输入在失焦或回车时解析",
"非法输入自动回滚为当前值;min/max 超界自动夹取,disabled 支持布尔或信号禁用"
"非法输入自动回滚为当前值;min/max 超界自动夹取,disabled 支持布尔或信号禁用",
"需要图标、货币符、单位等前后缀时传 prefix/suffix(字符串或 DOM),控件会包进带边框的附加组,聚焦光环由组统一承载"
]
},
{
@@ -282,13 +304,24 @@
"t": "(value: string) => void",
"k": 1,
"d": "输入回调"
},
{
"n": "prefix",
"t": "string | HTMLElement",
"d": "前置附加块(textField/inputNumber 在输入框内侧前、textarea 在上方);缺省不渲染"
},
{
"n": "suffix",
"t": "string | HTMLElement",
"d": "后置附加块(textField/inputNumber 在输入框内侧后、textarea 在下方);缺省不渲染"
}
],
"example": "const bio = signal(''); textarea({ value: bio, rows: 4, placeholder: '一句话介绍…' })",
"steps": [
"创建信号并传入 value",
"用 rows 控制初始高度,用户可纵向拉伸",
"字数统计等派生逻辑直接在响应式文本里读 bio().length"
"字数统计等派生逻辑直接在响应式文本里读 bio().length",
"需要图标、货币符、单位等前后缀时传 prefix/suffix(字符串或 DOM),控件会包进带边框的附加组,聚焦光环由组统一承载"
]
},
{
+39
View File
@@ -1608,3 +1608,42 @@ button.ua-step-dot:hover {
transition: none !important;
}
}
/* ---- 输入附加组(prefix/suffix) ---- */
.ua-input-group {
display: inline-flex;
align-items: center;
border: 1px solid var(--ua-color-border);
border-radius: var(--ua-radius-md);
background: var(--ua-color-bg);
transition: border-color 0.15s, box-shadow 0.15s;
}
.ua-input-group:focus-within {
border-color: var(--ua-color-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 18%, transparent);
}
.ua-input-group .ua-input,
.ua-input-group .ua-textarea {
border: none; /* 组已带边框,内层去边防双线 */
border-radius: 0;
min-width: 160px;
background: transparent;
}
.ua-input-group .ua-input:focus,
.ua-input-group .ua-textarea:focus {
box-shadow: none; /* 聚焦光环由组统一承载 */
outline: none;
}
.ua-input-group-column {
flex-direction: column;
align-items: stretch;
}
.ua-input-addon {
display: inline-flex;
align-items: center;
padding: 6px 10px;
color: var(--ua-color-text-muted);
background: color-mix(in srgb, var(--ua-color-text) 5%, transparent);
font-size: var(--ua-font-size-md);
user-select: none;
}