foreign-sapphire
foreign-sapphire11mo ago

back button in list page beside title

I need a back button in list page beside title
5 Replies
kapa.ai
kapa.ai11mo ago
Hi @alfaz_muhammed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine provides a way to customize the back button in its Show and Create components using the goBack property. However, the extracts do not provide specific information on how to add a back button beside the title on a list page. Here's how you can customize the back button in Show and Create components: For Show component:
import { Show } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useBack } from "@refinedev/core";

const BackButton = () => {
const goBack = useBack();

return <Button onClick={() => goBack()}>BACK!</Button>;
};

const PostShow: React.FC = () => {
return (
<Show
goBack={<BackButton />}
>
<span>Rest of your page here</span>
</Show>
);
};
import { Show } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useBack } from "@refinedev/core";

const BackButton = () => {
const goBack = useBack();

return <Button onClick={() => goBack()}>BACK!</Button>;
};

const PostShow: React.FC = () => {
return (
<Show
goBack={<BackButton />}
>
<span>Rest of your page here</span>
</Show>
);
};
Source (https://refine.dev/docs/api-reference/mui/components/basic-views/show) For Create component:
import { Create } from "@refinedev/antd";

const PostCreate: React.FC = () => {
const BackButton = () => <Button>←</Button>;
return (
<Create goBack={<BackButton />}>
<p>Rest of your page here</p>
</Create>
);
};
import { Create } from "@refinedev/antd";

const PostCreate: React.FC = () => {
const BackButton = () => <Button>←</Button>;
return (
<Create goBack={<BackButton />}>
<p>Rest of your page here</p>
</Create>
);
};
Source (https://refine.dev/docs/api-reference/antd/components/basic-views/create) For adding a back button on a list page, you might need to customize the list component. Unfortunately, the provided extracts do not contain information on how to do this. I recommend checking the Refine documentation (https://refine.dev/docs) for more details. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@763439201353596968> kapa.ai is still learning and improving, please let us how it did by reacting below
foreign-sapphire
foreign-sapphire11mo ago
@kapa.ai in the title prop of list, does it returns the current title as callback so I can modify the title
kapa.ai
kapa.ai11mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The title prop in the List component of Refine allows you to set a custom title. However, based on the provided extracts, it does not return the current title as a callback. It simply uses the title you provide, or if you don't pass a title prop, it uses the plural form of the resource name by default. Here's an example of how you can set a custom title in the List component:
import { List } from "@refinedev/mui";
import { Typography } from "@mui/material";

const ListPage: React.FC = () => {
return (
<List
title={<Typography variant="h5">Custom Title</Typography>}
>
<span>Rest of your page here</span>
</List>
);
};
import { List } from "@refinedev/mui";
import { Typography } from "@mui/material";

const ListPage: React.FC = () => {
return (
<List
title={<Typography variant="h5">Custom Title</Typography>}
>
<span>Rest of your page here</span>
</List>
);
};
Source (https://refine.dev/docs/api-reference/mui/components/basic-views/list) If you want to modify the title based on some conditions or states, you can do so within the title prop:
import { List } from "@refinedev/mui";
import { Typography } from "@mui/material";

const ListPage: React.FC = () => {
const customTitle = "Custom Title"; // Modify this based on your conditions or states
return (
<List
title={<Typography variant="h5">{customTitle}</Typography>}
>
<span>Rest of your page here</span>
</List>
);
};
import { List } from "@refinedev/mui";
import { Typography } from "@mui/material";

const ListPage: React.FC = () => {
const customTitle = "Custom Title"; // Modify this based on your conditions or states
return (
<List
title={<Typography variant="h5">{customTitle}</Typography>}
>
<span>Rest of your page here</span>
</List>
);
};
For more advanced usage, you might need to check the Refine documentation (https://refine.dev/docs) or their API references. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@763439201353596968> kapa.ai is still learning and improving, please let us how it did by reacting below