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
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) | - |