since 0.1.0
按钮:触发即时操作,支持类型、尺寸、加载、禁用、图标与花纹底。
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
type | enum | defaultprimarysuccesswarningdangerinfo | "default" | 否 | 按钮类型,决定底色与文字色 |
size | enum | smallmediumlarge | "medium" | 否 | 按钮尺寸,映射到 button.height / paddingHorizontal / fontSize / iconSize 令牌 |
disabled | boolean | — | false | 否 | 是否禁用;禁用时点击不触发 onClick |
loading | boolean | — | false | 否 | 是否加载中;加载中显示加载指示器且点击不触发 onClick |
icon | string | — | — | 否 | 图标名(按钮内左侧图标,各端按本地图标体系渲染) |
bgPattern | boolean | — | false | 否 | 是否绘制国风花纹底纹(消费 color.decoration 令牌) |
| 名称 | 载荷 | 说明 |
|---|
onClick | 无 | 点击按钮时触发;disabled 或 loading 为 true 时不触发 |
| 名称 | 说明 |
|---|
default | 按钮文字内容 |
icon | 自定义图标内容,覆盖 icon prop |
- disabled 为 true 时:不响应点击,呈现禁用样式(disabled.* 令牌),不触发 onClick
- loading 为 true 时:显示加载指示器,不触发 onClick
- disabled 与 loading 同时为 true 时按 disabled 优先处理
- size 映射:small/medium/large 分别取 button.height.<size> 等尺寸令牌
- type 映射:primary 取主色底 + onPrimary 文字;其余类型取对应语义色
- bgPattern 为 true 时以 color.decoration 绘制底纹,不影响文字对比度
button.height.smallbutton.height.mediumbutton.height.largebutton.paddingHorizontal.smallbutton.paddingHorizontal.mediumbutton.paddingHorizontal.largebutton.borderRadiusbutton.fontSize.smallbutton.fontSize.mediumbutton.fontSize.largebutton.fontWeightbutton.iconSize.smallbutton.iconSize.mediumbutton.iconSize.largebutton.borderWidthcolor.primary.defaultcolor.onPrimarycolor.decorationcolor.disabled.bgcolor.disabled.text
LhCell
since 0.1.0单元格:列表行,左侧标题 + 说明、右侧值与箭头,支持必填红星、分隔线与点击。
Props
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
title | string | — | "" | 否 | 标题(主文字) |
value | string | — | "" | 否 | 右侧值(次文字,右对齐) |
label | string | — | "" | 否 | 标题下方的说明文字 |
bordered | boolean | — | true | 否 | 是否绘制底部分隔线 |
clickable | boolean | — | false | 否 | 是否可点击;为 true 时显示右侧指示箭头并响应点击 |
required | boolean | — | false | 否 | 是否在标题前显示必填红星(取 color.danger.default) |
icon | string | — | — | 否 | 左侧图标名(各端按本地图标体系渲染) |
事件
| 名称 | 载荷 | 说明 |
|---|
onClick | 无 | 点击单元格时触发;clickable 为 false 时不触发 |
插槽
| 名称 | 说明 |
|---|
default | 标题内容 |
value | 右侧值内容 |
行为说明
- 块级铺满 layout 传入的可用宽度,高度由内容(标题行 + 可选说明行)与内边距决定
- 标题取 cell.fontSizeTitle 与 color.text.primary;说明取 cell.fontSizeLabel 与 color.text.secondary;值取 cell.fontSizeValue 与 color.text.secondary 并右对齐
- required 为 true 时在标题前绘制红星(danger 色)
- icon 非空且后端支持 draw_icon 时,在左侧绘制尺寸 icon.size.medium 的图标
- clickable 为 true 时在右侧绘制指示箭头(两条折线),并响应点击触发 onClick
- bordered 为 true 时在底部绘制一条分隔线(color.border.lighter)
消费的令牌
cell.paddingHorizontalcell.paddingVerticalcell.gapcell.fontSizeTitlecell.fontSizeLabelcell.fontSizeValueicon.size.mediumtypography.lineHeight.primarycolor.text.primarycolor.text.regularcolor.text.secondarycolor.border.lightercolor.danger.default
LhCheckbox
since 0.1.0复选框:三态选中控件,支持勾形与横杠指示、禁用态与文字标签。
Props
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
checked | boolean | — | false | 否 | 是否选中 |
indeterminate | boolean | — | false | 否 | 是否为不确定态(横杠指示);点击后变为选中 |
disabled | boolean | — | false | 否 | 是否禁用;禁用时不响应点击且呈现禁用样式 |
label | string | — | "" | 否 | 文字标签(绘制在方框右侧) |
size | enum | smallmediumlarge | "medium" | 否 | 方框尺寸,映射到 checkbox.size.* 令牌 |
事件
| 名称 | 载荷 | 说明 |
|---|
onChange | checked: boolean | 点击切换选中态时触发;disabled 为 true 时不触发 |
插槽
行为说明
- size 映射:small/medium/large 分别取 checkbox.size.<size> 方框尺寸令牌
- 未选中:只描边(color.border.base),无填充
- 选中/不确定:实心 primary 底 + onPrimary 指示符;选中画勾形(两条折线),不确定画横杠
- disabled:底/边/指示符/文字全部取 disabled.* 令牌,且不响应点击
- 点击命中整个行(方框 + 标签区域):indeterminate 变为选中,否则翻转选中态,并触发 onChange 携带新选中态
- 方框与文字间距取 checkbox.gap
消费的令牌
checkbox.size.smallcheckbox.size.mediumcheckbox.size.largecheckbox.borderRadiuscheckbox.borderWidthcheckbox.checkWidthcheckbox.gapcolor.primary.defaultcolor.onPrimarycolor.border.basecolor.disabled.bgcolor.disabled.textcolor.disabled.bordercolor.text.primarycolor.text.disabled
LhDialog
since 0.1.0对话框:模态浮层,标题 + 内容 + 确认/取消按钮,支持语义类型与遮罩关闭。
Props
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
visible | boolean | — | false | 否 | 是否显示;为 false 时不渲染任何内容 |
title | string | — | "" | 否 | 标题 |
content | string | — | "" | 否 | 正文内容 |
type | enum | defaultprimarysuccesswarningdangerinfo | "default" | 否 | 语义类型,决定确认按钮的类型(颜色) |
confirmText | string | — | "确认" | 否 | 确认按钮文字;为空时不显示确认按钮 |
cancelText | string | — | "取消" | 否 | 取消按钮文字;为空时不显示取消按钮 |
closable | boolean | — | false | 否 | 点击遮罩区域是否触发 onClose |
事件
| 名称 | 载荷 | 说明 |
|---|
onConfirm | 无 | 点击确认按钮时触发 |
onCancel | 无 | 点击取消按钮时触发 |
onClose | 无 | 确认/取消后或(closable 时)点击遮罩触发,宿主据此置 visible 为 false |
插槽
| 名称 | 说明 |
|---|
default | 正文内容(覆盖 content prop) |
title | 标题内容(覆盖 title prop) |
footer | 底部按钮区(覆盖默认确认/取消按钮) |
行为说明
- visible 为 false 时不渲染(不发射任何绘制指令)
- 内容卡宽度 dialog.width、圆角 dialog.borderRadius、内边距 dialog.padding*,底色 color.background.default,投影 shadow.base
- 遮罩取 color.background.overlay;closable 为 true 时点击遮罩触发 onClose,否则吞掉遮罩点击
- 标题取 dialog.titleFontSize + color.text.primary,内容取 dialog.contentFontSize + color.text.regular,间距 dialog.gap
- 确认按钮按 type 映射语义色;取消按钮固定 default 类型;确认/取消分别触发 onConfirm/onCancel,随后触发 onClose
- 层级取 zIndex.modal(遮罩 zIndex.modalBackdrop),宿主须在其后绘制
消费的令牌
dialog.widthdialog.borderRadiusdialog.paddingHorizontaldialog.paddingVerticaldialog.titleFontSizedialog.contentFontSizedialog.gapzIndex.modalzIndex.modalBackdropshadow.basecolor.background.defaultcolor.background.overlaycolor.text.primarycolor.text.regularcolor.primary.defaultcolor.onPrimarycolor.border.base
LhIcon
since 0.1.0图标:按名称渲染矢量符号,支持尺寸与语义色调,可点击。
Props
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
name | string | — | — | 是 | 图标名(各端按本地图标体系解析并渲染) |
size | enum | smallmediumlarge | "medium" | 否 | 图标尺寸,映射到 icon.size.* 令牌 |
tone | enum | defaultprimarysuccesswarningdangerinforegularsecondary | "default" | 否 | 语义色调;default 为主要文字色,其余取对应语义色 |
事件
插槽
本组件没有声明插槽。
行为说明
- size 映射:small/medium/large 分别取 icon.size.<size> 尺寸令牌
- tone 映射:default 取 color.text.primary;primary/success/warning/danger/info 取对应语义色;regular/secondary 取对应文字色
- 绘制指令为 draw_icon,锚点为图标盒子左上角,由后端按 name 解析本地图形资源
- 点击在几何命中区域内即触发 onClick
消费的令牌
icon.size.smallicon.size.mediumicon.size.largecolor.text.primarycolor.text.regularcolor.text.secondarycolor.primary.defaultcolor.success.defaultcolor.warning.defaultcolor.danger.defaultcolor.info.default
since 0.1.0
输入框:单行文本录入,支持占位、密文、禁用、只读、清除与字数上限。
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
value | string | — | "" | 否 | 当前文本值(受控) |
placeholder | string | — | "" | 否 | 占位提示文字,取 color.text.placeholder 令牌 |
type | enum | textpassword | "text" | 否 | 输入类型;password 时以圆点掩码显示 |
size | enum | smallmediumlarge | "medium" | 否 | 输入框尺寸,映射到 input.height / paddingHorizontal / fontSize 令牌 |
disabled | boolean | — | false | 否 | 是否禁用;禁用时不响应输入、不触发 onValueChange 且呈现禁用样式 |
readonly | boolean | — | false | 否 | 是否只读;只读时可聚焦但不接受输入、不触发 onValueChange |
clearable | boolean | — | false | 否 | 是否显示清除按钮;value 非空时点击触发 onValueChange("") |
maxlength | number | — | — | 否 | 最大字符数;超出时截断新输入 |
| 名称 | 载荷 | 说明 |
|---|
onValueChange | value: string | 文本变化时触发;disabled 或 readonly 为 true 时不触发 |
onFocus | 无 | 获得焦点时触发 |
onBlur | 无 | 失去焦点时触发 |
| 名称 | 说明 |
|---|
prefix | 输入框前缀内容(左侧非输入区) |
suffix | 输入框后缀内容(右侧非输入区) |
- size 映射:small/medium/large 分别取 input.height.<size> / paddingHorizontal.<size> / fontSize.<size> 令牌
- type 为 password 时以圆点掩码显示已有文本
- disabled 为 true 时取 disabled.* 令牌,不响应输入与清除
- readonly 为 true 时可聚焦但不接受输入,不触发 onValueChange
- 聚焦时描边色取 color.focus、宽度 input.focusRingWidth;失焦回 color.border.base + input.borderWidth
- clearable 为 true 且 value 非空时在尾部显示清除按钮,点击触发 onValueChange("")
- maxlength 存在时,输入超出长度的字符被截断
input.height.smallinput.height.mediuminput.height.largeinput.paddingHorizontal.smallinput.paddingHorizontal.mediuminput.paddingHorizontal.largeinput.fontSize.smallinput.fontSize.mediuminput.fontSize.largeinput.borderRadiusinput.borderWidthinput.focusRingWidthinput.clearIconSizecolor.border.basecolor.focuscolor.text.primarycolor.text.placeholdercolor.background.defaultcolor.disabled.bgcolor.disabled.textcolor.disabled.border
LhLoading
since 0.1.0加载指示器:环形旋转动画的静态几何发射,旋转进度交由后端驱动。
Props
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
size | enum | smallmediumlarge | "medium" | 否 | 指示器直径,映射到 loading.size.* 令牌 |
tone | enum | primarysuccesswarningdangerinfo | "primary" | 否 | 环色,取对应语义色令牌 |
事件
本组件没有声明事件。
插槽
本组件没有声明插槽。
行为说明
- size 映射:small/medium/large 分别取 loading.size.<size> 直径令牌
- 绘制指令为 draw_ring,半径为尺寸一半,描边宽 loading.strokeWidth
- 旋转动画由后端驱动(嵌入式朴素调性,指令缓冲层只发几何)
消费的令牌
loading.size.smallloading.size.mediumloading.size.largeloading.strokeWidthcolor.primary.defaultcolor.success.defaultcolor.warning.defaultcolor.danger.defaultcolor.info.default
LhNavbar
since 0.1.0导航栏:页面顶部标题栏,左中右三段布局,支持文字与图标两侧按钮。
Props
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
title | string | — | "" | 否 | 中间标题 |
leftText | string | — | "" | 否 | 左侧按钮文字;与 leftIcon 二者非空时都显示 |
leftIcon | string | — | — | 否 | 左侧图标名(各端按本地图标体系渲染) |
rightText | string | — | "" | 否 | 右侧按钮文字;与 rightIcon 二者非空时都显示 |
rightIcon | string | — | — | 否 | 右侧图标名(各端按本地图标体系渲染) |
bordered | boolean | — | true | 否 | 是否绘制底部分隔线 |
事件
| 名称 | 载荷 | 说明 |
|---|
onLeftClick | 无 | 点击左侧区域时触发 |
onRightClick | 无 | 点击右侧区域时触发 |
插槽
| 名称 | 说明 |
|---|
default | 标题内容(覆盖 title prop) |
left | 左侧内容(覆盖 leftText/leftIcon) |
right | 右侧内容(覆盖 rightText/rightIcon) |
行为说明
- 高度 navbar.height,左右内边距 navbar.paddingHorizontal,底色 color.background.default
- 标题取 navbar.titleFontSize + color.text.primary,水平居中于可用宽度
- 左侧文字取 color.text.primary,图标尺寸 navbar.iconSize;右侧同之
- bordered 为 true 时在底部绘制分隔线(color.border.lighter,宽 navbar.borderWidth)
- 左/右区域存在内容时可点击,分别触发 onLeftClick/onRightClick;无内容时不响应点击
- 层级取 zIndex.sticky,宿主将其作为页面顶部固定栏
消费的令牌
navbar.heightnavbar.paddingHorizontalnavbar.titleFontSizenavbar.iconSizenavbar.borderWidthzIndex.stickycolor.background.defaultcolor.text.primarycolor.border.lighter
LhPicker
since 0.1.0选择器:底部弹出的单列滚轮,工具栏确认/取消 + 中央高亮指示器。
Props
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
visible | boolean | — | false | 否 | 是否显示;为 false 时不渲染任何内容 |
options | array | — | — | 是 | 候选项文本数组(单列) |
value | number | — | 0 | 否 | 选中项索引(0 基);越界时钳制到候选项范围内 |
title | string | — | "" | 否 | 工具栏中间的标题 |
confirmText | string | — | "确认" | 否 | 确认按钮文字 |
cancelText | string | — | "取消" | 否 | 取消按钮文字 |
事件
| 名称 | 载荷 | 说明 |
|---|
onValueChange | value: number | 滚轮停止且选中项变化时触发 |
onConfirm | value: number | 点击确认按钮时触发,携带当前选中索引 |
onCancel | 无 | 点击取消按钮时触发 |
onClose | 无 | 确认/取消后触发,宿主据此置 visible 为 false |
插槽
| 名称 | 说明 |
|---|
default | 滚轮内容区(覆盖默认候选项渲染) |
toolbar | 工具栏(覆盖默认确认/标题/取消) |
行为说明
- visible 为 false 时不渲染(不发射任何绘制指令)
- 面板高度 picker.height,从底部弹出,顶部圆角 picker.borderRadius,底色 color.background.default
- 工具栏高度 picker.toolbarHeight:左取消、中标题、右确认;点击确认触发 onConfirm(当前索引) 后触发 onClose,取消触发 onCancel 后触发 onClose
- 候选项高度 picker.itemHeight、字号 picker.itemFontSize;中央指示器为两条水平线(color.border.lighter),间距 = picker.itemHeight
- 滚轮滚动停止后,最靠近中央指示器的项成为选中项,变化时触发 onValueChange(新索引)
- value 越界时钳制:负数取 0,大于候选项数 - 1 取最后一项
- 遮罩取 color.background.overlay,层级取 zIndex.modal / zIndex.modalBackdrop
消费的令牌
picker.heightpicker.itemHeightpicker.toolbarHeightpicker.itemFontSizepicker.borderRadiuszIndex.modalzIndex.modalBackdropcolor.background.defaultcolor.background.overlaycolor.text.primarycolor.text.secondarycolor.primary.defaultcolor.border.lighter
LhRadio
since 0.1.0单选框:圆环选中控件,选中态内含圆点;选中后再次点击不会取消选中。
Props
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
checked | boolean | — | false | 否 | 是否选中 |
disabled | boolean | — | false | 否 | 是否禁用;禁用时不响应点击且呈现禁用样式 |
label | string | — | "" | 否 | 文字标签(绘制在圆环右侧) |
value | string | — | "" | 否 | 单选值(组内标识,组件本身不含组逻辑,由宿主维护单选组) |
size | enum | smallmediumlarge | "medium" | 否 | 圆环尺寸,映射到 radio.size.* 令牌 |
事件
| 名称 | 载荷 | 说明 |
|---|
onChange | checked: boolean | 由未选中变为选中时触发;已选中时点击不触发,disabled 为 true 时不触发 |
插槽
行为说明
- size 映射:small/medium/large 分别取 radio.size.<size> 圆环尺寸令牌
- 外环描边:未选中取 color.border.base,选中取 color.primary.default,描边宽 radio.ringWidth
- 选中时内部画实心圆点,直径 = 尺寸 × radio.dotScale,取 color.primary.default
- disabled:外环取 color.disabled.border,圆点取 color.disabled.text,文字取 color.text.disabled,且不响应点击
- 点击命中整个行(圆环 + 标签区域):仅当未选中且未禁用时变为选中并触发 onChange(checked=true)
- 圆环与文字间距取 radio.gap
消费的令牌
radio.size.smallradio.size.mediumradio.size.largeradio.ringWidthradio.dotScaleradio.gapcolor.primary.defaultcolor.border.basecolor.disabled.bordercolor.disabled.textcolor.text.primarycolor.text.disabled
LhSwitch
since 0.1.0开关:胶囊轨道 + 圆形滑块的两态切换控件,支持加载态占位。
Props
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
checked | boolean | — | false | 否 | 是否开启 |
disabled | boolean | — | false | 否 | 是否禁用;禁用时不响应点击且呈现禁用样式 |
loading | boolean | — | false | 否 | 是否加载中;加载中滑块位置显示加载环且不响应点击 |
size | enum | smallmediumlarge | "medium" | 否 | 开关尺寸,映射到 switch.width / switch.height 令牌 |
事件
| 名称 | 载荷 | 说明 |
|---|
onChange | checked: boolean | 点击切换开关态时触发;disabled 或 loading 为 true 时不触发 |
插槽
本组件没有声明插槽。
行为说明
- size 映射:small/medium/large 分别取 switch.width.<size> 与 switch.height.<size> 令牌
- 轨道为胶囊(圆角取高度一半):开启取 color.primary.default,关闭取 color.border.base,禁用取 color.disabled.bg
- 滑块为圆形(直径 = 高度 - 2 × switch.gap),取 color.onPrimary;禁用时取 color.text.disabled
- loading 为 true 时滑块位置改画加载环(主色),且不响应点击
- 点击命中轨道区域:翻转开关态并触发 onChange 携带新开关态
消费的令牌
switch.width.smallswitch.width.mediumswitch.width.largeswitch.height.smallswitch.height.mediumswitch.height.largeswitch.gapcolor.primary.defaultcolor.onPrimarycolor.border.basecolor.disabled.bgcolor.text.disabled
LhTag
since 0.1.0标签:小体积状态标记,支持语义类型、尺寸、描边/浅底形态、圆角胶囊与可关闭。
Props
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
text | string | — | "" | 否 | 标签文字 |
type | enum | defaultprimarysuccesswarningdangerinfo | "default" | 否 | 语义类型,决定底色、文字色与描边色 |
size | enum | smallmediumlarge | "medium" | 否 | 标签尺寸,映射到 tag.height / paddingHorizontal / fontSize 令牌 |
plain | boolean | — | false | 否 | 是否为浅底描边形态(实心底 + 白字 vs 语义浅底 + 语义字 + 语义描边) |
round | boolean | — | false | 否 | 是否为胶囊形态(圆角取高度一半) |
closable | boolean | — | false | 否 | 是否显示关闭符;点击关闭符区域触发 onClose |
事件
插槽
行为说明
- size 映射:small/medium/large 分别取 tag.height.<size> 等尺寸令牌
- plain 为 false 时:default 类型取 backgroundDefault 底 + textPrimary 字 + borderBase 描边;其余类型取语义色实心底 + onPrimary 字、无描边
- plain 为 true 时:default 类型同上;其余类型取语义 bg 浅底 + 语义 default 字 + 语义 default 描边
- round 为 true 时圆角取高度一半,否则取 tag.borderRadius
- closable 为 true 时在尾部绘制关闭符(两条对角线),点击其区域触发 onClose
- 关闭符与文字间距取 spacing.xs
消费的令牌
tag.height.smalltag.height.mediumtag.height.largetag.paddingHorizontal.smalltag.paddingHorizontal.mediumtag.paddingHorizontal.largetag.fontSize.smalltag.fontSize.mediumtag.fontSize.largetag.borderWidthtag.borderRadiusspacing.xscolor.background.defaultcolor.text.primarycolor.border.basecolor.onPrimarycolor.primary.defaultcolor.primary.bgcolor.success.defaultcolor.success.bgcolor.warning.defaultcolor.warning.bgcolor.danger.defaultcolor.danger.bgcolor.info.defaultcolor.info.bg
LhText
since 0.1.0文本:消费全局排版令牌的展示型原语,支持字号级别、字重、色调与对齐。
Props
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
content | string | — | "" | 否 | 文本内容 |
level | enum | extraLargelargemediumbasesmallextraSmall | "base" | 否 | 字号级别,映射到 typography.fontSize.* 令牌 |
weight | enum | primarybold | "primary" | 否 | 字重,映射到 typography.fontWeight.* 令牌 |
tone | enum | primaryregularsecondaryplaceholderdisabledselected | "primary" | 否 | 文字色调,映射到 color.text.* 或 color.selected 令牌 |
align | enum | startcenterend | "start" | 否 | 水平对齐方式(在 layout 计算出的行盒内对齐) |
事件
本组件没有声明事件。
插槽
行为说明
- level 映射:extraLarge/large/medium/base/small/extraSmall 分别取 typography.fontSize.<level> 令牌
- weight 映射:primary/bold 分别取 typography.fontWeight.<weight> 令牌
- tone 映射:取 color.text.<tone> 令牌;selected 取 color.selected
- 行高取 typography.lineHeight.primary,layout 高度 = 字号 × 行高
- 绘制指令为 draw_text,align 决定文字在行盒宽度内的水平定位
- 字重当前只进外观结构体供后端选字面,draw_text 指令暂不携带字重
消费的令牌
typography.fontSize.extraLargetypography.fontSize.largetypography.fontSize.mediumtypography.fontSize.basetypography.fontSize.smalltypography.fontSize.extraSmalltypography.fontWeight.primarytypography.fontWeight.boldtypography.lineHeight.primarycolor.text.primarycolor.text.regularcolor.text.secondarycolor.text.placeholdercolor.text.disabledcolor.selected
LhTextarea
since 0.1.0多行输入框:可伸缩高度的长文本录入,支持占位、字数统计与最大长度。
Props
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
value | string | — | "" | 否 | 当前文本值(受控) |
placeholder | string | — | "" | 否 | 占位提示文字,取 color.text.placeholder 令牌 |
rows | number | — | 3 | 否 | 初始可见行数;高度随行数与内容增长 |
disabled | boolean | — | false | 否 | 是否禁用;禁用时不响应输入、不触发 onValueChange 且呈现禁用样式 |
readonly | boolean | — | false | 否 | 是否只读;只读时可聚焦但不接受输入、不触发 onValueChange |
showCount | boolean | — | false | 否 | 是否在右下角显示字数统计(当前长度 / 最大长度) |
maxlength | number | — | — | 否 | 最大字符数;超出时截断新输入;showCount 时作为分母 |
事件
| 名称 | 载荷 | 说明 |
|---|
onValueChange | value: string | 文本变化时触发;disabled 或 readonly 为 true 时不触发 |
onFocus | 无 | 获得焦点时触发 |
onBlur | 无 | 失去焦点时触发 |
插槽
本组件没有声明插槽。
行为说明
- 高度由 rows 决定初始可见行数,内容超出时自动增高(最小高度 textarea.minHeight)
- 聚焦时描边色取 color.focus、宽度 textarea.focusRingWidth;失焦回 color.border.base + textarea.borderWidth
- showCount 为 true 时在右下角绘制字数统计,格式「当前/最大」,取 textarea.countFontSize 与 color.text.secondary;未声明 maxlength 时只显示当前长度
- 超过 maxlength 的输入被截断,不触发带超长文本的 onValueChange
- disabled 为 true 时取 disabled.* 令牌,不响应输入
- readonly 为 true 时可聚焦但不接受输入,不触发 onValueChange
消费的令牌
textarea.paddingVerticaltextarea.paddingHorizontaltextarea.fontSizetextarea.borderRadiustextarea.borderWidthtextarea.focusRingWidthtextarea.countFontSizetextarea.minHeighttypography.lineHeight.primarycolor.border.basecolor.focuscolor.text.primarycolor.text.placeholdercolor.text.secondarycolor.background.defaultcolor.disabled.bgcolor.disabled.textcolor.disabled.border
LhToast
since 0.1.0轻提示:自持可见性与计时的墨色胶囊浮层,旋转/淡入等动画交由后端驱动。
Props
| 名称 | 类型 | 枚举值 | 默认值 | 必填 | 说明 |
|---|
type | enum | defaultsuccesswarningdangerinfo | "default" | 否 | 语义类型;非 default 时在文字前绘制对应语义色圆点 |
duration | number | — | 2000 | 否 | 自动隐藏时长(毫秒);宿主每帧调用 tick 推进计时 |
position | enum | topcenterbottom | "center" | 否 | 在可用区域内的定位;上下两端留 spacing.xl 边距 |
事件
| 名称 | 载荷 | 说明 |
|---|
onClose | 无 | 计时到期自动隐藏时触发;hide() 主动隐藏不触发 |
插槽
本组件没有声明插槽。
行为说明
- show(text) 使其可见并重置计时;hide() 立即隐藏但不触发 onClose
- tick(deltaMs) 累加已用时长,达到 duration 时自动隐藏并触发 onClose
- 不可见时不发射任何绘制指令
- 胶囊底取 color.ink,文字取 color.onPrimary,圆角取 toast.borderRadius
- type 非 default 时在文字前绘制直径为字号的语义色圆点,间距取 toast.gap
- layout 宽度由文字测量得出并封顶可用宽度的 80%,按 position 定位
- 指令缓冲层无 z 序:宿主须按 zIndex.toast 在其他内容之后最后绘制
消费的令牌
toast.fontSizetoast.paddingHorizontaltoast.paddingVerticaltoast.borderRadiustoast.gaptypography.lineHeight.primaryspacing.xlzIndex.toastcolor.inkcolor.onPrimarycolor.success.defaultcolor.warning.defaultcolor.danger.defaultcolor.info.default