/*! For license information please see 3358.55d1bd45.js.LICENSE.txt */
(self.webpackChunk=self.webpackChunk||[]).push([["3358"],{65688:function(s,n,t){"use strict";t.r(n);var a=t("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,a.wg)(),(0,a.iD)("div",{class:"van-doc-markdown-body",innerHTML:'Grid
\nIntro
\n
Used to divide the page into blocks of equal width in the horizontal direction for displaying content or page navigation.
\n
Install
\n
Register component globally via app.use, refer to Component Registration for more registration ways.
\n
import { createApp } from 'vue';\nimport { Grid, GridItem } from 'vant';\n\nconst app = createApp();\napp.use(Grid);\napp.use(GridItem);\n
\n
Usage
\nBasic Usage
\n
<van-grid>\n <van-grid-item icon="photo-o" text="Text" />\n <van-grid-item icon="photo-o" text="Text" />\n <van-grid-item icon="photo-o" text="Text" />\n <van-grid-item icon="photo-o" text="Text" />\n</van-grid>\n
\n
Column Num
\n
<van-grid :column-num="3">\n <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="Text" />\n</van-grid>\n
\n
Custom Content
\n
<van-grid :border="false" :column-num="3">\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"\n />\n </van-grid-item>\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"\n />\n </van-grid-item>\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"\n />\n </van-grid-item>\n</van-grid>\n
\n
Square
\n
<van-grid square>\n <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />\n</van-grid>\n
\n
Gutter
\n
<van-grid :gutter="10">\n <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />\n</van-grid>\n
\n
Horizontal
\n
<van-grid direction="horizontal" :column-num="3">\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n
\n
Route
\n
<van-grid clickable :column-num="2">\n <van-grid-item icon="home-o" text="Vue Router" to="/" />\n <van-grid-item icon="search" text="URL" url="https://github.com" />\n</van-grid>\n
\n
Show Badge
\n
<van-grid :column-num="2">\n <van-grid-item icon="home-o" text="Text" dot />\n <van-grid-item icon="search" text="Text" badge="99+" />\n</van-grid>\n
\n
API
\nGrid Props
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| column-num | \nColumn Num | \nnumber | string | \n4 | \n
\n\n| icon-size | \nIcon size | \nnumber | string | \n28px | \n
\n\n| gutter | \nGutter | \nnumber | string | \n0 | \n
\n\n| border | \nWhether to show border | \nboolean | \ntrue | \n
\n\n| center | \nWhether to center content | \nboolean | \ntrue | \n
\n\n| square | \nWhether to be square shape | \nboolean | \nfalse | \n
\n\n| clickable | \nWhether to show click feedback when clicked | \nboolean | \nfalse | \n
\n\n| direction | \nContent arrangement direction, can be set to horizontal | \nstring | \nvertical | \n
\n\n| reverse | \nWhether to reverse the position of icon and text | \nboolean | \nfalse | \n
\n\n
\n
GridItem Props
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| text | \nText | \nstring | \n- | \n
\n\n| icon | \nIcon name or URL | \nstring | \n- | \n
\n\n| icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
\n\n| icon-color | \nIcon color | \nstring | \n- | \n
\n\n| dot | \nWhether to show red dot | \nboolean | \nfalse | \n
\n\n| badge | \nContent of the badge | \nnumber | string | \n- | \n
\n\n| badge-props | \nProps of Badge, see Badge - props | \nBadgeProps | \n- | \n
\n\n| url | \nLink URL | \nstring | \n- | \n
\n\n| to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
\n\n| replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
\n\n
\n
GridItem Events
\n
\n\n\n| Event | \nDescription | \nArguments | \n
\n\n\n\n| click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
\n\n
\n
GridItem Slots
\n
\n\n\n| Name | \nDescription | \n
\n\n\n\n| default | \nCustom content | \n
\n\n| icon | \nCustom icon | \n
\n\n| text | \nCustom text | \n
\n\n
\n
Types
\n
The component exports the following type definitions:
\n
import type { GridProps, GridDirection, GridItemProps } from 'vant';\n
\n
Theming
\nCSS Variables
\n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n
\n\n\n| Name | \nDefault Value | \nDescription | \n
\n\n\n\n| --van-grid-item-content-padding | \nvar(--van-padding-md) var(--van-padding-xs) | \n- | \n
\n\n| --van-grid-item-content-background | \nvar(--van-background-2) | \n- | \n
\n\n| --van-grid-item-content-active-color | \nvar(--van-active-color) | \n- | \n
\n\n| --van-grid-item-icon-size | \n28px | \n- | \n
\n\n| --van-grid-item-text-color | \nvar(--van-text-color) | \n- | \n
\n\n| --van-grid-item-text-font-size | \nvar(--van-font-size-sm) | \n- | \n
\n\n
\n