Component

DropSilo

The cargo can be dragged with native HTML drag-and-drop into an inbox, vault or quarantine lane. The selected silo becomes the real rendered destination, and each lane is also keyboard-operable for devices that do not drag.

Possible use

It could let a reviewer drag a warning into an inbox, vault or quarantine lane, or let a presenter physically file an agenda item by dropping it into a ceremonial category. The destination changes the layout but not the decision.

Reasonable alternative

A reasonable local alternative is a select, list or ordinary drag target chosen for the actual data model. A three-silo cargo ritual adds logistics to a classification that could be stated directly.

01 / Preview

Try it yourself.

CargoNeeds a decision

InboxThe least committed destination.Drop or press

VaultFor content that wants a heavier door.Drop or press

QuarantineFor content nobody will explain.Drop or press

Mechanism

1: Pick up the loose cargo.
2: Drag it to Inbox, Vault or Quarantine, or focus a lane and press Enter.
3: Release the cargo to give it a new but meaningless destiny.

02 / Usage

Put it somewhere.

example.tsxTSX

import { DropSilo } from "gra-ui";
import "gra-ui/styles.css";

export function FiledNotice() {
  return <DropSilo><span>Needs a decision</span></DropSilo>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe cargo moved into one of the three visible silos.