Table of Contents

Sheet

The Sheet component is a container that acts as a supplementary view, providing access to important contextual information.

Table of Contents

How to use it
Configuration
API
- Sheet

Used for this

To display additional information that aids the primary view

Not for this

For an experience where the primary view is obscured to display supplementary information or actions, use a Drawer

How to use it

Default

A typical usage of a Sheet component.

Footers

Sheet footers comes in three variations: no footer, footer with an Anchor, and footer with Buttons.

Headers

Sheet headers come in three variations: no title, title, and title with description.

Placement

Sheets can be placed at the start or end of the container. End is the default placement.

Size

Sheets default to 380px in width. You can customize the width based on your intended experience to any size using pixels or our grid system.

Configuration

Name9.0.0-next.26•View source•View on npm
Installnpm install @zendeskgarden/react-chrome
Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
Importimport { Sheet } from '@zendeskgarden/react-chrome'

API

The Sheet component follows this structure:

<Sheet>  <Sheet.Header>    <Sheet.Title>      {/* a text to label the sheet */}    </Sheet.Title>    <Sheet.Description>      {/* a text describing the sheet */}    </Sheet.Description>  </Sheet.Header>    <Sheet.Body>    {/* main content of the sheet */}  </Sheet.Body>
  <Sheet.Footer>    <Sheet.FooterItem>      {/* items to set in the footer, such as buttons */}    </Sheet.FooterItem>  </Sheet.Footer>
  <Sheet.Close /></Sheet>

Please keep the subcomponent structure in the order displayed in the example above.

Sheet

Extends HTMLAttributes<HTMLElement>

The Sheet component provides state and accessibility attributes to its children.

Prop name	Type	Default	Description
focusOnMount	boolean		Directs keyboard focus to the sheet on mount
isAnimated	boolean	true	Determines whether animation for opening and closing the sheet is used
isOpen	boolean		Opens the sheet
placement	'end' \| 'start'	'end'	Adjusts the placement of the sheet
restoreFocus	boolean		Returns keyboard focus to the element that triggered the sheet
size	string	'380px'	Sets the size of the open sheet

Sheet.Body

Extends HTMLAttributes<HTMLDivElement>

A Body requires additional accessible functionality to make the element focusable for keyboard scrolling. Nest it within the Sheet component.

Sheet.Title

Extends HTMLAttributes<HTMLDivElement>

A Title labels the Sheet for assistive technology. Nest it within a Header component.

Sheet.Description

Extends HTMLAttributes<HTMLDivElement>

A Description describes the Sheet for assistive technology. Nest it within a Header component.

Sheet.Header

Extends HTMLAttributes<HTMLElement>

Nest a Header within the Sheet component. If neither Title nor Description are used, the Header should be omitted.

Sheet.Footer

Extends HTMLAttributes<HTMLElement>

Nest a Footer within the Sheet component.

Prop name	Type	Default	Description
isCompact	boolean		Applies compact styling and centers the elements

Sheet.FooterItem

Extends HTMLAttributes<HTMLDivElement>

Nest a FooterItem within the Footer component.

Sheet.Close

Extends ButtonHTMLAttributes<HTMLButtonElement>

Nest a Close button within a Sheet component as the last child for consistent tab order.