Grid Gongge

introduce

The grid can divide the page into equal-width blocks in the horizontal direction for displaying content or page navigation.

Code Demo

Basic usage

Use the icon attribute to set the icon in the grid, and the text attribute to set the text content.

<z-grid>
   <z-grid-item v-for="i in 4" :key="i" icon="image" text="text" />
</z-grid>

Customize the number of columns

By default, four grids are displayed in one row, and the number of columns can be customized through column-num.

<z-grid :column-num="3">
   <z-grid-item v-for="i in 6" :key="i" icon="image" text="text" />
</z-grid>

Custom content

The content displayed in the grid can be customized through slots.

<z-grid :border="false" :column-num="3">
   <z-grid-item>
     <z-image
       mode="widthFix"
       src="https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg"
     />
   </z-grid-item>
   <z-grid-item>
     <z-image
       mode="widthFix"
       src="https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg"
     />
   </z-grid-item>
   <z-grid-item>
     <z-image
       mode="widthFix"
       src="https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe3.jpg"
     />
   </z-grid-item>
</z-grid>

Square grid

After setting the square property, the height of the grid will be consistent with the width.

<z-grid square>
   <z-grid-item v-for="i in 8" :key="i" icon="image" text="text" />
</z-grid>

Grid spacing

Set the distance between grids through the gutter property.

<z-grid :gutter="10">
   <z-grid-item v-for="i in 8" :key="i" icon="image" text="text" />
</z-grid>

Contents arranged horizontally

Set the direction attribute to horizontal to arrange the contents of the grid horizontally.

<z-grid direction="horizontal" :column-num="3">
   <z-grid-item icon="image" text="text" />
   <z-grid-item icon="image" text="text" />
   <z-grid-item icon="image" text="text" />
</z-grid>

After setting the dot attribute, a small red dot will be displayed in the upper right corner of the icon. After setting the badge attribute, the corresponding logo will be displayed in the upper right corner of the icon.

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

API

Grid Props

Parameters	Description	Type	Default value
column-num	column number	number \| string	`4`
icon-size	Icon size, default unit is `px`	number \| string	`56rpx`
gutter	The spacing between grids, the default unit is `px`	number \| string	`0`
border	Whether to display the border	boolean	`true`
center	Whether to center the grid content	boolean	`true`
square	Whether to fix the grid to a square	boolean	`false`
clickable	Whether to enable grid click feedback	boolean	`false`
direction	The direction in which the grid content is arranged, the optional value is `horizontal`	string	`vertical`
reverse	Whether to swap the positions of icons and text	boolean	`false`

GridItem Props

Parameters	Description	Type	Default value
text	text	string	-
icon	Icon name or image link, equivalent to the name attribute of the Icon component	string	-
icon-prefix	Icon class name prefix, equivalent to the class-prefix attribute of the Icon component	string	`z-icon`
icon-color	Icon color, equivalent to the color property of the Icon component	string	-
dot	Whether to display the small red dot in the upper right corner of the icon	boolean	`false`
badge	The content of the logo in the upper right corner of the icon	number \| string	-
badge-props	Customize the properties of the logo. The incoming object will be transparently passed to Badge component props	BadgeProps	-

GridItem Events

Event name	Description	Callback parameters
click	Triggered when the grid is clicked	event: MouseEvent

GridItem Slots

Name	Description
default	All contents of custom palace grid
icon	custom icon
text	Custom text

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

Name	Default	Description
--z-grid-item-content-padding	var(--z-padding-md) var(--z-padding-xs)	-
--z-grid-item-content-background	var(--z-background-2)	-
--z-grid-item-content-active-color	var(--z-active-color)	-
--z-grid-item-icon-size	56rpx	-
--z-grid-item-text-color	var(--z-text-color)	-
--z-grid-item-text-font-size	var(--z-font-size-sm)	-