Tree View — Zui

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

rows = [{
  name: "src", kind: "folder", children: [
    { name: "app.rb", kind: "file", children: [] }
  ]
}]

tree_view rows,
  columns: [{ key: :name, label: "Name", width: 280 },
            { key: :kind, label: "Kind", width: 110 }],
  children_field: :children,
  expanded_paths: [[0]]

API

Component properties

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

rowsRows configuration for Tree View.property

columnsColumns configuration for Tree View.property

children_fieldChildren field configuration for Tree View.property

selected_pathSelected path configuration for Tree View.property

selected_columnSelected column configuration for Tree View.property

expanded_pathsExpanded paths configuration for Tree View.property

expand_depthExpand depth configuration for Tree View.property

show_headerShow header configuration for Tree View.property

header_heightHeader height configuration for Tree View.property

row_heightRow height configuration for Tree View.property

column_widthColumn width configuration for Tree View.property

row_spacingRow spacing configuration for Tree View.property

column_spacingColumn spacing configuration for Tree View.property

indentationIndentation configuration for Tree View.property

left_marginLeft margin configuration for Tree View.property

right_marginRight margin configuration for Tree View.property

selection_behaviorSelection behavior configuration for Tree View.property

selection_modeSelection mode configuration for Tree View.property

editableEditable configuration for Tree View.property

edit_triggersEdit triggers configuration for Tree View.property

alternating_rowsAlternating rows configuration for Tree View.property

animateAnimate configuration for Tree View.property

reuse_itemsReuse items configuration for Tree View.property

key_navigation_enabledKey navigation enabled configuration for Tree View.property

pointer_navigation_enabledPointer navigation enabled configuration for Tree View.property

interactiveInteractive configuration for Tree View.property

clipClip configuration for Tree View.property

paddingPadding configuration for Tree View.property

widthWidth configuration for Tree View.property

heightHeight configuration for Tree View.property

empty_textEmpty text configuration for Tree View.property

enabledEnabled configuration for Tree View.property

backgroundBackground configuration for Tree View.property

header_backgroundHeader background configuration for Tree View.property

cell_backgroundCell background configuration for Tree View.property

alternate_backgroundAlternate background configuration for Tree View.property

selected_backgroundSelected background configuration for Tree View.property

foregroundForeground configuration for Tree View.property

header_foregroundHeader foreground configuration for Tree View.property

selected_foregroundSelected foreground configuration for Tree View.property

mutedMuted configuration for Tree View.property

accentAccent configuration for Tree View.property

grid_colorGrid color configuration for Tree View.property

border_colorBorder color configuration for Tree View.property

radiusRadius configuration for Tree View.property

font_familyFont family configuration for Tree View.property

font_sizeFont size configuration for Tree View.property

header_sizeHeader size configuration for Tree View.property

accessible_nameAccessible name configuration for Tree View.property

visibleVisible configuration for Tree 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.

↗cell_clickNative event payload

↗cell_double_clickNative event payload

↗activateNative event payload

↗selection_changeNative event payload

↗current_changeNative event payload

↗editNative event payload

↗expandNative event payload

↗collapseNative event payload

↗expanded_changeNative event payload

↗row_count_changeNative event payload

↗column_count_changeNative 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