Variable CardMediaConst

Type Declaration

• • (props: CardMediaPropsExtend): Element

  • Material-UI CardMedia component with keyboard accessibility and click handling.

    Wraps Material-UI's CardMedia to provide flexible image/video rendering with keyboard event support for accessibility. Supports both image and video components with click and keyDown callbacks. All Material-UI CardMedia props are supported and passed through directly.

    Parameters

    • props: CardMediaPropsExtend

      CardMedia configuration (see CardMediaPropsExtend interface)

    Returns Element

    CardMedia component with click and keyboard event handling

    Example

    // Basic image usage
    <CardMedia
      component="img"
      src="/path/to/image.jpg"
      alt="Description of image"
    />
    
    // With click handler
    <CardMedia
      src="/path/to/image.jpg"
      alt="Clickable image"
      click={() => handleImageClick()}
    />
    
    // Video component
    <CardMedia
      cardComponent="video"
      src="/path/to/video.mp4"
      alt="Video description"
    />
    
    // GeoView implementation with lighbox
    <CardMedia
      key={generateId()}
      sx={{ ...sxClasses.featureInfoItemValue, cursor: 'pointer' }}
      alt={`${alias} ${index}`}
      id={imageElementId}
      src={item}
      tabIndex={0}
      onClick={() => onInitLightBox(featureInfoItem.value as string, featureInfoItem.alias, index)}
      onKeyDown={(event: React.KeyboardEvent) => {
      if (event.key === 'Enter') {
         onInitLightBox(featureInfoItem.value as string, `${index}_${featureInfoItem.alias}`, index);
       }
      }}
    />
    Copy

    See

    https://mui.com/material-ui/react-card/#media