# 主分类宫格
图标文本形式展示导航区
# 基础调用
- 该组件外层为
sino-grid组件包裹,通过col设置内部宫格的列数 - 内部通过
sino-grid-item组件的slot设置宫格的内容 - 如果不需要宫格的边框,可以设置
border为false
<sino-grid col=4></sino-grid>
# 自定义调用
<sino-grid col=4 :list="list"></sino-grid>
<script>
export default {
data(){
list:[
{
name:'资讯',
src:'',
open_type:'tab',
url:''
},
{
name:'课程',
src:'',
open_type:'tab',
url:''
},
{
name:'班级',
src:'',
open_type:'tab',
url:''
},
{
name:'考试',
src:'',
open_type:'tab',
url:''
}
]
}
}
</script>
# API
# Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| col | 宫格的列数 | Number | 4 | |
| list | 宫格数据 | Array | [{list-item},{list-item}...] |
# list-item props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| name | 导航名称 | Number | - | - |
| open_type | 打开类型 | String | Inline | Inline,tab,link |
| src | 图标地址 | String | - | - |
| url | 链接路径 | String | - | - |