Web 组件 Header

http://amazeui.org/1.x/widgets/header/

页头组件，为移动页面顶部的导航条设计。

目录

• 组件演示
  • default（图标）
  • default（图片图标）
  • default（图标+文字）
  • default（多图标）
  • default（结合按钮）
• 顶部固定
• 使用方法
  • 直接使用
  • 使用 Handlebars
  • 云适配 WebIDE
• 数据接口

组件演示

default（图标）

 New Win  Copy

Amaze UI

<header data-am-widget="header" class="am-header am-header-default">
  <div class="am-header-left am-header-nav">
    <a href="#left-link" class="">
      <i class="am-header-icon am-icon-home"></i>
    </a>
  </div>
  <h1 class="am-header-title">
    <a href="#title-link">Amaze UI</a>
  </h1>
  <div class="am-header-right am-header-nav">
    <a href="#right-link" class="">
      <i class="am-header-icon am-icon-bars"></i>
    </a>
  </div>
</header>

default（图片图标）

 New Win  Copy

<header data-am-widget="header" class="am-header am-header-default">
  <div class="am-header-left am-header-nav">
    <a href="#left-link" class="">
      <img class="am-header-icon-custom" src="data:image/svg+xml;charset=utf-8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 12 20&quot;&gt;&lt;path d=&quot;M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z&quot; fill=&quot;%23fff&quot;/&gt;&lt;/svg&gt;"
      alt="" />
    </a>
  </div>
  <h1 class="am-header-title">
    <img src="http://cdn.amazeui.org/assets/i/brand/amazeui-cw.png" />
  </h1>
  <div class="am-header-right am-header-nav">
    <a href="#right-link" class="">
      <img class="am-header-icon-custom" src="data:image/svg+xml;charset=utf-8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 42 26&quot; fill=&quot;%23fff&quot;&gt;&lt;rect width=&quot;4&quot; height=&quot;4&quot;/&gt;&lt;rect x=&quot;8&quot; y=&quot;1&quot; width=&quot;34&quot; height=&quot;2&quot;/&gt;&lt;rect y=&quot;11&quot; width=&quot;4&quot; height=&quot;4&quot;/&gt;&lt;rect x=&quot;8&quot; y=&quot;12&quot; width=&quot;34&quot; height=&quot;2&quot;/&gt;&lt;rect y=&quot;22&quot; width=&quot;4&quot; height=&quot;4&quot;/&gt;&lt;rect x=&quot;8&quot; y=&quot;23&quot; width=&quot;34&quot; height=&quot;2&quot;/&gt;&lt;/svg&gt;"
      alt="" />
    </a>
  </div>
</header>

default（图标+文字）

 New Win  Copy

首页 

Amaze UI

菜单 

<header data-am-widget="header" class="am-header am-header-default">
  <div class="am-header-left am-header-nav">
    <a href="#left-link" class="">
      <span class="am-header-nav-title">首页</span>
      <i class="am-header-icon am-icon-home"></i>
    </a>
  </div>
  <h1 class="am-header-title">Amaze UI</h1>
  <div class="am-header-right am-header-nav">
    <a href="#right-link" class="">
      <span class="am-header-nav-title">菜单</span>
      <i class="am-header-icon am-icon-bars"></i>
    </a>
  </div>
</header>

default（多图标）

 New Win  Copy

 

Amaze UI

 

<header data-am-widget="header" class="am-header am-header-default">
  <div class="am-header-left am-header-nav">
    <a href="#left-link" class="">
      <i class="am-header-icon am-icon-home"></i>
    </a>
    <a href="#phone-link" class="">
      <i class="am-header-icon am-icon-phone"></i>
    </a>
  </div>
  <h1 class="am-header-title">Amaze UI</h1>
  <div class="am-header-right am-header-nav">
    <a href="#user-link" class="">
      <i class="am-header-icon am-icon-user"></i>
    </a>
    <a href="#cart-link" class="">
      <i class="am-header-icon am-icon-shopping-cart"></i>
    </a>
  </div>
</header>

default（结合按钮）

 New Win  Copy

返回 

Amaze UI

 

<header data-am-widget="header" class="am-header am-header-default">
  <div class="am-header-left am-header-nav">
    <a href="#left-link" class="am-btn am-btn-default">
      <span class="am-header-nav-title">返回</span>
      <i class="am-header-icon am-icon-home"></i>
    </a>
  </div>
  <h1 class="am-header-title">Amaze UI</h1>
  <div class="am-header-right am-header-nav">
    <a href="#user-link" class="">
      <i class="am-header-icon am-icon-user"></i>
    </a>
    <a href="#cart-link" class="am-btn am-btn-secondary">
      <i class="am-header-icon am-icon-shopping-cart"></i>
    </a>
  </div>
</header>

顶部固定

在默认样式的基础上添加 .am-header-fixed。

默认样式：

 Copy

.am-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1010;
}

 Copy

<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
  <div class="am-header-left am-header-nav">
    <a href="#left-link" class="">
      <i class="am-header-icon am-icon-home"></i>
    </a>
  </div>
  <h1 class="am-header-title">
    <a href="#title-link">Amaze UI</a>
  </h1>
  <div class="am-header-right am-header-nav">
    <a href="#right-link" class="">
      <i class="am-header-icon am-icon-bars"></i>
    </a>
  </div>
</header>

如果页面中有固定顶部的 Header，JS 会在 <body> 上添加 .am-with-fixed-header，这个 class 下面默认设置了padding-top: 49px，可以根据具体情况做调整。

 Copy

.am-with-fixed-header {
  padding-top: @am-header-height;
}

使用方法

直接使用

• 拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（点此下载） <body> 区域；
• 将示例代码中的内容替换为自己的内容。

使用 Handlebars

本组件 Handlebars partial 名称为 header，使用细节参照折叠面板组件。

云适配 WebIDE

• 将组件拖入编辑界面；
• 点击右侧面板里的【数据采集】按钮，按以下格式采集数据。

 Copy

var data = {

  "left": [
      {
        "link": "",         // url : http://xxx.xxx.xxx
        "title": "",        // 链接标题
        "icon": "",         // 字体图标名称: 使用 Amaze UI 字体图标 http://www.amazeui.org/css/icon
        "customIcon": ""    // 自定义图标 URL，设置此项后当前链接不再显示 icon
      }
  ],

  "title": "",          //可写 html 标签

  "right": [ // 右侧字段含义同左侧
      {
        "link": "",
        "title": "",
        "icon": "",
        "customIcon": ""
      }
  ]
};

return data;

数据接口

 Copy

{
  "id": "",

  "className": "",

  "theme": "",

  "options": {
    "fixed": false
  },

  "content": {
    "left": [{
        "link": "",
        "title": "",
        "icon": "",
        "customIcon": "",
        "className": ""
    }],

    "title": "",

    "right": [{
        "link": "",
        "title": "",
        "icon": "",
        "customIcon": "",
        "className": ""
    }]
  }
}