Skip to main content

SortableGrid

Function SortableGrid 

Source
pub fn SortableGrid(_: SortableGridProps) -> Element
Expand description

A grid of tiles reordered (or swapped) by dragging.

Renders a display: grid wrapper with cols equal columns - pass your own class/style for gaps and sizing. A forwarded style is merged after the default, so per-property overrides win (e.g. style: "grid-template-columns: 2fr 1fr 1fr;" for custom tracks) while display: grid stays; spacing needs no override at all (class: "gap-2"). The hovered tile gets data-drop-target="true", the dragged one data-dragging="true" - both attributes are absent otherwise, so presence-based selectors (CSS [data-dragging], Tailwind data-dragging:opacity-50) work directly. Use item_class to put classes on the tile wrappers.

§Props

For details, see the props struct definition.

  • len : usize

    Number of tiles.

  • cols : usize

    Number of columns.

  • render : Callback<usize,Element>

    Renders the tile at the given index.

  • on_sort : EventHandler<SortEvent>

    Fired when the user drops a tile on another.

  • mode : ReorderMode

    Insert-and-reflow (gallery) or swap (dashboard). Default: insert.

  • item_class : Option<String>

    Classes for each tile’s wrapper div - the element that carries data-dragging / data-drop-target.

  • attributes : Vec<Attribute>