Vant4 Grid 宮格

2023-02-16 17:56 更新

介紹

宮格可以在水平方向上把頁面分隔成等寬度的區(qū)塊,用于展示內(nèi)容或進(jìn)行頁面導(dǎo)航。

引入

通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊。

import { createApp } from 'vue';
import { Grid, GridItem } from 'vant';

const app = createApp();
app.use(Grid);
app.use(GridItem);

代碼演示

基礎(chǔ)用法

通過 ?icon? 屬性設(shè)置格子內(nèi)的圖標(biāo),?text? 屬性設(shè)置文字內(nèi)容。

<van-grid>
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
</van-grid>

自定義列數(shù)

默認(rèn)一行展示四個(gè)格子,可以通過 ?column-num? 自定義列數(shù)。

<van-grid :column-num="3">
  <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
</van-grid>

自定義內(nèi)容

通過插槽可以自定義格子展示的內(nèi)容。

<van-grid :border="false" :column-num="3">
  <van-grid-item>
    <van-image
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" rel="external nofollow" 
    />
  </van-grid-item>
  <van-grid-item>
    <van-image
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" rel="external nofollow" 
    />
  </van-grid-item>
  <van-grid-item>
    <van-image
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" rel="external nofollow" 
    />
  </van-grid-item>
</van-grid>

正方形格子

設(shè)置 ?square? 屬性后,格子的高度會和寬度保持一致。

<van-grid square>
  <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
</van-grid>

格子間距

通過 ?gutter? 屬性設(shè)置格子之間的距離。

<van-grid :gutter="10">
  <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
</van-grid>

內(nèi)容橫排

將 ?direction? 屬性設(shè)置為 ?horizontal?,可以讓宮格的內(nèi)容呈橫向排列。

<van-grid direction="horizontal" :column-num="3">
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
</van-grid>

頁面導(dǎo)航

通過 ?to? 屬性設(shè)置 ?vue-router? 跳轉(zhuǎn)鏈接,通過 ?url? 屬性設(shè)置 URL 跳轉(zhuǎn)鏈接。

<van-grid clickable :column-num="2">
  <van-grid-item icon="home-o" text="路由跳轉(zhuǎn)" to="/" />
  <van-grid-item icon="search" text="URL 跳轉(zhuǎn)" url="https://github.com" />
</van-grid>

徽標(biāo)提示

設(shè)置 ?dot? 屬性后,會在圖標(biāo)右上角展示一個(gè)小紅點(diǎn)。設(shè)置 ?badge? 屬性后,會在圖標(biāo)右上角展示相應(yīng)的徽標(biāo)。

<van-grid :column-num="2">
  <van-grid-item icon="home-o" text="文字" dot />
  <van-grid-item icon="search" text="文字" badge="99+" />
</van-grid>

API

Grid Props

參數(shù) 說明 類型 默認(rèn)值
column-num 列數(shù) number | string 4
icon-size 圖標(biāo)大小,默認(rèn)單位為px number | string 28px
gutter 格子之間的間距,默認(rèn)單位為px number | string 0
border 是否顯示邊框 boolean true
center 是否將格子內(nèi)容居中顯示 boolean true
square 是否將格子固定為正方形 boolean false
clickable 是否開啟格子點(diǎn)擊反饋 boolean false
direction 格子內(nèi)容排列的方向,可選值為 horizontal string vertical
reverse v3.1.0 是否調(diào)換圖標(biāo)和文本的位置 boolean false

GridItem Props

參數(shù) 說明 類型 默認(rèn)值
text 文字 string -
icon 圖標(biāo)名稱或圖片鏈接,等同于 Icon 組件的 name 屬性 string -
icon-prefix 圖標(biāo)類名前綴,等同于 Icon 組件的 class-prefix 屬性 string van-icon
icon-color 圖標(biāo)顏色,等同于 Icon 組件的 color 屬性 string -
dot 是否顯示圖標(biāo)右上角小紅點(diǎn) boolean false
badge 圖標(biāo)右上角徽標(biāo)的內(nèi)容 number | string -
badge-props v3.2.8 自定義徽標(biāo)的屬性,傳入的對象會被透傳給 Badge 組件的 props BadgeProps -
url 點(diǎn)擊后跳轉(zhuǎn)的鏈接地址 string -
to 點(diǎn)擊后跳轉(zhuǎn)的目標(biāo)路由對象,等同于 vue-router 的 to 屬性 string | object -
replace 是否在跳轉(zhuǎn)時(shí)替換當(dāng)前頁面歷史 boolean false

GridItem Events

事件名 說明 回調(diào)參數(shù)
click 點(diǎn)擊格子時(shí)觸發(fā) event: MouseEvent

GridItem Slots

名稱 說明
default 自定義宮格的所有內(nèi)容
icon 自定義圖標(biāo)
text 自定義文字

類型定義

組件導(dǎo)出以下類型定義:

import type { GridProps, GridDirection, GridItemProps } from 'vant';

主題定制

樣式變量

組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請參考 ConfigProvider 組件。

名稱 默認(rèn)值 描述
--van-grid-item-content-padding var(--van-padding-md) var(--van-padding-xs) -
--van-grid-item-content-background var(--van-background-2) -
--van-grid-item-content-active-color var(--van-active-color) -
--van-grid-item-icon-size 28px -
--van-grid-item-text-color var(--van-text-color) -
--van-grid-item-text-font-size var(--van-font-size-sm) -


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號