page

Documentation

Index

• type BreadcrumbProps
• type ContextProps
• type GroupProps
• type HeaderProps
• type HeaderToolsGroupProps
• type HeaderToolsItemProps
• type HeaderToolsProps
• type NavigationProps
• type Props
• type SectionProps
• type SidebarContextProps
• type SidebarProps
• type State
• type ToggleButtonProps

Types

type BreadcrumbProps

type BreadcrumbProps struct {
	// ClassName - Additional classes to apply to the PageBreadcrumb. Optional.
	ClassName string
	// Children - Content rendered inside of the PageBreadcrumb. Optional.
	Children any //  // React.ReactNode
	// IsWidthLimited - Limits the width of the breadcrumb. Optional.
	IsWidthLimited bool
	// Sticky - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom. Optional.
	Sticky any //  /* "top" | "bottom" */
	// HasShadowTop - Flag indicating if PageBreadcrumb should have a shadow at the top. Optional.
	HasShadowTop bool
	// HasShadowBottom - Flag indicating if PageBreadcrumb should have a shadow at the bottom. Optional.
	HasShadowBottom bool
	// HasOverflowScroll - Flag indicating if the PageBreadcrumb has a scrolling overflow. Optional.
	HasOverflowScroll bool
}

type ContextProps

type ContextProps struct {
	// IsManagedSidebar -
	IsManagedSidebar bool
	// OnNavToggle -
	OnNavToggle func()
	// IsNavOpen -
	IsNavOpen bool
	// Width -
	Width int
	// GetBreakpoint -
	GetBreakpoint func(width any) any /* "default" | "sm" | "md" | "lg" | "xl" | "2xl" */
}

type GroupProps

type GroupProps struct {
	// ClassName - Additional classes to apply to the PageGroup. Optional.
	ClassName string
	// Children - Content rendered inside of the PageGroup. Optional.
	Children any //  // React.ReactNode
	// Sticky - Modifier indicating if PageGroup is sticky to the top or bottom. Optional.
	Sticky any //  /* "top" | "bottom" */
	// HasShadowTop - Modifier indicating if PageGroup should have a shadow at the top. Optional.
	HasShadowTop bool
	// HasShadowBottom - Modifier indicating if PageGroup should have a shadow at the bottom. Optional.
	HasShadowBottom bool
	// HasOverflowScroll - Flag indicating if the PageGroup has a scrolling overflow. Optional.
	HasOverflowScroll bool
}

type HeaderProps

type HeaderProps struct {
	// ClassName - Additional classes added to the page header. Optional.
	ClassName string
	// Logo - Component to render the logo/brand, use <Brand />. Optional.
	Logo any //  // React.ReactNode
	// LogoProps - Additional props passed to the logo anchor container. Optional.
	LogoProps any //  /* TODO: how to pass additional properties */
	// LogoComponent - Component to use to wrap the passed <logo>. Optional.
	LogoComponent any //  // React.ReactNode
	// HeaderTools - Component to render the header tools, use <PageHeaderTools />. Optional.
	HeaderTools any //  // React.ReactNode
	// TopNav - Component to render navigation within the header, use <Nav />. Optional.
	TopNav any //  // React.ReactNode
	// ShowNavToggle - True to show the nav toggle button (toggles side nav). Optional.
	ShowNavToggle bool
	// IsNavOpen - True if the side nav is shown. Optional.
	IsNavOpen bool
	// IsManagedSidebar - This prop is no longer managed through PageHeader but in the Page component. Optional.
	IsManagedSidebar bool
	// Role - Sets the value for role on the <main> element. Optional.
	Role string
	// OnNavToggle - Callback function to handle the side nav toggle button, managed by the Page component if
	// the Page isManagedSidebar prop is set to true. Optional.
	OnNavToggle func()
	// AriaLabel - Aria Label for the nav toggle button. Optional.
	AriaLabel string
}

type HeaderToolsGroupProps

type HeaderToolsGroupProps struct {
	// Children - Content rendered in the page header tools group.
	Children any //  // React.ReactNode
	// ClassName - Additional classes added to the page header tools group. Optional.
	ClassName string
	// Visibility - Visibility at various breakpoints. Optional.
	Visibility map[string]string /* { default:{ hidden, visible }, sm:{ hidden, visible }, md:{ hidden, visible }, lg:{ hidden, visible }, xl:{ hidden, visible }, 2xl:{ hidden, visible } } */
}

type HeaderToolsItemProps

type HeaderToolsItemProps struct {
	// Children - Content rendered in page header tools item.
	Children any //  // React.ReactNode
	// ClassName - Additional classes added to the page header tools item. Optional.
	ClassName string
	// Id - HTML id of the PageHeaderToolsItem. Optional.
	Id string
	// Visibility - Visibility at various breakpoints. Optional.
	Visibility map[string]string /* { default:{ hidden, visible }, sm:{ hidden, visible }, md:{ hidden, visible }, lg:{ hidden, visible }, xl:{ hidden, visible }, 2xl:{ hidden, visible } } */
	// IsSelected - True to make an icon button appear selected. Optional.
	IsSelected bool
}

type HeaderToolsProps

type HeaderToolsProps struct {
	// Children - Content rendered in page header tools.
	Children any //  // React.ReactNode
	// ClassName - Additional classes added to the page header tools. Optional.
	ClassName string
}

type NavigationProps

type NavigationProps struct {
	// ClassName - Additional classes to apply to the PageNavigation. Optional.
	ClassName string
	// Children - Content rendered inside of the PageNavigation. Optional.
	Children any //  // React.ReactNode
	// IsWidthLimited - Limits the width of the PageNavigation. Optional.
	IsWidthLimited bool
	// Sticky - Modifier indicating if the PageNavigation is sticky to the top or bottom. Optional.
	Sticky any //  /* "top" | "bottom" */
	// HasShadowTop - Flag indicating if PageNavigation should have a shadow at the top. Optional.
	HasShadowTop bool
	// HasShadowBottom - Flag indicating if PageNavigation should have a shadow at the bottom. Optional.
	HasShadowBottom bool
	// HasOverflowScroll - Flag indicating if the PageNavigation has a scrolling overflow. Optional.
	HasOverflowScroll bool
}

type Props

type Props struct {
	// Children - Content rendered inside the main section of the page layout (e.g. <PageSection />). Optional.
	Children any //  // React.ReactNode
	// ClassName - Additional classes added to the page layout. Optional.
	ClassName string
	// Header - Header component (e.g. <PageHeader />). Optional.
	Header any //  // React.ReactNode
	// Sidebar - Sidebar component for a side nav (e.g. <PageSidebar />). Optional.
	Sidebar any //  // React.ReactNode
	// NotificationDrawer - Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer
	// />). Optional.
	NotificationDrawer any //  // React.ReactNode
	// IsNotificationDrawerExpanded - Flag indicating Notification drawer in expanded. Optional.
	IsNotificationDrawerExpanded bool
	// IsBreadcrumbWidthLimited - Flag indicating if breadcrumb width should be limited. Optional.
	IsBreadcrumbWidthLimited bool
	// OnNotificationDrawerExpand - Callback when notification drawer panel is finished expanding. Optional.
	OnNotificationDrawerExpand func()
	// SkipToContent - Skip to content component for the page. Optional.
	SkipToContent any //  // React.ReactElement
	// Role - Sets the value for role on the <main> element. Optional.
	Role string
	// MainContainerId - an id to use for the [role="main"] element. Optional.
	MainContainerId string
	// MainTabIndex - tabIndex to use for the [role="main"] element, null to unset it. Optional.
	MainTabIndex any //  /* int | "" */
	// IsManagedSidebar - If true, manages the sidebar open/close state and there is no need to pass the isNavOpen
	// boolean into the sidebar component or add a callback onNavToggle function into the PageHeader component.
	// Optional.
	IsManagedSidebar bool
	// IsTertiaryNavWidthLimited - Flag indicating if tertiary nav width should be limited. Optional.
	IsTertiaryNavWidthLimited bool
	// DefaultManagedSidebarIsOpen - If true, the managed sidebar is initially open for desktop view. Optional.
	DefaultManagedSidebarIsOpen bool
	// OnPageResize - Can add callback to be notified when resize occurs, for example to set the sidebar isNav
	// prop to false for a width < 768px Returns object { mobileView: boolean, windowSize: number }. Optional.
	OnPageResize func(object any)
	// GetBreakpoint - The page resize observer uses the breakpoints returned from this function when adding
	// the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class You can override the default getBreakpoint function
	// to return breakpoints at different sizes than the default You can view the default getBreakpoint function
	// here: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts.
	// Optional.
	GetBreakpoint func(width any) any /* "default" | "sm" | "md" | "lg" | "xl" | "2xl" */
	// Breadcrumb - Breadcrumb component for the page. Optional.
	Breadcrumb any //  // React.ReactNode
	// TertiaryNav - Tertiary nav component for the page. Optional.
	TertiaryNav any //  // React.ReactNode
	// MainAriaLabel - Accessible label, can be used to name main section. Optional.
	MainAriaLabel string
	// IsTertiaryNavGrouped - Flag indicating if the tertiaryNav should be in a group. Optional.
	IsTertiaryNavGrouped bool
	// IsBreadcrumbGrouped - Flag indicating if the breadcrumb should be in a group. Optional.
	IsBreadcrumbGrouped bool
	// AdditionalGroupedContent - Additional content of the group. Optional.
	AdditionalGroupedContent any //  // React.ReactNode
	// GroupProps - Additional props of the group. Optional.
	GroupProps any //  // PageGroupProps
}

type SectionProps

type SectionProps struct {
	// Children - Content rendered inside the section. Optional.
	Children any //  // React.ReactNode
	// ClassName - Additional classes added to the section. Optional.
	ClassName string
	// Variant - Section background color variant. Optional.
	Variant any //  /* "default" | "light" | "dark" | "darker" */
	// Type - Section type variant. Optional.
	Type any //  /* "default" | "nav" | "subnav" | "breadcrumb" | "tabs" | "wizard" */
	// IsFilled - Enables the page section to fill the available vertical space. Optional.
	IsFilled bool
	// IsWidthLimited - Limits the width of the section. Optional.
	IsWidthLimited bool
	// IsCenterAligned - Flag indicating if the section content is center aligned. isWidthLimited must be set
	// for this to work. Optional.
	IsCenterAligned bool
	// Padding - Padding at various breakpoints. Optional.
	Padding map[string]string /* { default:{ padding, noPadding }, sm:{ padding, noPadding }, md:{ padding, noPadding }, lg:{ padding, noPadding }, xl:{ padding, noPadding }, 2xl:{ padding, noPadding } } */
	// Sticky - Modifier indicating if PageSection is sticky to the top or bottom. Optional.
	Sticky any //  /* "top" | "bottom" */
	// HasShadowTop - Modifier indicating if PageSection should have a shadow at the top. Optional.
	HasShadowTop bool
	// HasShadowBottom - Modifier indicating if PageSection should have a shadow at the bottom. Optional.
	HasShadowBottom bool
	// HasOverflowScroll - Flag indicating if the PageSection has a scrolling overflow. Optional.
	HasOverflowScroll bool
}

type SidebarContextProps

type SidebarContextProps struct {
	// IsNavOpen -
	IsNavOpen bool
}

type SidebarProps

type SidebarProps struct {
	// ClassName - Additional classes added to the page sidebar. Optional.
	ClassName string
	// Nav - Component to render the side navigation (e.g. <Nav />. Optional.
	Nav any //  // React.ReactNode
	// IsManagedSidebar - If true, manages the sidebar open/close state and there is no need to pass the isNavOpen
	// boolean into the sidebar component or add a callback onNavToggle function into the PageHeader component.
	// Optional.
	IsManagedSidebar bool
	// IsNavOpen - Programmatically manage if the side nav is shown, if isManagedSidebar is set to true in the
	// Page component, this prop is managed. Optional.
	IsNavOpen bool
	// Theme - Indicates the color scheme of the sidebar. Optional.
	Theme any //  /* "dark" | "light" */
}

type State

type State struct {
	// DesktopIsNavOpen -
	DesktopIsNavOpen bool
	// MobileIsNavOpen -
	MobileIsNavOpen bool
	// MobileView -
	MobileView bool
	// Width -
	Width int
}

type ToggleButtonProps

type ToggleButtonProps struct {
	// Children - Content of the page toggle button. Optional.
	Children any //  // React.ReactNode
	// IsNavOpen - True if the side nav is shown. Optional.
	IsNavOpen bool
	// OnNavToggle - Callback function to handle the side nav toggle button, managed by the Page component if
	// the Page isManagedSidebar prop is set to true. Optional.
	OnNavToggle func()
}