Refine Layout for Header & Footer
Hi! I was reading docs & don’t quite understand how the Layout prop works for
<Refine>
.
Currently I have Layout={Header}
where Header is a component. But I also see there’s a Header and Footer prop as well. When would we use Header/Footer vs Layout?
I’m using Material UI, if it makes a difference.
Sorry if this was confusing to understand. Thanks!7 Replies
Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! 🏆
Answer: The Layout prop is used for global customization, while the Header and Footer props are used for local customization. SOURCES: ./docs/api-reference/mui/customization/layout.md, ./docs/advanced-tutorials/custom-layout.md, ./docs/api-reference/chakra-ui/customization/layout.md, ./docs/api-reference/core/components/refine-config.md
Answer: The Layout prop is used for global customization, while the Header and Footer props are used for local customization. SOURCES: ./docs/api-reference/mui/customization/layout.md, ./docs/advanced-tutorials/custom-layout.md, ./docs/api-reference/chakra-ui/customization/layout.md, ./docs/api-reference/core/components/refine-config.md
Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.
sunny-green•2y ago
Hey @sheepndreams I did not fully understand the problem. Can you explain with a sample code?
automatic-azure•2y ago
This is the code in App.tsx
You can see in the Refine component, there's a Layout prop which is taking in a Header component.
I guess my question is what is the difference using Layout prop vs. the Header/Footer props?
And the best way to utilize it using MUI
sunny-green•2y ago
It contains components such as
Header
, Footer
Sider
in Layout
. You can think of it like a container.automatic-azure•2y ago
Just to confirm, there's like 2 ways to customize the layout:
1) Create a custom layout React.FC to pass into Layout
or
2) Use MUI default Layout, and also pass Header and Footer into Refine component?
Hey @sheepndreams 👋,
Can you check this doc? I think it's can be helpful ⚡️
https://refine.dev/docs/api-reference/mui/customization/mui-custom-layout/
Layout | refine
You can create custom layouts using
and
components.automatic-azure•2y ago
Thanks!