office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
127 lines (126 loc) • 3.28 kB
TypeScript
import * as React from 'react';
export interface INav {
/**
* The meta 'key' property of the currently selected NavItem of the Nav. Can return
* undefined if the currently selected nav item has no populated key property. Be aware
* that in order for Nav to properly understand which key is selected all NavItems in
* all groups of the Nav must have populated key properties.
*/
selectedKey: string;
}
export interface INavProps {
/**
* A collection of link groups to display in the navigation bar
*/
groups: INavLinkGroup[];
/**
* Used to customize how content inside the link tag is rendered
* @defaultvalue Default link rendering
*/
onRenderLink?: Function;
/**
* Function callback invoked when a link in the navigation is clicked
*/
onLinkClick?: (ev?: React.MouseEvent<HTMLElement>, item?: INavLink) => void;
/**
* Indicates whether the navigation component renders on top of other content in the UI
*/
isOnTop?: boolean;
/**
* (Optional) The key of the nav item initially selected.
*/
initialSelectedKey?: string;
/**
* (Optional) The nav container aria label.
*/
ariaLabel?: string;
/**
* (Optional) The alt text for the expanded state
**/
expandedStateText?: string;
/**
* (Optional) The alt text for the collapsed state text
**/
collapsedStateText?: string;
}
export interface INavLinkGroup {
/**
* Text to render as the header of a group
*/
name?: string;
/**
* Links to render within this group
*/
links: INavLink[];
/**
* The name to use for functional automation tests
*/
automationId?: string;
}
export interface INavLink {
/**
* Text to render for this link
*/
name: string;
/**
* URL to navigate to for this link
*/
url: string;
/**
* Child links to this link, if any
*/
links?: INavLink[];
/**
* Function callback invoked when a link in the navigation is clicked
*/
onClick?: (ev?: React.MouseEvent<HTMLElement>, item?: INavLink) => void;
/**
* button icon name if applied
*/
icon?: string;
/**
* Classname to apply to the icon link.
*/
iconClassName?: string;
/**
* The name of the item to be used in logging engagement data
*/
engagementName?: string;
/**
* The alt text for the item
*/
altText?: string;
/**
* The name to use for functional automation tests
*/
automationId?: string;
/**
* Whether or not the link is in an expanded state
*/
isExpanded?: boolean;
/**
* Aria label for nav link
*/
ariaLabel?: string;
/**
* Meta info for the link, does not involving rendering.
*/
key?: string;
/**
* title for tooltip or description
*/
title?: string;
/**
* Link <a> target.
*/
target?: string;
/**
* Point to the parent node key. This is used in EditNav when move node from sublink to
* parent lin vs vers.
*/
parentId?: string;
/**
* Any additional properties to apply to the rendered links.
*/
[propertyName: string]: any;
}