Page

Page is a non-visual container that encapsulates providers for child components to consume.

Examples

Page Title
Page content

Usage

Bundle up your providers for your child components to consume using a page.

Use a page to render a full page, not a subsection. If you're writing a 3rd-party extension that targets a specific tab bar or other component, you probably don't want to use a page.

Certain components will adjust their spacing when rendered as a direct child of a page, like header.

APIs

Orientation

Vertical
number
Horizontal
number

IPageProps

className
string
Optional root classname for the page element.
onScroll
React.UIEventHandler<HTMLDivElement>
Optional callback triggered when page's scroll event occurs.
orientation
Describes if the page should render elements in a flex-row or flex-column
scrollableContainerRef
React.RefObject<HTMLDivElement>
Optional ref to the scrollable container for the page.
selectedTabId
IReadonlyObservableValue<string> | string
Tracks the selected tab id within the page.
tabGroups
IReadonlyObservableArray<ITabGroup>
A list of providers contributing tab groups to the page.
tabProviders
IReadonlyObservableArray<IVssContributedTab>
A list of providers contributing tabs to the page.

Styles

layout

.page-content
Apply to your content within a page to get standard left/right/bottom padding.
.page-content-top
Apply to your content within a page to get standard top paddding
.page-content-bottom
Apply to your content within a page to get standard bottom paddding
.page-content-left
Apply to your content within a page to get standard left paddding
.page-content-right
Apply to your content within a page to get standard right paddding

Loaded Page page