Amaze UI

Web 组件

Header


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

组件演示

default(图标)

<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(图片图标)

<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.clouddeep.cn/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(图标+文字)

<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(多图标)

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(结合按钮)

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

默认样式:

.am-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1010;
}
<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,可以根据具体情况做调整。

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

使用方法

直接使用

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

使用 Handlebars

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

云适配 WebIDE

  • 将组件拖入编辑界面;
  • 点击右侧面板里的【数据采集】按钮,按以下格式采集数据。
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;

数据接口

{
  "id": "",

  "className": "",

  "theme": "",

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

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

    "title": "",

    "right": [{
        "link": "",
        "title": "",
        "icon": "",
        "customIcon": "",
        "className": ""
    }]
  }
}
侧栏导航
Amaze UI 微信
在微信上关注我们