# Topbar 顶部标题栏

### 引入

```js
import yTopbar from "yesaway-wui/src/components/yTopbar";
```

## 代码演示

### 基础用法
通过`title`设置标题文案；通过`is-logo`控制是否显示项目主图标；`is-back`控制是否显示返回按钮；` is-option`控制是否显示右侧的选项图标。
```html
<y-topbar title="有标题的" is-logo :is-back="false" is-option></y-topbar>
```
###使用插槽
使用插槽`left``right`替换左侧返回按钮及右侧选项按钮。
```html
<y-topbar title="带选项的">
    <div slot="left">left</div>
    <div slot="right">right</div>
</y-topbar>
```
使用插槽`title`替换中间标题部分。
```html
<y-topbar>
    <div slot="title">
        <i class="topbar_test"></i>
        slot title
    </div>
</y-topbar>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 标题 | _string_ | --- |
| topic | 主题，可配置主题为`transparent` | _string_ | --- |
| is-back | 是否显示左侧返回按钮 | _Boolean_ | true |
| is-bold | 标题文字是否加粗 | _Boolean_ | true |
| is-fix | 是否浮动到顶部 | _Boolean_ | false |
| is-logo | 是否显示logo | _Boolean_ | false |
| is-share | 是否显示右侧分享按钮 | _Boolean_ | false |
| share-info | 配置分享内容 | _Boolean_ | false |
| fnBack | 点击左侧返回按钮时触发 | _Function_ |  |
| fnOption | 点击右侧选项按钮时触发 | _Function_ |  |
| fnShare | 点击右侧分享按钮时触发 | _Function_ |  |

### Slots

| 名称           | 说明           |
| -------------- | -------------- |
| title        | 标题       |
| left         | 左侧按钮       |
| right        | 右侧按钮       |