Code

Implementation
Overflow Props

Live Component Playground

Common Examples

import { Overflow } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Overflow truncate height="5rem">
      {/* Overflow Content */}
    </Overflow>
  );
}

Overflow any elements

By default, the Overflow component creates a vertically scrolling area with a shadow to indicate which directions it can be scrolled.

Demo

Horizontal overflow

To apply the overflow effect horizontally, add direction="row" to the Overflow component:

Demo

Overflow truncation

To display a “Show more…” button, you can add the truncate prop. For more custom use cases, truncate can also accept an object to specify custom expand/collapse display text and custom event handlers.

Demo

import { Overflow } from "@servicetitan/anvil2";

function ExampleComponent() {
return (

<Overflow direction="column" height="5rem" width="100%" truncate={false}>
  {/* Overflow content */}
</Overflow>
); }

`Overflow` Props

In addition to the props listed below, the Overflow component can accept any valid HTML div props:

direction

CSSProperties[flexDirection]

default:"column"

Accepts CSS flex-direction values.

height

number | string

truncate

boolean | { expandText?: string; collapseText?: string; onExpand?: (e: MouseEvent) => void; onCollapse?: (e: MouseEvent) => void }

The truncate prop can only be used with direction set to "column".

width

number | string

Anvil2 Web

Resources

Live Component Playground

Common Examples

Overflow any elements

Horizontal overflow

Overflow truncation

`Overflow` Props

Anvil2 Web

Resources

​Live Component Playground

​Common Examples

​Overflow any elements

​Horizontal overflow

​Overflow truncation

​Overflow Props

Live Component Playground

Common Examples

Overflow any elements

Horizontal overflow

Overflow truncation

`Overflow` Props