# 主分类宫格
图标文本形式展示导航区
# 基础调用
- 该组件外层为
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 | - | - |