zui docs v0.0.5
GitHub ↗
Data and collections Native Qt

Grid View

Grid View is a native Zui component in the data and collections catalog, with 38 component-specific properties.

Usage

Ruby example

Paste this complete Builder example inside the app surface from the Quickstart. Replace illustrative asset paths with files from your project.

Ruby
grid_view([{ id: 1, name: "Documents", icon: :folder }, { id: 2, name: "Images", icon: :image }], key_field: :id, label_field: :name, icon_field: :icon, cell_width: 180, cell_height: 120)
API

Component properties

38 component-specific values, plus shared item and layout properties.

itemsItems configuration for Grid View.property
key_fieldKey field configuration for Grid View.property
label_fieldLabel field configuration for Grid View.property
description_fieldDescription field configuration for Grid View.property
icon_fieldIcon field configuration for Grid View.property
selectedSelected configuration for Grid View.property
current_indexCurrent index configuration for Grid View.property
flowFlow configuration for Grid View.property
layout_directionLayout direction configuration for Grid View.property
cell_widthCell width configuration for Grid View.property
cell_heightCell height configuration for Grid View.property
spacingSpacing configuration for Grid View.property
paddingPadding configuration for Grid View.property
widthWidth configuration for Grid View.property
heightHeight configuration for Grid View.property
highlight_move_durationHighlight move duration configuration for Grid View.property
snap_modeSnap mode configuration for Grid View.property
bounds_behaviorBounds behavior configuration for Grid View.property
key_navigation_wrapsKey navigation wraps configuration for Grid View.property
interactiveInteractive configuration for Grid View.property
clipClip configuration for Grid View.property
empty_textEmpty text configuration for Grid View.property
enabledEnabled configuration for Grid View.property
backgroundBackground configuration for Grid View.property
cell_backgroundCell background configuration for Grid View.property
selected_backgroundSelected background configuration for Grid View.property
foregroundForeground configuration for Grid View.property
selected_foregroundSelected foreground configuration for Grid View.property
mutedMuted configuration for Grid View.property
accentAccent configuration for Grid View.property
border_colorBorder color configuration for Grid View.property
radiusRadius configuration for Grid View.property
font_familyFont family configuration for Grid View.property
font_sizeFont size configuration for Grid View.property
description_sizeDescription size configuration for Grid View.property
icon_sizeIcon size configuration for Grid View.property
accessible_nameAccessible name configuration for Grid View.property
visibleVisible configuration for Grid View.property
Show 13 shared item properties
opacityscalerotationzfill_widthfill_heightpreferred_widthpreferred_heightminimum_widthminimum_heightmaximum_widthmaximum_heightlayout_alignment
Interaction

Events

Subscribe with on widget, :event and keep behavior in Ruby.

activateNative event payload
changeNative event payload
current_changeNative event payload
count_changeNative event payload
highlightNative event payload
scrollNative event payload
movement_startNative event payload
movement_endNative event payload
showNative event payload
hideNative event payload
focusNative event payload
blurNative event payload