Page content
Page
Page is a non-visual container that encapsulates providers for child components to consume.
Examples
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.
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