Label 标签
表单标签组件,for 指向目标控件 id,点击代理聚焦目标控件;支持必填星号与星号位置。
基本用法
基础标签
必填星号
required 追加 * 标记;position 控制星号位于文本前(before)或后(after,默认)。
必填星号
星号前置
纯文本标签
不设置 for 时仅渲染文本,点击无焦点代理;长文本自动换行不溢出。
纯文本与长文本
尺寸
size 控制字号三档:small 小字辅助 / medium(默认)基准字号 / large 大字强调,分别映射 --oas-font-size-sm / md / lg 字号 token。
尺寸档位
字重
weight 控制字重两档:regular(默认)常规 / semibold 半粗强调(font-weight: 600)。
字重档位
状态
error 校验失败红字;disabled 静态灰化(纯视觉,不拦事件——关联控件自己管 disabled);colon 文本后冒号。
状态
提示(tooltip)
label 自身不加提示属性——提示能力通过组合 oas-tooltip 实现(组件套组件):
组合 oas-tooltip
颜色
color 支持 11 个预设色名(明暗主题自动适配)或任意 CSS 色值(直接生效,优先于预设与默认)。文字走达标 token:
预设色板
自定义色值
布局对齐与换行(宿主 CSS 等价做法)
文字对齐/换行这类布局样式不需要组件属性,宿主一行 CSS 即得:
对齐与换行(宿主 CSS)
必填标记形态(星号 + 位置)由 required + position 覆盖;Field 组合(label + 错误提示 + 描述)由 oas-form-item 承载。
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
colon | 文字后补冒号(:) | boolean | — |
color | 文字色:支持 11 个预设名(映射 --oas-preset-*-text 达标 token)或任意 CSS 色值 | string | — |
disabled | 禁用态(灰化不可点) | boolean | — |
error | 错误态(红色文字) | boolean | — |
for | 目标控件 id,点击代理 getElementById(for).focus() | string | — |
position | 星号相对文本的位置 | string | after |
required | 追加必填 * 标记(aria-hidden) | boolean | — |
size | label 文字字号档:small/medium(默认)/large | string | — |
weight | label 文字字重:regular(默认)/semibold 半粗强调 | string | — |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | — |
说明:
for同时同步到原生<label>的for属性;点击行为为手动代理,可跨 Shadow DOM 聚焦目标控件。双击不选中文本(与主流行为一致)。