@xwink/ui

    Input

    文本 / 数字 / 密码输入控件。没有 Reka 对应物——原生 <input> 的输入行为本身跨平台一致,需要统一的只是外观;唯一例外是 number 的步进器,各系统绘制不同,这里直接藏掉。

    高度与按钮、下拉共用 --ui-control-height,同一行天然等高。标签、提示、错误状态和规则都由外层 XField 负责。

    基础

    基础用法

    密码显隐

    type="password" 默认自带显隐按钮。showPasswordIcon / hidePasswordIcon 或 #password-icon 只覆盖图标渲染,按钮、ARIA 文案和切换行为仍由组件持有;v-model:password-visible 可让上层读取或控制状态。需要完全自定义后缀与行为时,关闭 password-toggle 后使用 #append。

    前后缀

    框内从左到右是 prepend 区 / prefix 文字 / 输入值 / suffix 文字 / append 区:prefix / suffix 紧贴输入值(¥、kg),prepend / append 放图标或按钮(有同名插槽,也有 prepend-icon / append-icon 简写),清空与密码显隐排在 append 之后。结构是扁平的——根节点就是那个框,传给它的 class 能直接改边框、底色、高度与内边距;框外要放东西由宿主自己排布局。

    前后缀
    ¥元 / 月
    kg

    外观

    variant 三档:outline 描边(默认,表单页)、filled 填充(编辑器面板里一格挨一格的字段)、ghost 幽灵(浮动工具条里)。XTextarea / XSelect / XCombobox 同一套;整棵子树的默认外观用 XConfigProvider 设。

    描边 / 填充 / 幽灵

    状态

    在 XField 内使用时,错误边框、聚焦环和 aria-invalid 由字段状态自动下派:

    错误 / 禁用 / 只读

    邮箱格式不对

    API

    Props

    名称类型默认值说明
    type"number" | "search" | "text" | "password" | "email" | "url" | "date" | "datetime-local" | undefined"text"—
    placeholderstring | undefinedundefined—
    disabledboolean | undefinedfalse—
    readonlyboolean | undefinedfalse—
    clearableboolean | undefinedfalse—
    prefixstring | undefinedundefined—
    suffixstring | undefinedundefined—
    prependIconstring | undefinedundefined—
    appendIconstring | undefinedundefined—
    passwordToggleboolean | undefinedtruepassword 类型默认显示显隐按钮;关闭后可用 suffix 插槽完全接管
    showPasswordIconstring | undefined"ph:eye"—
    hidePasswordIconstring | undefined"ph:eye-slash"—
    size"mini" | "small" | "medium" | "large" | "super" | undefinedundefined尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size
    variantFieldVariant | undefinedundefined—
    modelValuestring | number | undefined——
    passwordVisibleboolean | undefinedfalse—

    Emits

    事件载荷说明
    update:modelValue[value: string | number | undefined]—
    update:passwordVisible[value: boolean]—

    Slots

    插槽说明
    prepend—
    append—
    password-icon—