Skip to main content

Drawer

Import​

import { Drawer } from '@resultadosdigitais/tangram-components'

Properties​

aria-describedby​

Typestring

Description​

Gives the drawer an accessible name by referring to the element that provides the drawer title.

aria-labelledby​

Typestring

Description​

Gives the drawer an accessible description by referring to the drawer content that describes the primary message or purpose.

onClose​

Typefunc
Defaultundefined

Description​

Callback fired when the component requests to be closed.

anchor​

Type
Enum of:
  • Drawer.anchors.left
  • Drawer.anchors.right
DefaultDrawer.anchors.left

Description​

Side from which the drawer will appear.

size​

Type
Enum of:
  • Drawer.sizes.sm
  • Drawer.sizes.md
  • Drawer.sizes.lg
DefaultDrawer.sizes.md

Description​

The size of the drawer.

open​

Typebool
Defaultfalse

Description​

Controls whether the drawer is open.

scrim​

Typebool
Defaultfalse

Description​

Modal navigation drawers use a scrim to block interaction with the rest of the app. The scrim is placed directly below the drawer’s sheet and can be tapped or clicked to dismiss the drawer.

<DrawerBody />​

Import​

import { DrawerBody } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typenode
Defaultundefined
Description​

Drawer content

<DrawerHeader />​

Import​

import { DrawerHeader } from '@resultadosdigitais/tangram-components'

Properties​

onDismiss​

Typefunc
Default() => {}
Description​

Close icon click event.

dismissible​

Typebool
Defaulttrue
Description​

Toggles the close icon display.

text​

Typestring | element
Defaultundefined
Description​

Displays the given text as a title. You get the same result using DrawerTitle within children.

children​

Typenode
Defaultundefined
Description​

Compose the content between the title and the close icon.

<DrawerTitle />​

Import​

import { DrawerTitle } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typenode
Defaultundefined
Description​

The text for the title

Feedback​