### 标题

`Header`不光是`Header`，你知道UI一般很喜欢在`Header`旁边弄一个带颜色的竖条（确实，光有文字太单调了），所以它可以有个条。

```html
<template>
  <div>
    <cl-h1 scene>这是标题</cl-h1>
    <cl-h2 type="success" text-gap="30px">这是标题</cl-h2>
    <cl-h3 type="info" bar-width="6px">这是标题</cl-h3>
    <cl-h4 type="warning" inline>这是标题</cl-h4>
    <cl-h5 type="danger">这是标题</cl-h5>
    <cl-h6 type="primary">这是标题</cl-h6>
  </div>
</template>
<!-- typography-1.vue -->
```

### 属性说明
| 属性 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| type | string| `primary` | 这个条的主题类型，可选值为`primary`,`success`,`info`,`warning`,`danger` ，默认为`primary`。 |
|text-gap|string|`16px`|文字和这个条之间的距离。|
|scene|boolean|`false`|文字的颜色是否跟随这个条的颜色。|
|bar-width|string|`4px`|这个条的宽度。|
|inline|boolean|`false`|整个标题是否以行内模式显示。|

