# svelma-pro
导航

# Nav

## 导航

Codesandbox

    <script>
      import { Nav, NavItem, NavLayout } from 'svelma-pro'
    </script>

      <Nav logoImg="/logo-192.png">
        <NavLayout navPosition="center">
          <NavItem>管理工具</NavItem>
          <NavItem>开发资源</NavItem>
        </NavLayout>
        <NavLayout navPosition="end">
          <NavItem>
            <Button type="is-link">登录</Button>
          </NavItem>
        </NavLayout>
      </Nav>

下拉列表

Codesandbox

    <script>
      import { Nav, NavItem, NavLayout } from 'svelma-pro'
    </script>

      <Nav logoImg="/logo-192.png" background="rgba(0,0,0)">
          <NavItem isHover={true}>
            <span style="color:#fff">管理工具</span>
            <div slot="hover">
              <NavItem>开发资源</NavItem>
              <NavItem>开发资源</NavItem>
              <NavItem>开发资源</NavItem>
            </div>
          </NavItem>
          <NavItem><span style="color:#fff">开发资源</span></NavItem>
        </Nav>

## API

### Nav

Name | Description | Type | Values | Default
--- | --- | --- | --- | ---
`height` | 高度 | String | — | `auto`
`logoImg` | logo地址 | String | — | `/logo.png`
`logoUrl` | logo点击跳转地址 | String | — | `/`
`logoH` | logo高度 | String | — | `auto`
`logoW` | logo宽度 | String | — | `40px`
`background` | 背景 | String | — | `rgb(242, 242, 242)`

### NavItem

Name | Description | Type | Values | Default
--- | --- | --- | --- | ---
`isHover` | 是否开启下拉列表 | Boolean | — | `false`
`slot` | 开启下拉列表情况下,slot='hover'插入下拉列表内容 | slot | hover,'' | `''`

### NavLayout

Name | Description | Type | Values | Default
--- | --- | --- | --- | ---
`navPosition` | NavItem布局 | String | center,start,end | `center`