Clarity: Page footer component?

Created on 8 Mar 2017  路  7Comments  路  Source: vmware/clarity

Select one ... (check one with "x")

[ ] bug
[x ] feature request
[ ] enhancement

Expected behavior

Is it possible to have a static footer component at the bottom of the page? Is there a provision for that?

Actual behavior

I could not find anything.

Reproduction of behavior




Environment details

  • Angular version: 2.0.X

  • Clarity version:

  • OS and version:

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

@clangular design best with core under consideration design new component

Most helpful comment

Just FYI: Our layout already supports adding a footer to it. StackBlitz: https://stackblitz.com/edit/clarity-footer

All 7 comments

This would be nice.

Just FYI: Our layout already supports adding a footer to it. StackBlitz: https://stackblitz.com/edit/clarity-footer

One solution ist to use a second header tag at the bottom after the content-container of your document. With an own css class you can overwrite the height for example.

.clr-footer {
max-height: 25px !important;
}

For me the most important thing was, to be able to switch between light and dark theme with the specific colors (background and font) at the footer.
This works for me.

Is there also the possibility to accomplish this for routing, so when the footer is inside the 'content-container', to have different content for each route?

For using the theme-colors i think this should work, but i dont know if the Position will be correct. Perhaps you have to modify the css to fixed Position of the header tag.
Not tested example:
.clr-footer {
position: fixed;
bottom: 0px;
max-height: 25px !important;
}
Please leave a comment if that works for other users ...

Thanks yes for me that works fine!

<div class="route-hello">
  <div class="content-area">
    <h1>Hello</h1>
  </div>

  <div class="clr-footer">
    this is the footer of hello
  </div>
</div>


.clr-footer{
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 5%;
}

https://stackblitz.com/edit/clarity-footer-s3jmgb

Thank you for the suggestion for this component, but it doesn't have a lot of context for us to build something that is more than a generic container. With Clarity Core, we have really great Layout Tokens to help you organize an application or page structure, including making a footer, and that would be the recommendation to utilize in the future. We are considering a drawer type component which might also solve some of the desires mentioned in this thread.

I'm going to close this as something you might be able to utilize the Layout Tokens to address or look for future Clarity Core implementations of a drawer like component.

Was this page helpful?
0 / 5 - 0 ratings