Kxs UINav 导航栏
● 横向
导航栏的基础用例。
展示代码
vue
<template>
<k-menu>
<k-nav>横向导航栏1</k-nav>
<k-nav>横向导航栏2</k-nav>
<k-nav>横向导航栏3</k-nav>
<k-nav>横向导航栏4</k-nav>
<k-nav>横向导航栏5</k-nav>
</k-menu>
</template>
● 竖向
通过添加Perpendicular属性来设置导航栏竖向
展示代码
vue
<template>
<k-menu Perpendicular>
<k-nav >竖向导航栏1</k-nav>
<k-nav >竖向导航栏2</k-nav>
<k-nav >竖向导航栏3</k-nav>
<k-nav >竖向导航栏4</k-nav>
<k-nav >竖向导航栏5</k-nav>
</k-menu>
</template>
● 禁用选项
通过给选项添加disabled属性来设置导航项的禁用状态
展示代码
vue
<template>
<k-menu>
<k-nav disabled>竖向导航栏1</k-nav>
<k-nav>竖向导航栏2</k-nav>
<k-nav disabled>竖向导航栏3</k-nav>
<k-nav>竖向导航栏4</k-nav>
<k-nav disabled>竖向导航栏5</k-nav>
</k-menu>
</template>
● 带图标
默认通过icon给导航项添加前置图标，可通过postIcon改为添加后置图标
展示代码
vue
<template>
<k-menu>
<k-nav icon="k-icon-star_line">导航栏1</k-nav>
<k-nav icon="k-icon-star_line">导航栏2</k-nav>
<k-nav icon="k-icon-star_line">导航栏3</k-nav>
<k-nav icon="k-icon-star_line">导航栏4</k-nav>
<k-nav icon="k-icon-star_line">导航栏5</k-nav>
</k-menu>
<k-menu>
<k-nav postIcon="k-icon-star_line">导航栏1</k-nav>
<k-nav postIcon="k-icon-star_line">导航栏2</k-nav>
<k-nav postIcon="k-icon-star_line">导航栏3</k-nav>
<k-nav postIcon="k-icon-star_line">导航栏4</k-nav>
<k-nav postIcon="k-icon-star_line">导航栏5</k-nav>
</k-menu>
</template>
● Attributes 参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| Perpendicular | 是否为竖向导航栏 | boolean | — | false |
| disabled | 是否禁用 | boolean | — | false |
| postIcon | 图标类名(在后) | string | — | — |
| icon | 图标类名(在前) | string | — | — |