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": ""    }]  }}