generous-apricot
generous-apricot10mo ago

Edit Button on Show-Page

Hey everyone, I have adjusted the buttons inside of my list-component to have meta-information like this:
<EditButton
hideText
size="small"
recordItemId={record.id}
meta={{
source: record.source,
}}
/>
<EditButton
hideText
size="small"
recordItemId={record.id}
meta={{
source: record.source,
}}
/>
I'm currently lacking a way to adjust the EditButton inside of the @refinedev/antd Show component. Is there an obvious way I am missing?
4 Replies
kapa.ai
kapa.ai10mo ago
Hi @bastianwegge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can customize the EditButton inside the Show component of @refinedev/antd by using the headerButtons property. This property allows you to create your own buttons or utilize the default values of the EditButton component. Here is an example of how you can do it:
import { Show } from "@refinedev/antd";
import { EditButton } from "@refinedev/antd";

const PostShow: React.FC = () => {
return (
<Show
headerButtons={({ defaultButtons, editButtonProps }) => (
<>
{defaultButtons}
<EditButton
hideText
size="small"
{...editButtonProps}
meta={{
source: "your source here",
}}
/>
</>
)}
>
<p>Rest of your page here</p>
</Show>
);
};
import { Show } from "@refinedev/antd";
import { EditButton } from "@refinedev/antd";

const PostShow: React.FC = () => {
return (
<Show
headerButtons={({ defaultButtons, editButtonProps }) => (
<>
{defaultButtons}
<EditButton
hideText
size="small"
{...editButtonProps}
meta={{
source: "your source here",
}}
/>
</>
)}
>
<p>Rest of your page here</p>
</Show>
);
};
In this example, editButtonProps is used to utilize the default values of the EditButton component. You can replace "your source here" with your actual source. Please note that if canEdit is false, EditButton will not render and editButtonProps will be undefined. For more information, you can refer to the Show component documentation (https://refine.dev/docs/api-reference/antd/components/basic-views/show). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai10mo ago
<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below
generous-apricot
generous-apricot10mo ago
Uh that's neat, thanks!
xenial-black
xenial-black10mo ago
@bastianwegge Bot is right 🚀