# CHomeNav 首页导航 ## 功能说明 用于首页显示导航菜单项的组件,支持两列或三列排版,可以显示分组标题。搭配CHomeItem子组件使用,用于展示一组功能入口。 ## 引用方式 ```js import { CHomeNav, CHomeItem } from '@components/layout/homeNav'; ``` ## 组件结构 首页导航组件由以下两个组件组成: 1. `CHomeNav` - 导航容器,作为导航项的容器,控制排版 2. `CHomeItem` - 导航项,代表一个功能入口 ## 组件参数 ### CHomeNav - `layout` (String,可选):排版方式,默认值为 'two' - `two`:两列排版 - `three`:三列排版 - `title` (String,可选):分组标题,不设置则不显示 ### CHomeItem - `label` (String,必选):导航项名称 - `icon` (String,必选):导航项图标地址 - `href` (String,必选):点击后跳转的链接地址 ## 使用示例 ### 基础用法 ```html ``` ### 三列排版 ```html ``` ## 注意事项 1. CHomeNav 组件内部需要包含 CHomeItem 子组件,不支持其他内容 2. CHomeItem 组件使用了 CAnchor 组件处理链接跳转,能够根据链接类型自动选择合适的跳转方式 3. 根据设计,当使用两列布局时图标稍大,三列布局时图标稍小 4. 传给 CHomeItem 的 icon 应该是一个完整的图片路径 5. 不管使用哪种布局,都会自动调整导航项的间距,保证美观