1 | import * as React from 'react';
|
2 | import type { IRefObject, IRenderFunction } from '@fluentui/utilities';
|
3 | import type { IButtonProps } from '../../Button';
|
4 | import type { IKeytipProps } from '../Keytip/Keytip.types';
|
5 | /**
|
6 | * {@docCategory Pivot}
|
7 | */
|
8 | export interface IPivotItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
9 | /**
|
10 | * Gets the component ref.
|
11 | */
|
12 | componentRef?: IRefObject<{}>;
|
13 | /**
|
14 | * The text displayed of each pivot link.
|
15 | * @deprecated Use `headerText` instead.
|
16 | */
|
17 | linkText?: string;
|
18 | /**
|
19 | * The text displayed of each pivot link.
|
20 | */
|
21 | headerText?: string;
|
22 | /**
|
23 | * Props for the header command button. This provides a way to pass in native props, such as data-* and aria-*,
|
24 | * for each pivot header/link element.
|
25 | */
|
26 | headerButtonProps?: IButtonProps | {
|
27 | [key: string]: string | number | boolean;
|
28 | };
|
29 | /**
|
30 | * An required key to uniquely identify a pivot item.
|
31 | *
|
32 | * Note: The 'key' from react props cannot be used inside component.
|
33 | */
|
34 | itemKey?: string;
|
35 | /**
|
36 | * The aria label of each pivot link which will read by screen reader instead of linkText.
|
37 | *
|
38 | * Note that unless you have compelling requirements you should not override aria-label.
|
39 | */
|
40 | ariaLabel?: string;
|
41 | /**
|
42 | * Defines an optional item count displayed in parentheses just after the `linkText`.
|
43 | *
|
44 | * Examples: completed (4), Unread (99+)
|
45 | */
|
46 | itemCount?: number | string;
|
47 | /**
|
48 | * An optional icon to show next to the pivot link.
|
49 | */
|
50 | itemIcon?: string;
|
51 | /**
|
52 | * Optional custom renderer for the pivot item link
|
53 | */
|
54 | onRenderItemLink?: IRenderFunction<IPivotItemProps>;
|
55 | /**
|
56 | * Optional keytip for this PivotItem
|
57 | */
|
58 | keytipProps?: IKeytipProps;
|
59 | /**
|
60 | * Defines whether to always render the pivot item (regardless of whether it is selected or not).
|
61 | * Useful if you're rendering content that is expensive to mount.
|
62 | *
|
63 | * @defaultvalue false
|
64 | */
|
65 | alwaysRender?: boolean;
|
66 | }
|