90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
import type { JSXElement } from '@fluentui/react-utilities';
|
|
import * as React_2 from 'react';
|
|
import type { Slot } from '@fluentui/react-utilities';
|
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
|
/**
|
|
* The Image component ensures the consistent styling of images.
|
|
*/
|
|
declare const Image_2: ForwardRefComponent<ImageProps>;
|
|
export { Image_2 as Image }
|
|
|
|
/**
|
|
* Image props without design-specific props (shape, shadow, bordered, fit).
|
|
* Use this when building a base image that is unstyled or uses a custom design system.
|
|
*/
|
|
export declare type ImageBaseProps = ComponentProps<ImageSlots>;
|
|
|
|
/**
|
|
* Image state without design-specific state (shape, shadow, bordered, fit).
|
|
*/
|
|
export declare type ImageBaseState = ComponentState<ImageSlots>;
|
|
|
|
export declare const imageClassNames: SlotClassNames<ImageSlots>;
|
|
|
|
export declare type ImageProps = ComponentProps<ImageSlots> & {
|
|
/**
|
|
* An image can take up the width of its container.
|
|
*
|
|
* @default false
|
|
*/
|
|
block?: boolean;
|
|
/**
|
|
* An image can appear with a rectangular border.
|
|
*
|
|
* @default false
|
|
*/
|
|
bordered?: boolean;
|
|
/**
|
|
* An image can set how it should be resized to fit its container.
|
|
*
|
|
* @default 'default'
|
|
*/
|
|
fit?: 'none' | 'center' | 'contain' | 'cover' | 'default';
|
|
/**
|
|
* An image can appear elevated with shadow.
|
|
*
|
|
* @default false
|
|
*/
|
|
shadow?: boolean;
|
|
/**
|
|
* An image can appear square, circular, or rounded.
|
|
*
|
|
* @default 'square'
|
|
*/
|
|
shape?: 'square' | 'circular' | 'rounded';
|
|
};
|
|
|
|
export declare type ImageSlots = {
|
|
root: Slot<'img'>;
|
|
};
|
|
|
|
export declare type ImageState = ComponentState<ImageSlots> & Required<Pick<ImageProps, 'block' | 'bordered' | 'fit' | 'shadow' | 'shape'>>;
|
|
|
|
/**
|
|
* Define the render function.
|
|
* Given the state of an image, renders it.
|
|
*/
|
|
export declare const renderImage_unstable: (state: ImageBaseState) => JSXElement;
|
|
|
|
/**
|
|
* Given user props, returns state and render function for an Image.
|
|
*/
|
|
export declare const useImage_unstable: (props: ImageProps, ref: React_2.Ref<HTMLImageElement>) => ImageState;
|
|
|
|
/**
|
|
* Base hook for Image component, which manages state related to slot structure.
|
|
* This hook excludes design props (shape, shadow, bordered, fit).
|
|
*
|
|
* @param props - User provided props to the Image component.
|
|
* @param ref - User provided ref to be passed to the Image component.
|
|
*/
|
|
export declare const useImageBase_unstable: (props: ImageBaseProps, ref: React_2.Ref<HTMLImageElement>) => ImageBaseState;
|
|
|
|
export declare const useImageStyles_unstable: (state: ImageState) => ImageState;
|
|
|
|
export { }
|