VisualPickerDisplays an ActionSheet based dialog with Card items

UX Guidelines

Dev

UsageCode Example

<VisualPicker
  itemHeight={itemHeight}
  visible={isVisible}
  items={items}
  onDismiss={onDismiss}
  gridNumColumns={numColumns}
  headerProps={{
    title: 'Select Image'
  }}
/>

TIP

This component extends the overlays/ActionSheet props.

APIThis is the list of additional props for the component

avoidDismiss

boolean

Use to keep the dialog open after item selection

itemHeight

number

The height of the cards

items

VisualPickerItemProps[]

Card wrapped items to be rendered within the ActionSheet.

visible

boolean

Controls the visibility of the ActionSheet dialog