Open krismale opened 1 year ago
miracles1919
commented
1 year ago We want it to keep the text that was displayed before the user selected an option
I don't understand it, can you provider an example? Can using controlled mode solve your problem?
Is there a way to add another custom react element in between the tabs?
Currently the only way to custom render is by modifying the label of option, but we will add a new API later, such as
renderLabel (option: CascaderOption) => ReactNode
krismale
commented
1 year ago I don't understand it, can you provider an example?
So an example: In the first selection level, we set the placeholder text to be "Fruits" and the title of the level is set to be equal to the placeholder text. After the user selects something from the options, lets say the user selects "Apple", the placeholder text is replaced in the title of the level with "Apple". We want the title of the level to remain "Fruits" and not be set to the label of the selected option "Apple". Further on, "Apple" will be displayed as the title of the newly available level of options. The titles will then create a breadcrumb. Is that possible?
This structure will make it easier for the user to go back at a later time and know exactly what types of options are available under each level. The level with the title "Fruits" will contain the list of different fruits, while the level with the title of "Apple" will contain options that are only relevant for apples and not oranges for instance. We use this cascader component to modify and display filters which is stored in local storage so it is important that the user can easily navigate around in the cascader with selected options being persisted in the browser cache after not using it for a while.
Can using controlled mode solve your problem?
I am unfamiliar with controlled mode and are struggling a bit to find any reference to it on your docs. What is this?
Currently the only way to custom render is by modifying the label of option, but we will add a new API later, such as renderLabel (option: CascaderOption) => ReactNode
So the issue with modifying the actual label of the option is that it will also be displayed in the list of options for the level. But a renderLabel prop would be a great option for us!
Version of antd-mobile
5.27.0
Description
Hi!
We are using the cascader component to represent a tree structure like selection of options that a user can utilize to filter different items in a list. There are two different aspects of the tabs that we are struggling a bit with:
The tabs does (at least by default) change the text to be similar to the label of the option that has been selected. We want it to keep the text that was displayed before the user selected an option. Is there a way to do this in the current version that we are using of Ant Mobile?
Is there a way to add another custom react element in between the tabs? We want to display a > sign to show that the tab to the right is below the tab to the left in the hierarchy.