Skip to content

Label 标签

表单标签组件,for 指向目标控件 id,点击代理聚焦目标控件;支持必填星号与星号位置。

基本用法

基础标签

姓名

必填星号

required 追加 * 标记;position 控制星号位于文本前(before)或后(after,默认)。

必填星号

邮箱

星号前置

手机号

纯文本标签

不设置 for 时仅渲染文本,点击无焦点代理;长文本自动换行不溢出。

纯文本与长文本

无 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星号相对文本的位置stringafter
required追加必填 * 标记(aria-hiddenboolean
sizelabel 文字字号档:small/medium(默认)/largestring
weightlabel 文字字重:regular(默认)/semibold 半粗强调string

插槽

名称说明
默认

说明:for 同时同步到原生 <label>for 属性;点击行为为手动代理,可跨 Shadow DOM 聚焦目标控件。双击不选中文本(与主流行为一致)。

基于 MIT OR Apache-2.0 双许可发布