How to create a "status bar"?

[Keith A Price]

How would I go about adding a "status bar" on the bottom of my page?

Something similar to the bar at the bottom of Word or Excel. It would show various summary info about the page.

For example, Excel shows Min, Max, Average, and Sum. Word shows word count, etc.

How would I do something similar? Basically, a container of various elements where the container "sticks" to the bottom of the screen, even on resize.

[Vengatesh Maniraj]

Hi Keith, 

Sorry for the delay. 

You can create a status bar on the bottom of the page by making use of the footer element in the MainLayout.razor page like the below code. 

MainLayout.razor 

<div class="page"> 

    <div class="sidebar"> 

        <NavMenu /> 

    </div> 

    <CascadingValue Value="this"> 

        <main> 

            <div class="top-row px-4"> 

                <a rel='nofollow' href=https://docs.microsoft.com/aspnet/ target="_blank">About</a> 

            </div> 

 

            <article class="content px-4"> 

                @Body 

            </article> 

            <footer> 

                // Add your summary here 

            </footer> 

        </main> 

    </CascadingValue> 

</div> 

<style> 

    footer { 

        bottom: 0px; 

        position: absolute; 

    } 

</style> 

 

Please refer to the below site for more reference about the footer element. 

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/layouts?view=aspnetcore-6.0#mainlayout-component 

To pass the summary details of the page to the footer element, please refer to the below discussion which help you to pass the value from page to MainLayout. 

https://stackoverflow.com/questions/65198814/how-to-pass-a-value-from-a-page-to-the-layout-in-blazor 

Regards, 

Vengatesh