Skip to content

c7-title 标题组件

一个简洁的标题组件,支持自定义标题文本、大小和颜色,并提供插槽功能。

基础用法

最简单的使用方式,设置标题文本:

自定义标题大小

通过 label-size 属性设置标题大小,支持 h1-h6 或自定义像素值:

自定义像素大小

除了预设的 h1-h6 大小外,还可以使用自定义像素值:

自定义标题颜色

通过 label-color 属性设置标题下方的颜色块:

使用插槽

在标题右侧添加自定义内容:

Attributes

属性名说明类型可选值默认值
label标题文本String-'默认标题'
label-size标题大小String'h1' / 'h2' / 'h3' / 'h4' / 'h5' / 'h6' 或自定义像素值'h1'
label-color标题下方颜色块颜色String任意颜色值''

label-size 大小对应关系

字体大小说明
h132px一级标题
h228px二级标题
h324px三级标题
h420px四级标题
h518px五级标题
h616px六级标题

Slots

插槽名说明
default标题右侧区域内容

样式说明

  • 标题默认使用微软雅黑字体
  • 标题下方有 3px 的边框线
  • label-color 为空时,不显示颜色块
  • 组件采用 flex 布局,标题在左侧,插槽内容在右侧