跳到主要内容

宫格 Grid

基础宫格布局,宫格共包含 2 个组件: TiGridTiGridItem,这两个组件必须配合使用。

安装使用

import { TiGrid, TiGridItem } from '@titian-design/mobile-vue'

用法示例

基本使用

展示图标和文字

<template>
<TiGrid>
<TiGridItem icon="home" text="首页" />
<TiGridItem icon="mine-to-pay" text="待付款" />
<TiGridItem icon="to-deliver" text="待收货" />
<TiGridItem icon="to-receive" text="待发货" />
</TiGrid>
</template>

<script lang="ts" setup>
import { TiGrid, TiGridItem } from '@titian-design/mobile-vue';
</script>

自定义每行个数

宫格默认是每行4个,使用时可自定义每行个数。

<template>
<TiGrid :columns="3">
<TiGridItem icon="home" text="首页" />
<TiGridItem icon="mine-to-pay" text="待付款" />
<TiGridItem icon="to-deliver" text="待收货" />
<TiGridItem icon="to-receive" text="待发货" />
</TiGrid>
</template>

<script lang="ts" setup>
import { TiGrid, TiGridItem } from '@titian-design/mobile-vue';
</script>

设置宫格间距离

<template>
<TiGrid :gutter="16">
<TiGridItem icon="home" text="首页" />
<TiGridItem icon="mine-to-pay" text="待付款" />
<TiGridItem icon="to-deliver" text="待收货" />
<TiGridItem icon="to-receive" text="待发货" />
</TiGrid>
</template>

<script lang="ts" setup>
import { TiGrid, TiGridItem } from '@titian-design/mobile-vue';
</script>

自适应展示正方型

<template>
<TiGrid square>
<TiGridItem icon="home" text="首页" />
<TiGridItem icon="mine-to-pay" text="待付款" />
<TiGridItem icon="to-deliver" text="待收货" />
<TiGridItem icon="to-receive" text="待发货" />
</TiGrid>
</template>

<script lang="ts" setup>
import { TiGrid, TiGridItem } from '@titian-design/mobile-vue';
</script>

自定义宫格内容

<template>
<TiGrid title="自定义图标尺寸,颜色">
<TiGridItem icon="mine-to-pay" :size="60" text="图标尺寸" />
<TiGridItem icon="to-deliver" color="red" text="定义颜色" />
<TiGridItem icon="to-receive" text="待发货" />
<TiGridItem icon="to-comment" text="待评价" />
<TiGridItem icon="to-refund" text="退货" />
</TiGrid>

<TiGrid title="使用 slot 定义内容">
<TiGridItem custom-content>
<div slot="content">待付款</div>
</TiGridItem>
<TiGridItem custom-content>
<div slot="content">待收货</div>
</TiGridItem>
<TiGridItem custom-content>
<div slot="content">待发货</div>
</TiGridItem>
<TiGridItem custom-content>
<div slot="content">待评价</div>
</TiGridItem>
</TiGrid>
</template>

<script lang="ts" setup>
import { TiGrid, TiGridItem } from '@titian-design/mobile-vue';
</script>

TiGrid API

属性 Properties

名称类型是否必填默认值说明备注
titlestring-宫格标题-
columnsnumber4宫格的每行展示的个数-
borderbooleantrue是否使用外边框-
gutternumber0宫格之间的距离-
squarebooleanfalse是否自适应展示正方型-
directioncolumn | rowcolumn排列方向-

插槽 Slots

名称说明备注
title自定义标题插槽-

可扩展样式名 External Class

类名说明备注
ext-class扩展样式类名-

CSS 变量 CSS Variables

变量默认值说明备注
--grid-title-padding-v24px标题的垂直方向内边距-
--grid-title-padding-h24px标题的水平方向内边距-
--grid-bg-colorvar(--neutral-color-9, #ffffff)--

TiGridItem API

属性 Properties

名称类型是否必填默认值说明备注
iconstring-图标-
sizenumber-图标尺寸-
colorstring-图标颜色-
textstring-文本-
custom-contentbooleanfalse是否自定义内容-

插槽 Slots

名称说明备注
content自定义内容块插槽需要使用自定义内容时,需要同时设置 customContent 才能生效。
icon自定义图标插槽当传入 icon 属性时,优先取属性值
text自定义文字插槽当传入 text 属性时,优先取属性值

可扩展样式名 External Class

类名说明备注
ext-class根节点可扩展的类名-
text-class文本节点可扩展的类名-
icon-class图标节点可扩展的类名-

CSS 变量 CSS Variables

变量默认值说明备注
--grid-item-padding-v16px垂直方向内边距-
--grid-item-padding-h8px水平方向边距-
--grid-text-padding-v0文字垂直方向内边距-
--grid-text-padding-h12px文字水平方向内边距-
--grid-item-bg-colorvar(--neutral-color-9, #ffffff)宫格内容块的背景色-
--grid-item-text-colorvar(--neutral-color-1, #212121)文字颜色-
--grid-item-text-font-szie28px--
--grid-item-text-line-height28px--