Skip to main content

    Page

    The Page component provides the basic layout for your app with slots for a header, sidebar, main content, and a detail view. The Main slot is the only slot that is mandatory for rendering the Page; every other slot is optional.

    Check out the UI and design guidelines for more information on how to structure your app using the page.

    OverviewPropertiesUsage

    PageProps

    extends, <.<>, keyof >, , ,
    NameTypeDefaultDescription
    disableAnimations?
    		false

    Whether animations should be disabled. If true or 'prefers-reduced-motion' is set to 'reduce', no animations are applied.

    The Page.Header is rendered at the very top of the page. Take a look at the UI and design guidelines for information on which components we recommend to use in the header.

    HeaderProps

    extends, <.<>, keyof >, ,

    Page.Sidebar​

    The Page.Sidebar is the first slot of the page you can use to display content. Take a look at the UI and design guidelines for information on which content we recommend to use in the sidebar.

    SidebarProps

    Signature:

    export declare type SidebarProps = & ;

    Page.Main​

    You should use the Page.Main compound to display the main content of your application. Take a look at the UI and design guidelines for information on which content we recommend to use in the main view.

    MainProps

    extends, <.<>, | keyof >, ,
    NameTypeDefaultDescription
    minWidth?
    		320

    The minimum width of the main panel in pixels.

    Page.DetailView​

    The Page.DetailView can be leveraged to provide additional information related to the main content. Take a look at the UI and design guidelines for information on which content we recommend to use in the detail view.

    DetailViewProps

    Signature:

    export declare type DetailViewProps = & ;

    Page.PanelControlButton​

    The Page.PanelControlButton updates the dismissed state of an uncontrolled panel. The button automatically renders the correct icons depending on the panel state.

    PanelControlButtonProps

    Signature:

    export declare type PanelControl = { /** The action triggered by the button. */ action?: | | ; /** The target panel controlled by the button. */ target?: ; } & <<>, | | >;
    Still have questions?
    Find answers in the Dynatrace Community