```html
<div class="demo-block" id="x-header-demo1">
  <br>
  <lx-x-header>This is the page title.</lx-x-header>
  <br>
  <lx-x-header title="use prop:title"></lx-x-header>
  <br>
  <lx-x-header :left-options="{showBack: false}">do not show Back</lx-x-header>
  <br>
  <lx-x-header :left-options="{backText: ''}">set empty back text</lx-x-header>
  <br>
  <lx-x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">with more menu</lx-x-header>
  <br>
  <lx-x-header>with right link<a slot="right">Feedback</a></lx-x-header>
  <br>
  <lx-x-header>long long long long long long long text<a slot="right">Feedback</a></lx-x-header>
  <br>
  <lx-x-header>with left slot<a slot="left">Close</a></lx-x-header>
  <br>
  <lx-x-header>
    <span>overwrite-left</span>
    <lx-x-icon slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></lx-x-icon>
  </lx-x-header>
  <br>
  <lx-x-header style="background-color:#000;">custom background color</lx-x-header>
  <br>
  <lx-x-header title="slot:overwrite-title">
    <div class="overwrite-title-demo" slot="overwrite-title">
      <lx-button-tab>
        <lx-button-tab-item selected>A</lx-button-tab-item>
        <lx-button-tab-item>B</lx-button-tab-item>
      </lx-button-tab>
    </div>
  </lx-x-header>
  <div v-transfer-dom>
    <lx-actionsheet :menus="menus" v-model="showMenus" show-cancel></lx-actionsheet>
  </div>
</div>

<script>
// 页头栏.md
new Vue({
  el: '#x-header-demo1',
  data: {
    menus: {
      menu1: 'Take Photo',
      menu2: 'Choose from photos'
    },
    showMenus: false
  }
})
</script>

<style>
.overwrite-title-demo {
  margin-top: 5px;
}
</style>
```