@fluentui/react-northstar
Version:
A themable React component library.
49 lines (48 loc) • 2.83 kB
TypeScript
import { Accessibility } from '@fluentui/accessibility';
import * as React from 'react';
import { UIComponentProps, ChildrenComponentProps, ContentComponentProps, ColorComponentProps, AlignValue } from '../../utils';
import { HeaderDescription, HeaderDescriptionProps } from './HeaderDescription';
import { ShorthandValue, FluentComponentStaticProps } from '../../types';
export interface HeaderProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps, ColorComponentProps {
/**
* Accessibility behavior if overridden by the user.
*/
accessibility?: Accessibility<never>;
/** Shorthand for Header.Description. */
description?: ShorthandValue<HeaderDescriptionProps>;
/** Align header content. */
align?: AlignValue;
}
export declare const headerClassName = "ui-header";
export declare type HeaderStylesProps = Required<Pick<HeaderProps, 'align' | 'color'>> & {
hasDescription: boolean;
};
/**
* A Header organises the content by declaring a content's topic.
*
* @accessibility
* Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
* Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
*
* Other considerations:
* - when the description property is used in header, readers will narrate both header content and description within the element. In addition to that, both will be displayed in the list of headings.
*/
export declare const Header: (<TExtendedElementType extends React.ElementType<any> = "h1">(props: React.RefAttributes<HTMLHeadingElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof HeaderProps> & {
as?: TExtendedElementType;
} & HeaderProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<HeaderProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: import("prop-types").ValidationMap<any>;
defaultProps?: Partial<HeaderProps & {
as: "h1";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLHeadingElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
ref?: React.Ref<HTMLHeadingElement>;
}, "as" | keyof HeaderProps> & {
as?: "h1";
} & HeaderProps;
} & FluentComponentStaticProps<HeaderProps> & {
Description: typeof HeaderDescription;
};