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
ListView Props
ListView.Option Props
Common Examples
import { ListView, Text } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<ListView>
<ListView.Option label="first">
<Text>First Value</Text>
</ListView.Option>
<ListView.Option label="second">
<Text>Second Value</Text>
</ListView.Option>
<ListView.Option label="third">
<Text>Third Value</Text>
</ListView.Option>
</ListView>
);
}
Creating selectable list views
The ListView component can be used to easily create selectable lists using the label prop and custom content as children of each ListView.Option.Indeterminate list views
The indeterminate prop can be used when the selection of items is controlled to render the checkbox as indeterminate, instead of checked or not checked. This is useful when building a nested structure.Note: the logic to determine which items are indeterminate is not included, since there are various use cases. Simply pass the items that should be indeterminate to the prop.Using items objects with list views
The items prop of a ListView can also be passed an array of objects which are passed to the children of the list view. Each item object should have a label, but any other arbitrary attributes are allowed.const Items = [
{ label: "Item 1", imgUrl: "#" },
{ label: "Item 2", imgUrl: "#", disabled: true },
{ label: "Item 3" },
];
export const ListViewExample = () => (
<ListView items={Items}>
{(items) =>
items.map((item) => (
<ListView.Option key={item.label} item={item} disabled={item.disabled}>
<Avatar image={item.imgUrl} name={item.label} />
<Text>{item.label}</Text>
</ListView.Option>
))
}
</ListView>
);
<ListView
items={itemsArray}
defaultSelected={[]}
selected={[]}
indeterminate={[]}
onSelectionChange={(value) => console.log(value)}
>
{(items) =>
items.map((item) => (
<ListView.Option key={item.label} item={item}>
{item.label}
</ListView.Option>
))
}
</ListView>
ListView Props
In addition to the props listed below, the ListView component can accept any valid HTML div props.onSelectionChange
(value: unknown[]) => void
required
Callback when the selection changes.
children
(items) => ReactNode (items prop only) ReactNode (without items prop)
If the items prop is used, ListView’s children will be a function that
passes the items.
defaultSelected
ItemType[] (items prop only) string[] (without items prop)
Items passed to this prop will render with an indeterminate checkbox
(controlled)
ListView can be used with or without an items prop to manage your list of
items
Items passed to this prop will render with an checked checkbox (controlled)
<ListView.Option
item={item}
label="Option 1"
disabled={false}
onChange={(e) => console.log("Changed")}
>
Option content
</ListView.Option>
ListView.Option Props
In addition to the props listed below, the ListView.Option component can accept any valid HTML div props.item
{ label: string, defaultSelected?: boolean, [keys]: values }
Required if no label prop is supplied.
Required if no item prop is supplied.
