Documentation Index
Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
Use this file to discover all available pages before exploring further.
Implementation
Dnd.Zone Props
Dnd.Handle Props
Dnd.HandleButton Props
Dnd.SortLine Props
Bring your own drag-and-drop interactions.While these components are intended to help you create drag and drop experiences that align with our designs, they do not provide the actual drag-and-drop interactions. You should evaluate external libraries make the best choice for your needs.
Common Examples
import { Dnd } from "@servicetitan/anvil2";
Zone
The Dnd.Zone can be used to style an element as a drop zone.Handle
The Dnd.Handle is an icon which helps users understand that something is draggable.The Dnd.HandleButton is a button-wrapped icon which helps users understand that something is draggable. Use this if your draggable item contains other interactive elements.Sort Line
The Dnd.SortLine indicates where an item will be dropped in a sortable list.The width of the line is based upon its nearest relatively positioned ancestor.This component should be used when you’re building an experience that is sortable in one dimension (i.e. vertical or horizontal lists). It is not suitable for sorting two-dimensional sorting (e.g. grids).DndSort
If you’re not looking to create your own entire drag and drop solution, check to see if DndSort is capable of supporting your needs. It’s a pre-built composition that uses all of these Dnd components to cover many basic cases including: sorting a list, arranging items into groups, or both. Read more about that component here.Best Practices
Draggables with interactivity
If your draggable item has interactive elements, use the Dnd.HandleButton to initiate dragging.If your draggable item has interactive elements, don’t nest interactive elements.import { Dnd } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<Dnd.Zone isOver={false} isValid={false} isDragging={false}>
{/* Zone content */}
</Dnd.Zone>
); }
Dnd.Zone Props
Whether an item is currently being dragged.
Whether an item is currently being dragged over the zone.
Whether the current drag operation is valid for this zone.
Child elements to render inside the zone.
Optional CSS class name to apply to the zone.
The HTML element type to render.
import { Dnd } from "@servicetitan/anvil2";
function ExampleComponent() {
return <Dnd.Handle />;
}
Dnd.Handle Props
Optional CSS class name to apply to the handle
import { Dnd } from "@servicetitan/anvil2";
function ExampleComponent() {
return <Dnd.HandleButton isActive={false} />;
}
Dnd.HandleButton component can accept any ButtonCompound props.Optional CSS class name to apply to the button
Whether the handle is currently being dragged
import { Dnd } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<Dnd.SortLine
orientation="vertical"
position="before"
offset="-2px"
/>
);
}
Dnd.SortLine Props
In addition to the props listed below, the Dnd.SortLine component can accept any valid HTML div props.The offset of the line from the item (CSS value, typically negative)
orientation
"horizontal" | "vertical"
The orientation of the sort - Note: line is rendered perpendicular to the sort
The position of the line relative to a target item
