# 主分类宫格

图标文本形式展示导航区

# 基础调用

  • 该组件外层为sino-grid组件包裹,通过col设置内部宫格的列数
  • 内部通过sino-grid-item组件的slot设置宫格的内容
  • 如果不需要宫格的边框,可以设置borderfalse
<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 - -
Last Updated: 9/5/2020, 10:19:56 PM