@fluentui/react-northstar
Version:
A themable React component library.
51 lines (50 loc) • 2.78 kB
TypeScript
import { Accessibility, AccessibilityAttributes, ImageBehaviorProps } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { UIComponentProps } from '../../utils';
import { FluentComponentStaticProps } from '../../types';
export interface ImageProps extends UIComponentProps, ImageBehaviorProps {
/** Alternative text. */
alt?: string;
'aria-label'?: AccessibilityAttributes['aria-label'];
/** Accessibility behavior if overridden by the user. */
accessibility?: Accessibility<ImageBehaviorProps>;
/** An image may be formatted to appear inline with text as an avatar. */
avatar?: boolean;
/** An image can appear circular. */
circular?: boolean;
/** An image can take up the width of its container. */
fluid?: boolean;
/** Image source URL. */
src?: string;
}
export declare type ImageStylesProps = Pick<ImageProps, 'avatar' | 'circular' | 'fluid'>;
export declare const imageClassName = "ui-image";
/**
* An Image is a graphic representation of something.
*
* @accessibility
* If image should be visible to screen readers, textual representation needs to be provided in 'alt' property.
*
* Other considerations:
* - when alt property is empty, then Narrator in scan mode navigates to image and narrates it as empty paragraph.
* - when image has role='presentation' then screen readers navigate to the element in scan/virtual mode. To avoid this, the attribute "aria-hidden='true'" is applied by the default image behavior.
* - when alt property is used in combination with aria-label, arialabbeledby or title, additional screen readers verification is needed as each screen reader handles this combination differently.
*/
export declare const Image: (<TExtendedElementType extends React.ElementType<any> = "img">(props: React.RefAttributes<HTMLImageElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof ImageProps> & {
as?: TExtendedElementType;
} & ImageProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<ImageProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<ImageProps & {
as: "img";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLImageElement> & Omit<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & {
ref?: React.Ref<HTMLImageElement>;
}, "as" | keyof ImageProps> & {
as?: "img";
} & ImageProps;
} & FluentComponentStaticProps<ImageProps>;