Navigation v1.0.0

Baumansicht

Hierarchische Datenanzeige mit auf-/zuklappbaren Knoten, Icons, Kontrollkästchen-Auswahl und Tastaturnavigation. Ideal für Dateibrowser, Kategoriestrukturen und Organigramme. Unterstützt Dreizustands-Elternkontrollkästchen, Einzel-/Mehrfachauswahl und Einrückungslinien.

Vorschau & Code

_tree_view.html.erb

███
  ████ ████ █████████ █████████

  ██████
    ███ ██████ ███████████████████████ ██████ █
      █
        ███ ██████
        ██████ ██████
        █████████ █
          █ ███ ██████ ██████ █████████ █████ █████ ██

Get Access to View Code

tree_view_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ████████ ███████████ ██████████ ███████████
  ██████ ██████ █ █
    ███████████ █ █████ ███████ ████████ ██████ ██
    ██████████ █ █████ ████████ ████████ █████ █
  █

  █████████████ █

Get Access to View Code

tree_view_component.html.erb

████ ██████████ █████████████████ ███
     ███████████████████████████
     ████████████████████████████████████ ███████████ ███
     ███████████████████████████████████ ██████████ ████
  ███ ████████████████████ ██
██████

Get Access to View Code

tree_view_component.rb

█ ██████████████████████ ████

█████ █████████████████ █ ███████████████████
  █████ █ █
    ███████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ █████ ██████ █ █ ███ ██████ █ █ █████████ █ █ ██████████████████ █ █ ████ █████████████
    ████████████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ █████ ████ █ █ ██████████ █ █ █████████ █████ █ █ ███ █████ ███████ █ █ ██████████ █ █ ██████████ █ █ ████ █████ █ █ ████ █████████████
    █████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ █████ ███████ █ █ █████████████ █ █ ███████████████████████████ █ █ ████████ █████ █ █ ████ ██████ █ █ ███ █████████████
    ████████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ █████ ███ ███ ███████████
  ████████

Get Access to View Code

tree_view_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ████████ ███████████ ██████████ ███████████
  ██████ ██████ █ █
    ███████████ █ █████ ███████ ████████ ██████ ██
    ██████████ █ █████ ████████ ████████ █████ █
  █

  █████████████ █

Get Access to View Code

Optionen

Name	Typ	Standard	Beschreibung
`nodes` *	Array	erforderlich	Nested array of hashes. Each: { id: String, label: String, icon: Symbol, children: Array, expanded: Boolean, selected: Boolean, href: String }
`selectable`	Symbol	`:none`	Selection mode: :none, :single, :multiple
`checkable`	Boolean	`false`	Show checkboxes with tri-state parent behavior
`show_lines`	Boolean	`true`	Show indent guide lines between levels
`default_expanded`	Array \| String	`[]`	Array of node IDs to expand by default, or "all" to expand all
`class`	String	`""`	Additional CSS classes for the container

Name	Typ	Standard	Beschreibung
`nodes` *	Array	erforderlich	Nested array of hashes. Each: { id: String, label: String, icon: Symbol, children: Array, expanded: Boolean, selected: Boolean, href: String }
`selectable`	Symbol	`:none`	Selection mode: :none, :single, :multiple
`checkable`	Boolean	`false`	Show checkboxes with tri-state parent behavior
`show_lines`	Boolean	`true`	Show indent guide lines between levels
`default_expanded`	Array \| String	`[]`	Array of node IDs to expand by default, or "all" to expand all
`class`	String	`""`	Additional CSS classes for the container

Änderungsprotokoll v1.0.0

- v1.0.0: Initial release with expand/collapse, selection, checkboxes, and keyboard navigation

Vollzugang erhalten

Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.

Jetzt Zugang erhalten