weex-ui-demo/packages/i-header/README.md

A rich interaction, lightweight, high performance UI library based on Weex

# i-header 

> Weex 顶部导航栏组件

### 规则
- 优先使用 Native 自带的 [Navigator Bar](https://developer.apple.com/documentation/uikit/uinavigationbar)


## [Demo](https://h5.m.taobao.com/trip/wxc-minibar/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwxc-minibar%2Fdemo%2Findex.native-min.js)
<img src="https://img.alicdn.com/tfs/TB1IK_TfxPI8KJjSspfXXcCFXXa-750-1334.jpg" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB1EJY_SpXXXXcmXpXXXXXXXXXX-200-200.png" width="160"/>

## 使用方法

```vue
<template>
   <i-header title='title' @centerClick='centerClick'></i-header>
</template>

<script>
  import { iHeader } from 'weex-ui';
  const modal = weex.requireModule('modal');

  export default {
    components: { iHeader },
    methods: {
      centerClick () {
      },
    }
  };
</script>
```

更详细代码可以参考 [demo](https://github.com/alibaba/weex-ui/blob/master/example/minibar/index.vue)


### 可配置参数

| Prop | Type | Required | Default | Description |
|-------------|------------|--------|-----|-----|
| title | `String` |`Y`| `-` | 标题 |
| styleEx | `Object` |`N`| `{}` | 最外层样式|
| leftItem | `Object` |`N`| `{}` | 左侧内容|
| rightItem | `Object` |`N`| `{}` |  右侧内容|
| ios | `Boolean` |`N`| `false` |  是否是ios手机 |
| goBack | `Boolean` |`N`| `true` | 是否默认点击左侧返回上一页 |
| height | `String` |`N`| `120px` | 最外层高度 |
| source | `String` |`N`| `-` | 从哪个页面跳转过来的 |
| iphoneX | `Boolean` | `N` |`false`| 是否是iphoneX手机 |
| isShowTitle | `Boolean` | `N`|`true` | 是否展示标题 |
| middleTextColor | `String` |`N`| `#323232` | 标题颜色 |

### Slot
当以上配置都不满足时候，你可以使用 slot 来自定义设置你的组件。   `weex-ui >= 0.3.9`

1. `<slot name="left"></slot>`：左边返回坑位
2. `<slot name="middle"></slot>`：中间标题坑位
3. `<slot name="right"></slot>`：右边坑位

<img src="https://img.alicdn.com/tfs/TB1nwLviZrI8KJjy0FhXXbfnpXa-752-114.png" width="300"/>

```
<i-header background-color="#FFF3CD">
  <image src="https://img.alicdn.com/tfs/TB1QN8pdlHH8KJjy0FbXXcqlpXa-220-80.png"
         slot="left"
         style="height: 32px;width: 88px;"></image>
  <text style="font-size: 40px;" slot="middle">Customize this component</text>
  <image slot="right"
         src="https://img.alicdn.com/tfs/TB1j39Uc0fJ8KJjy0FeXXXKEXXa-160-128.png"
         style="height: 32px;width: 40px"></image>
</i-header>
```

### 事件回调

```
// @leftClick="leftClick"
// @rightClick="rightClick"
// @centerClick="centerClick"
```