> ## 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.
# Drilldown – Code
> A Drilldown is a navigation pattern that allows users to view additional information within the same container. Drilldown is a helper that works with the Drawer, Dialog, and Page Panel components.
export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
const [isLocalOverride, setIsLocalOverride] = useState(false);
useEffect(() => {
const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
fetch(examplePath, {
method: "HEAD"
}).then(r => {
if (r.ok) setIsLocalOverride(true);
}).catch(() => {});
}, [example]);
const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
if (screenshotOnly) {
return
;
}
};
```tsx lines expandable theme={null}
import {
Drawer,
DrillDown,
useDrillDown,
Button,
Flex,
} from "@servicetitan/anvil2";
import { useLayoutEffect } from "react";
function App() {
const { drillDownProps, setIndex, back, next } = useDrillDown();
// Set the initial index after components have registered
useLayoutEffect(() => {
setTimeout(() => {
setIndex(1);
}, 400);
}, [setIndex]);
return (
Drawer Header
This is the drawer body content.
CancelDrillDown Index 0
Tempor nisi culpa consectetur enim laborum. Sunt labore pariatur qui
proident reprehenderit velit minim consequat magna dolor est minim. Ad
dolor quis do ea velit. Velit quis consequat aute qui nulla et cillum
nostrud pariatur dolor ut. Sunt ullamco exercitation deserunt ad elit.
Est incididunt cillum nisi sint reprehenderit reprehenderit labore
mollit ex sint veniam. Consectetur duis quis magna amet incididunt
fugiat. Ex irure elit dolore culpa. Culpa nostrud proident cupidatat
amet est dolore occaecat proident adipisicing incididunt ipsum. Esse
ipsum pariatur voluptate fugiat eu ut incididunt laboris sint eu irure
sint elit aliquip. Sit sunt duis ut ut consequat labore nostrud
pariatur excepteur Lorem quis reprehenderit. Elit fugiat mollit
excepteur labore ullamco adipisicing veniam nulla. Voluptate
consectetur excepteur commodo cillum officia laboris aliquip mollit.
In nisi non cillum proident eu eiusmod ex incididunt cupidatat dolor
deserunt do culpa ad. Cupidatat cillum proident dolore eu fugiat
reprehenderit elit esse. Et nostrud sunt anim excepteur enim in do
dolor ut. Ea officia ex ex veniam incididunt. Amet eu sit est Lorem
mollit. Amet voluptate officia commodo voluptate et sint do esse ad
incididunt elit eu. Ex sint voluptate aute et ea. Incididunt enim anim
aliqua excepteur ea pariatur nisi ullamco officia id. Nisi dolor qui
ipsum cillum do qui commodo consequat cillum occaecat. Aliqua proident
sunt do est ut sunt nulla esse eu excepteur tempor occaecat
incididunt. Velit laborum quis do exercitation aliqua mollit. Aute ex
tempor adipisicing laboris sunt non dolor ullamco aliqua eiusmod
cupidatat id et fugiat. Laboris non excepteur anim deserunt proident
ullamco dolore cupidatat. Cupidatat excepteur Lorem laboris ut aliquip
do est commodo Lorem enim voluptate. Consectetur sunt et cupidatat
aliquip amet pariatur Lorem eu laboris duis exercitation exercitation
culpa non. Amet proident velit veniam ad sunt est ea fugiat enim quis
cupidatat labore. Amet cillum tempor voluptate et pariatur eiusmod
magna eu. Velit minim occaecat nisi eiusmod magna ex nostrud minim
voluptate aute quis fugiat do. Esse excepteur nulla dolore sunt sit
esse. Minim aliqua adipisicing laborum et non esse dolor incididunt.
Incididunt quis duis velit pariatur cillum excepteur laboris. Laboris
velit et ut dolore incididunt ad ipsum excepteur magna enim. Sint enim
aute velit ea veniam nisi qui culpa. Proident proident ea occaecat ut
ea. Quis reprehenderit sit ea mollit. Cillum proident qui commodo sint
consectetur eiusmod anim irure eiusmod. Nisi occaecat irure anim anim
officia ut est. Ullamco reprehenderit anim dolore ut sit velit. Nisi
anim quis adipisicing aliqua veniam do. Veniam sint irure pariatur
adipisicing culpa. Laboris nulla cillum nisi nulla sit mollit eu ipsum
magna tempor magna sit. Cupidatat qui amet incididunt quis amet eu
nostrud culpa irure laborum laborum eu. Consequat dolore fugiat
commodo consequat pariatur. Aliqua id et officia culpa tempor tempor
dolore in. Consectetur ad id qui eiusmod ullamco velit nulla velit
cupidatat exercitation tempor excepteur commodo. Duis labore et id id.
Voluptate mollit non nulla nisi ad nostrud non nisi dolore officia.
Veniam irure in eu enim reprehenderit qui ullamco nulla aliquip et
irure irure ad.
Drilldown HeaderContent of Drilldown
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { Button, Dialog, DrillDown, Flex } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
);
}
```
### Use as children of `Dialog`, `Drawer`, or `Page.Panel`
Any number of `DrillDown` components can be added as children of the `Dialog`, `Drawer`, or `Page.Panel` component. When a `DrillDown` is visible, it will cover the entire contents of the `Dialog` or `Drawer`.
```tsx theme={null}
```
```tsx theme={null}
{...}{...}{...}{...}{...}{...}{...}
```
**Each `DrillDown` requires a unique `index`**
`DrillDown` sibling components are identified by their `index` prop. Numbers used for the `index` prop are zero-based, and calling `next` or clicking the `DrillDown.NextButton` will display the next index in numerical order.
### Uncontrolled usage
```tsx theme={null}
import { Drawer, Drilldown } from "@servicetitan/anvil2";
function ExampleComponent() {
const [isOpen, setIsOpen] = useState(true);
return (
setIsOpen(false)}>
Drawer HeaderThis is the drawer body content.CancelContinue setIsOpen(false)}>
DrillDown Index 0This is the drilldown body content.Cancel
Continue
);
}
```
#### Using `DrillDown.NextButton` and `DrillDown.PrevButton`
The `DrillDown` can be used with uncontrolled state by using the `DrillDown.NextButton` to move forward to each `DrillDown` `index` in ascending numerical order. The `DrillDown.PrevButton` will similarly move backward in descending numerical order, and will close the `DrillDown` if the current visible `DrillDown` is `index` `0`.
### Controlled usage
```tsx theme={null}
import { Drawer, Drilldown } from "@servicetitan/anvil2";
function ExampleComponent() {
const { drillDownProps, back, next } = useDrillDown();
const [isOpen, setIsOpen] = useState(true);
return (
setIsOpen(false)}>
Drawer HeaderThis is the drawer body content.Cancel setIsOpen(false)}>
DrillDown Index 0This is the drilldown body content.
);
}
```
#### Using the `useDrillDown` hook
The `useDrillDown` hook returns a `next` and `back` function to allow for programmatically navigating between `DrillDown` components in numerical `index` order. (The hook also returns a `setIndex` function to allow navigating to arbitrary `index` values.)
To allow this hook to work, the `drillDownProps` return value also needs to be spread onto the parent component.
```tsx theme={null}
import { Drawer, Drilldown } from "@servicetitan/anvil2";
function ExampleComponent() {
const { drillDownProps, back, next } = useDrillDown();
const [isOpen, setIsOpen] = useState(true);
return (
setIsOpen(false)}>
{...}
);
}
```
### Closing from within a `DrillDown`
By default, the `DrillDown.Header` does not display a close button. To display a close button in the `DrillDown.Header`, add an `onClose` handler to the `DrillDown`.
```tsx theme={null}
setOpen(false)}>
DrillDown Index 0This is the drilldown body content.Cancel
Continue
```
```tsx theme={null}
setOpen(false)}>
DrillDown Index 0This is the drilldown body content.Cancel
Continue
```
## `DrillDown` Props
In addition to the props listed below, the `DrillDown` component can accept any valid HTML `div` props.
The index of the `DrillDown` screen in the navigation sequence. This index is zero-based.
Called when the close button in the header is clicked. The close button is only displayed in the `DrillDown.Header` if there is an `onClose` provided.
```tsx theme={null}
DrillDown Header
```
## `DrillDown.Header` Props
In addition to the props listed below, the `DrillDown.Header` component can accept any valid HTML`header` props.
Customizes the heading level of the `DrillDown.Header`
```tsx theme={null}
DrillDown content
```
## `DrillDown.Content` Props
The `DrillDown.Content` component can accept any valid HTML `div` props.
```tsx theme={null}
```
## `DrillDown.Footer` Props
The `DrillDown.Footer` component can accept any valid HTML `footer` props.
```tsx theme={null}
Continue
```
## `DrillDown.NextButton` Props
The `DrillDown.NextButton` component can accept the same props as the `Button` component. This button takes the user to the next DrillDown index (e.g. if the `index` `1` `DrillDown` is visible, it will move to `index` `2`).
```tsx theme={null}
Back
```
## `DrillDown.PrevButton` Props
The `DrillDown.PrevButton` component can accept the same props as the `Button` component. This button takes the user to the previous DrillDown. If there is no previous `DrillDown`, it will close the `DrillDown`.
```tsx theme={null}
const { drillDownProps, setIndex, back, next } = useDrillDown();
```
## `useDrillDown` hook
The `useDrillDown` hook returns four values:
This object is required to be spread on the parent component (`Drawer`, `Dialog`) for the `DrillDown` to work in a controlled manner using the `useDrillDown` hook.
Calling this function takes the user to the next DrillDown index (e.g. if the `index` `1` `DrillDown` is visible, it will move to `index` `2`).
Calling this function takes the user to the previous DrillDown. If there is no previous `DrillDown`, it will close the `DrillDown`.
Calling this function takes the user to the DrillDown index that is passed into the function. If `setIndex` is called with `undefined`, it will close the `DrillDown`.
