主题
LimeGrid 宫格
- 宫格布局用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。uniapp/uniappx(h5,ios,安卓)
- 插件依赖
lime-style,lime-icon,lime-badge,lime-shared,不喜勿下
安装
在
注意
- 🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。
- 🔔 如果不需要lime-svg在lime-icon代码中注释掉即可
html
// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->文档
代码演示
基础使用
通过icon属性设置格子内的图标，通过image属性设置格子图片，text属性设置文字内容。
html
<l-grid>
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar2.png" />
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar3.png" />
<l-grid-item text="最多五个字" image="https://tdesign.gtimg.com/mobile/demos/avatar4.png" />
</l-grid>自定义列数
默认一行展示四个格子，可以通过column自定义列数。
html
<l-grid :column="5">
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar2.png" />
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar3.png" />
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar4.png" />
<l-grid-item text="最多四字" image="https://tdesign.gtimg.com/mobile/demos/avatar5.png" />
</l-grid>页面导航
可以通过url属性进行页面跳转，通过openType属性控制跳转类型。
html
<l-grid :column="3">
<l-grid-item text="跳到首页" url="/pages/index/index" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
<l-grid-item text="跳到首页" url="/pages/index/index" image="https://tdesign.gtimg.com/mobile/demos/avatar2.png" />
<l-grid-item text="跳到首页" url="/pages/index/index" image="https://tdesign.gtimg.com/mobile/demos/avatar3.png" />
</l-grid>格子间距
通过gutter属性设置格子之间的距离。
html
<l-grid :gutter="10">
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar2.png" />
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar3.png" />
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar4.png" />
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar2.png" />
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar4.png" />
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar3.png" />
</l-grid>带描述宫格
通过description属性详细描述
html
<l-grid :column="3">
<l-grid-item text="标题文字" description="描述文字" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
<l-grid-item text="标题文字" description="描述文字" image="https://tdesign.gtimg.com/mobile/demos/avatar2.png" />
<l-grid-item text="最多六个文字" description="描述文字" image="https://tdesign.gtimg.com/mobile/demos/avatar3.png" />
</l-grid>内容横排
通过layout属性设置为horizontal，可以让宫格的内容呈横向排列。
html
<l-grid :column="2" align="left">
<l-grid-item text="标题文字" description="描述文字" layout="horizontal" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
<l-grid-item text="标题文字" description="描述文字" layout="horizontal" image="https://tdesign.gtimg.com/mobile/demos/avatar2.png" />
</l-grid>带边框宫格
通过border属性设置为true可给格子加描边。
html
<l-grid :column="3" :border="true">
<l-grid-item text="标题文字" description="描述文字" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
<l-grid-item text="标题文字" description="描述文字" image="https://tdesign.gtimg.com/mobile/demos/avatar2.png" />
<l-grid-item text="标题文字" description="描述文字" image="https://tdesign.gtimg.com/mobile/demos/avatar3.png" />
<l-grid-item text="标题文字" description="描述文字" image="https://tdesign.gtimg.com/mobile/demos/avatar4.png" />
<l-grid-item text="标题文字" description="描述文字" image="https://tdesign.gtimg.com/mobile/demos/avatar5.png" />
<l-grid-item text="标题文字" description="描述文字" image="https://tdesign.gtimg.com/mobile/demos/avatar2.png" />
</l-grid>提示信息
设置dot属性后，会在图标右上角展示一个小红点。设置badge属性后，会在图标右上角展示相应的徽标。
html
<l-grid>
<l-grid-item text="标题文字" :dot="true" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
<l-grid-item text="标题文字" badge="5" image="https://tdesign.gtimg.com/mobile/demos/avatar2.png" />
<l-grid-item text="标题文字" badge="15" image="https://tdesign.gtimg.com/mobile/demos/avatar3.png" />
<l-grid-item text="标题文字" badge="New" image="https://tdesign.gtimg.com/mobile/demos/avatar4.png" />
</l-grid>插槽
icon插槽，text插槽,description插槽
html
<l-grid>
<l-grid-item text="标题文字">
<template #icon>
<l-icon name="undertake-hold-up" size="48rpx"></l-icon>
</template>
</l-grid-item>
<l-grid-item icon="undertake-hold-up">
<template #text>
<text>标题文字</text>
</template>
</l-grid-item>
<l-grid-item text="标题文字" icon="undertake-hold-up">
<template #description>
<text>详情描述</text>
</template>
</l-grid-item>
</l-grid>卡片
通过inset属性可以设置为卡片
html
<l-grid :inset="true">
<l-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
<l-grid-item text="标题文字" icon="star"/>
<l-grid-item text="标题文字" icon="download"/>
<l-grid-item text="标题文字" icon="edit"/>
</l-grid>查看示例
- 导入后直接使用这个标签查看演示效果
html
// 代码位于 uni_modules/lime-grid/compoents/lime-grid
<lime-grid />插件标签
- 默认 l-grid 为 component
- 默认 l-grid-item 为 component
- 默认 lime-grid 为 demo
关于vue2的使用方式
- 插件使用了
composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置 - 关键代码是: 在main.js中 在vue2部分加上这一段即可.
js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)API
Grid Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 分组标题 | string | - |
| inset | 是否展示为圆角卡片风格 | boolean | false |
| align | 内容的对齐方式，默认居中对齐。可选项：left/center | string | center |
| bgColor | 每个格子的背景色 | string | `` |
| padding | 每个格子的padding | string | `` |
GridItem Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| text | 标题 | string | - |
| description | 标题下方的描述信息 | string | - |
| icon | 图标名称，等同于 Icon 组件的 name 属性 | string | - |
| iconColor | 图标颜色 | string | - |
| iconSize | 图标尺寸 | string | - |
| layout | 内容布局方式。可选项：vertical/horizontal | string | vertical |
| image | 图片链接 | string | - |
| url | 点击后跳转的链接地址 | string | - |
| dot | 是否显示图标右上角小红点 | boolean | false |
| badge | 图标右上角徽标的内容 | string | number | _ |
| bordered | 是否显示内边框 | boolean | true |
| hover | 是否开启点击反馈 | boolean | false |
| openType | 链接跳转类型,可选值：switchTab/reLaunch/redirectTo | string | navigateTo |
| imageWidth | 图片宽度 | string | - |
| imageHeight | 图片高度 | string | - |
| bgColor | 背景色 | string | - |
| borderColor | 描边色 | string | - |
| padding | 边距 | string | - |
| lStyle | 自定义样式 | string | - |
GridItem Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击单元格时触发 | event: UniPointerEvent |
GridItem Slots
| 名称 | 说明 |
|---|---|
| title | 自定义左侧标题 |
| description | 自定义标题下方的描述信息 |
| icon | 自定义左侧图标 |
主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式)。uvue app无效。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --l-grid-item-vertical-padding: | 32rpx 0 24rpx | - |
| --l-grid-item-horizontal-padding: | 32rpx 0 | - |
| --l-grid-item-bg-color: | white | - |
| --l-grid-item-image-bg-color: | $fill-4 | - |
| --l-grid-item-image-border-radius: | $border-radius | - |
| --l-grid-item-image-width: | 96rpx | - |
| --l-grid-item-image-small-width: | 32rpx | - |
| --l-grid-item-image-middle-width: | 80rpx | - |
| --l-grid-item-text-color: | $text-color-1 | - |
| --l-grid-item-text-font-size: | 28rpx | - |
| --l-grid-item-text-small-font-size: | 24rpx | - |
| --l-grid-item-text-line-height: | 44rpx | - |
| --l-grid-item-text-padding-top: | 16rpx | - |
| --l-grid-item-description-font-size: | 24rpx | - |
| --l-grid-item-description-line-height: | 40rpx | - |
| --l-grid-item-description-color: | $text-color-3 | - |
| --l-grid-item-description-padding-top: | 8rpx | - |
| --l-grid-item-hover-bg-color: | $fill-4 | - |
| --l-grid-item-horizontal-text-padding-left: | 24rpx | - |
| --l-grid-item-horizontal-text-description-top: | 4rpx | - |
| --l-grid-item-border-color: | $border-color-1 | - |
| --l-grid-item-icon-size: | 48rpx | - |
打赏
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
