Appearance
title组件
Hidden Title
基础用法：
<s-title title="你好"></s-title>属性事件插槽简介
基础用法
成华主题
chenghua主题示例
石景山主题
shijingshan主题示例
通常用法
标题溢出提示
sybz 主题（theme 默认值：default）
设置 theme="sybz" 使用思云博智配色。theme 可选 default / chenghua / shijingshan / sybz，默认值为 default。品牌蓝 #4876EF，AI 辅助绿 #00D3AB。
compTitle 也可以作为独立组件使用，完整文档见 CompTitle 组件标题前缀。
标题和后置内容
普通标题使用 title 属性，复杂标题使用 title 插槽。默认插槽用于在标题和副标题后追加状态、标签或其他内容：
vue
<s-title title="属性标题" />
<s-title>
<template #title>命名插槽标题</template>
</s-title>
<s-title title="服务状态">
<s-tag type="success">运行中</s-tag>
</s-title><s-title title="属性标题" />
<s-title>
<template #title>命名插槽标题</template>
</s-title>
<s-title title="服务状态">
<s-tag type="success">运行中</s-tag>
</s-title>属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title | 主标题文案 | string | '' |
icon | 左侧图标，支持已注册的组件名或 Vue 组件；icon 插槽优先 | string / Component | '' |
extra | 右侧操作区文本，extra 插槽优先于该属性 | string | '' |
size | 尺寸，支持 small / default / large | string | default |
subTitle | 副标题文案 | string | '' |
subAttrs | 副标题额外属性 | object | {} |
showTooltip | 标题溢出时是否显示完整内容提示 | boolean | true |
tooltipAttrs | s-tooltip 额外属性 | object | {} |
inner | 是否使用内部缩进 | boolean | false |
margin | 外边距，支持 CSS margin 简写 | string / number | '' |
gap | 标题内部间距，控制图标、标题、副标题、右侧区域间距；图标尺寸变化时自动重新布局 | string / number | '' |
t | 上边距，兼容快捷写法，优先级高于 margin | string / number | '' |
b | 下边距，兼容快捷写法，优先级高于 margin | string / number | '' |
l | 左边距，兼容快捷写法，优先级高于 margin | string / number | '' |
tb | 同时设置上下边距，兼容快捷写法，优先级高于 margin | string / number | - |
height | 组件高度 | string / number | '' |
type | 标题样式类型，支持 '' / icon / simple / form | string | '' |
theme | 主题样式，支持 default / chenghua / shijingshan / sybz | string | default |
tag | 标题标签，支持 div / h1 / h2 / h3 / h4 / h5 / h6 | string | div |
level | 非原生标题标签的无障碍标题层级，支持 1 到 6 | number | 3 |
插槽
| 插槽名 | 说明 |
|---|---|
title | 自定义标题内容，优先级高于 title 属性 |
default | 在标题和副标题后追加状态、标签或其他内容 |
icon | 自定义左侧图标 |
extra | 自定义右侧操作区，优先级高于 extra 属性 |