title allows you to add a title inside the <Show> component. If you don't pass title props, it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Show post".
localhost:3000/posts/show/123
Live previews only work with the latest documentation.
import{Show}from"@refinedev/chakra-ui"; import{Heading}from"@chakra-ui/react"; constPostShow:React.FC=()=>{ return( <Showtitle={<Headingsize="lg">Custom Title</Heading>}> <p>Rest of your page here</p> </Show> ); };
The <Show> component reads the resource information from the route by default. If you want to use a custom resource for the <Show> component, you can use the resource prop.
localhost:3000/custom/123
Live previews only work with the latest documentation.
import{Show}from"@refinedev/chakra-ui"; constCustomPage:React.FC=()=>{ return( <Showresource="posts"recordItemId={123}> <p>Rest of your page here</p> </Show> ); };
canEdit allows you to add an edit button inside the <Show> component. If the resource has the canEdit property, Refine adds the edit button by default. If you want to customize this button you can use the editButtonProps property.
localhost:3000/posts/show/123
Live previews only work with the latest documentation.
canDelete allows you to add a delete button inside the <Show> component. If the resource has the canDelete property, Refine adds the delete button by default. If you want to customize this button you can use the deleteButtonProps property.
localhost:3000/posts/show/123
Live previews only work with the latest documentation.
To customize or disable the breadcrumb, you can use the breadcrumb property. By default it uses the Breadcrumb component from @refinedev/chakra-ui package.
localhost:3000/posts/show/123
Live previews only work with the latest documentation.
import{Show,Breadcrumb}from"@refinedev/chakra-ui"; import{Box}from"@chakra-ui/react"; constPostShow:React.FC=()=>{ return( <Show breadcrumb={ <BoxborderColor="blue"borderStyle="dashed"borderWidth="2px"> <Breadcrumb/> </Box> } > <p>Rest of your page here</p> </Show> ); };
You can customize the buttons at the header by using the headerButtons property. It accepts React.ReactNode or a render function ({ defaultButtons, editButtonProps, deleteButtonProps }) => React.ReactNode which you can use to keep the existing buttons and add your own.
localhost:3000/posts/show/123
Live previews only work with the latest documentation.
You can customize the buttons at the footer by using the footerButtons property. It accepts React.ReactNode or a render function ({ defaultButtons }) => React.ReactNode which you can use to keep the existing buttons and add your own.
localhost:3000/posts/show/123
Live previews only work with the latest documentation.