Header 全局页头

全局导航页头

示例

基本用法

React

const { Menu } = antd
const { SadHeader } = SlugAntd

export default class App extends React.Component {
  render() {
    return (
      <SadHeader
        isNeedIndex
        logo={
          <a className='title' href='/'>
            <div className='logo'></div>
            <h1 className='name'>SlugTeam</h1>
          </a>
        }>
        <Menu className='menu' theme='dark' mode='horizontal'>
          <Menu.Item>
            <a target='_blank' href='https://moss.oa.com/docs/'>
              使用手册
            </a>
          </Menu.Item>
        </Menu>
      </SadHeader>
    )
  }
}

Vue

<template>
  <sad-header is-need-index>
    <template #logo>
      <a class="title" href="/">
        <div class="logo"></div>
        <h1 class="name">SlugTeam</h1>
      </a>
    </template>
    <a-menu class="menu" theme="dark" mode="horizontal">
      <a-menu-item key="使用手册">
        <a target="_blank" href="https://moss.oa.com/docs/">使用手册</a>
      </a-menu-item>
    </a-menu>
  </sad-header>
</template>

<script>
  export default {}
</script>

<style>
  .sad-header-demo .title {
    flex: none;
    display: flex;
    align-items: center;
  }
  .sad-header-demo .logo {
    width: 32px;
    height: 32px;
    background: url(/logo.png) no-repeat center / contain;
  }
  .sad-header-demo .name {
    margin: 0 12px;
    font-size: 1.5em;
    color: #fff;
  }
  .sad-header-demo .menu {
    line-height: 64px;
  }
</style>

API

Props

名称	说明	类型	默认值	版本
isNeedIndex	用于设置是否显示营销云首页导航	Boolean	false	0.5.1

Slots

名称	说明
default	自定义顶部右侧内容，如导航菜单
logo	自定义 Logo 区域