fascinating-indigo•2y ago

Show label change

Is there a way to change label on SHOW component ? I know there is a title option, but I specifically want to change label, so the breadcrumbs would change too

5 Replies

refine-support-bot•2y ago

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: Yes, you can change the label on the SHOW component by using the "title" property. SOURCES: ./docs/api-reference/mui/components/basic-views/show.md, ./docs/api-reference/antd/components/basic-views/show.md, ./docs/api-reference/chakra-ui/components/buttons/show.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.

ratty-blush•2y ago

Hey @_spongebobu, you can pass label property to options of your resources. This way, it will change the labels in CRUD components, breadcrumbs and the sider elements 🙏

fascinating-indigo•2y ago

Thank you for the answer, but I still haven't achieved what I wanted. I am able to change label of List , but I can't figure out how to pass label to Show. I wanna do that to change breadcrumb on Show page

ratty-blush•2y ago

Oh I see, so you want to change the action label "Show". You can use i18nProvider to achieve this. Check out the https://refine.dev/docs/api-reference/core/hooks/useBreadcrumb/#i18n-support section in docs for it, we look for actions.${action} (eg: actions.show) in translate function. If you don't have i18nProvider, or don't need a very detailed one, you can always create a basic one yourself, by providing a translate function and then mapping the keys to the values you like. Here's the docs for i18nProvider https://refine.dev/docs/api-reference/core/providers/i18n-provider/ Currently, we don't have a way to just customize the label, it can be a good addition to our feature set. If you like, you can create an issue on GitHub or even have a PR for it 🤔 If you have a custom/dynamic label needs for your case, you can do run swizzle command to export the breadcrumb component, its a simple one and uses the useBreadcrumb hook. It returns an array of items, the last one is the action. You can just override it for your usecase, and make it work with a prop or something. This way you can make it re-usable in your components. By passing breadcrumb prop to the CRUD components, you can override the default one or by passing it in <Refine /> component's options replaces the default breadcrumb globally. Check out the Breadcrumb docs for Ant Design here; https://refine.dev/docs/api-reference/antd/components/breadcrumb/ and also the useBreadcrumb docs here; https://refine.dev/docs/api-reference/core/hooks/useBreadcrumb/ Let me know if you need anything 🙏

fascinating-indigo•2y ago

Alright, Thank you very much, I will try one of these approaches. I will look into creating an issue on GitHub in a free time!