#Image

#Import

import { Image } from 'bumbag';

#Usage

Bean

<Image> is also responsive by default, however, if you want to fix the width, add the isFixed prop.

Bean

#Image fit

Setting a fit prop to "contain" means that the whole image will fit in the bounds and it will not lose its scale.

Bean

Setting a fit prop to "cover" means that the image will fill the bounds and it will not lose its scale.

Bean

#Positioning

You can change the position of a fitted image with the fitPosition prop. This prop mimics the object-position CSS attribute.

Bean
Bean

#Accessibility

#Rules

  • An image must have an alt prop. However, if it is a decorative image and the image is not intended to be read by a screen reader, pass through alt="".

#References

#Props

#Image Props

src string Required

fit "contain" | "cover"

How the image fits its bounds

fitPosition string

Positioning of the fitted image. Value can be "top", "left", "center", "right", "bottom" or an "x y" coordinate

isFixed boolean

Fix the width of the image. It will not be responsive.

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "left" | "right" | "center"

alignY "bottom" | "top" | "center"

altitude string

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

#Theming

Image.styles.base
Image.styles.fixed
Image.styles.contain
Image.styles.cover
Copyright © 2020 Jake Moxey