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>

Logo Tips

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

ParametersDescriptionTypeDefault value
column-numcolumn numbernumber | string4
icon-sizeIcon size, default unit is pxnumber | string56rpx
gutterThe spacing between grids, the default unit is pxnumber | string0
borderWhether to display the borderbooleantrue
centerWhether to center the grid contentbooleantrue
squareWhether to fix the grid to a squarebooleanfalse
clickableWhether to enable grid click feedbackbooleanfalse
directionThe direction in which the grid content is arranged, the optional value is horizontalstringvertical
reverseWhether to swap the positions of icons and textbooleanfalse

GridItem Props

ParametersDescriptionTypeDefault value
texttextstring-
iconIcon name or image link, equivalent to the name attribute of the Icon componentstring-
icon-prefixIcon class name prefix, equivalent to the class-prefix attribute of the Icon componentstringz-icon
icon-colorIcon color, equivalent to the color property of the Icon componentstring-
dotWhether to display the small red dot in the upper right corner of the iconbooleanfalse
badgeThe content of the logo in the upper right corner of the iconnumber | string-
badge-propsCustomize the properties of the logo. The incoming object will be transparently passed to Badge component propsBadgeProps-

GridItem Events

Event nameDescriptionCallback parameters
clickTriggered when the grid is clickedevent: MouseEvent

GridItem Slots

NameDescription
defaultAll contents of custom palace grid
iconcustom icon
textCustom 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.

NameDefaultDescription
--z-grid-item-content-paddingvar(--z-padding-md) var(--z-padding-xs)-
--z-grid-item-content-backgroundvar(--z-background-2)-
--z-grid-item-content-active-colorvar(--z-active-color)-
--z-grid-item-icon-size56rpx-
--z-grid-item-text-colorvar(--z-text-color)-
--z-grid-item-text-font-sizevar(--z-font-size-sm)-