@fluentui/react-northstar
Version:
A themable React component library.
86 lines (85 loc) • 4.16 kB
TypeScript
import { Accessibility, CardBehaviorProps } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ComponentEventHandler, FluentComponentStaticProps } from '../../types';
import { SizeValue, UIComponentProps } from '../../utils';
import { CardBody } from './CardBody';
import { CardColumn } from './CardColumn';
import { CardFooter } from './CardFooter';
import { CardHeader } from './CardHeader';
import { CardPreview } from './CardPreview';
import { CardExpandableBox } from './CardExpandableBox';
export interface CardProps extends UIComponentProps {
/**
* Accessibility behavior if overridden by the user.
*/
accessibility?: Accessibility<CardBehaviorProps>;
/** A primary content. */
children?: React.ReactNode;
/**
* Called on click.
*
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onClick?: ComponentEventHandler<CardProps>;
/** A card can be compact, without any padding inside. */
compact?: boolean;
/** A card will used horizontal layout. */
horizontal?: boolean;
/** Centers content in a card. */
centered?: boolean;
/** A card can be sized. */
size?: SizeValue;
/** A card can take up the width and height of its container. */
fluid?: boolean;
/** A card can show that it cannot be interacted with. */
disabled?: boolean;
/** A card can be hiding part of the content and expand on hover/focus. */
expandable?: boolean;
/** A card can have elevation styles. */
elevated?: boolean;
/** A card can have inverted background styles. */
inverted?: boolean;
/** A card can have ghost styles. */
ghost?: boolean;
/** A card can show that it is currently selected or not. */
selected?: boolean;
}
export declare type CardStylesProps = Pick<CardProps, 'compact' | 'horizontal' | 'centered' | 'size' | 'fluid' | 'disabled' | 'expandable' | 'elevated' | 'inverted' | 'ghost' | 'selected'> & {
actionable: boolean;
};
export declare const cardClassName = "ui-card";
/**
* A Card is used to display data in sematically grouped way.
* * @accessibility
* By default adds `group` role ([more information available in aria documentation](https://www.w3.org/TR/wai-aria-1.1/#group)), thus it's necessary to provide `aria-roledescription` for correct widget description. [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription-property)
* When card is actionable (i.e. has `onClick` property), use [cardFocusableBehavior](/components/card/accessibility#card-focusable). [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-practices/#gridNav_focus)
* When card contains actionable elements, use [cardChildrenFocusableBehavior](/components/card/accessibility#card-children-focusable).
*
*/
export declare const Card: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof CardProps> & {
as?: TExtendedElementType;
} & CardProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<CardProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<CardProps & {
as: "div";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
}, "as" | keyof CardProps> & {
as?: "div";
} & CardProps;
} & FluentComponentStaticProps<CardProps> & {
Header: typeof CardHeader;
Body: typeof CardBody;
Footer: typeof CardFooter;
Preview: typeof CardPreview;
TopControls: typeof CardPreview;
Column: typeof CardColumn;
ExpandableBox: typeof CardExpandableBox;
};