Skip to content
On this page

组件库文档 tmui.design

宫格 Grid

宫格用于把元素进行水平方向分割成等宽区块,是较为常用的布局方式,通常用于页面导航。


🌶️ 宫格 Grid 示例效果

查看模拟效果
示例代码
vue
<template>
    <tm-app>
        <tm-sheet >
            <tm-text :font-size="24" _class="font-weight-b" label="基础示例(点击项目减少)"></tm-text>

            <tm-divider></tm-divider>
            <tm-grid  :width="638" :col="3">
                <tm-grid-item @click="del(index)" v-for="(item,index) in testNum" :key="index">
                    <tm-text :label="item"></tm-text>
                </tm-grid-item>
            </tm-grid>
			
        </tm-sheet>
		<tm-sheet :margin="[32,0,32,32]">
		    <tm-text :font-size="24" _class="font-weight-b mb-24" label="含有边线(点击项目新增)"></tm-text>
		    <tm-grid showBorder :width="638" :col="5">
		        <tm-grid-item @click="add(index)" v-for="(item,index) in testNum" :key="index">
		            <tm-text :label="item"></tm-text>
		        </tm-grid-item>
		    </tm-grid>
			
		</tm-sheet>
        <tm-sheet :margin="[32,0,32,0]" :padding="[24]">
            <tm-text :font-size="24" _class="font-weight-b" label="带角标的宫格"></tm-text>
            <tm-divider></tm-divider>
            <tm-grid :width="638" :col="4">
                <tm-grid-item dot>
                    <tm-text label="宫格文本"></tm-text>
                </tm-grid-item>
                <tm-grid-item count="HOT">
                    <tm-text label="宫格文本"></tm-text>
                </tm-grid-item>
                <tm-grid-item :count="55">
                    <tm-text label="宫格文本"></tm-text>
                </tm-grid-item>
                <tm-grid-item icon="tmicon-gem">
                    <tm-text label="宫格文本"></tm-text>
                </tm-grid-item>
            </tm-grid>
        </tm-sheet>
        <tm-sheet>
            <tm-text :font-size="24" _class="font-weight-b" label="自定更多内容"></tm-text>
            <tm-divider></tm-divider>
            <tm-grid :width="638" :col="3">
                <tm-grid-item :height="120" dot>
                    <tm-icon name="tmicon-user-fill" :font-size="42"></tm-icon>
                    <tm-text _class="pt-10" :font-size="22" label="宫格文本"></tm-text>
                </tm-grid-item>
                <tm-grid-item color="orange" :height="120" count="积分">
                   <tm-icon name="tmicon-cog-fill" :font-size="42"></tm-icon>
                    <tm-text _class="pt-10" :font-size="22" label="宫格文本"></tm-text>
                </tm-grid-item>
                <tm-grid-item color="green" :height="120" :count="55">
                    <tm-icon name="tmicon-heart-fill" :font-size="42"></tm-icon>
                    <tm-text :font-size="22" label="宫格文本"></tm-text>
                </tm-grid-item>
                <tm-grid-item color="pink"  :height="120" icon="tmicon-gem">
                    <tm-icon name="tmicon-layergroup-fill" :font-size="42"></tm-icon>
                    <tm-text _class="pt-10" :font-size="22" label="宫格文本"></tm-text>
                </tm-grid-item>
                <tm-grid-item   :height="120" >
                    <tm-icon color="blue" name="tmicon-lightbulb-fill" :font-size="42"></tm-icon>
                    <tm-text _class="pt-10" :font-size="22" label="宫格文本"></tm-text>
                </tm-grid-item>
            </tm-grid>
        </tm-sheet>
    </tm-app>
</template>
<script lang="ts" setup>
import { ref } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app";
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmIcon from "@/tmui/components/tm-icon/tm-icon.vue"
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
import tmGridItem from "@/tmui/components/tm-grid-item/tm-grid-item.vue"
import tmGrid from "@/tmui/components/tm-grid/tm-grid.vue"
import tmCheckbox from "@/tmui/components/tm-checkbox/tm-checkbox.vue"
import tmButton from "@/tmui/components/tm-button/tm-button.vue"
const testNum = ref([])
for(let i=0;i<10;i++){
	testNum.value.push(i)
}
const del=(index)=>{
	testNum.value.splice(index,1)
}
const add=(index)=>{
	testNum.value.push(index)
}
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
widthNumber750宽度
colNumber5每行的列数
showBorderBooleanfalse是否显示边线
colorStringwhite背景颜色
transprentBooleanfalse是否透明背景

🌹 事件

🌽 slot插槽

注意,它内部只能放置tm-grid-item,且不能嵌套tm-grid

tm-grid-item

🥗 ref方法

宫格子组件 Grid-Item

🌱 参数

参数名类型默认值描述
heightNumber100高度,如果提供为0,就表示自动高度。
dotBoolean, Stringfalse是否显示红点
iconBoolean, Stringfalse显示图标
countNumber, String0为数字时,显示数字角标,如果为string是显示文本角标
maxCountNumber999数字角标显示最大值
colorStringreddot的主题色
urlString''如果提供了链接,当点击格子时自动跳转页面

🌹 事件

事件名参数返回数据描述
click

💏 文档贡献

此页文档由Kyour贡献,如果对该框架感兴趣的可以参与我们一同进步!