How to display settings without clicking on element? #227
Replies: 4 comments 4 replies
-
Interesting question. I think I would solve it like this:
If you ship your own Design System I would also argue to use |
Beta Was this translation helpful? Give feedback.
-
Probably @ankri solution is the most elegant, however in my case was a pain to implement such solution, since i should have to rewrite a lot of code, also im using custom function to render my components in the final product and this add even more complexity.
You can also improve this function tho change props only to components with a given name :
|
Beta Was this translation helpful? Give feedback.
-
I finally found some time to whip up an example. I would not recommend doing it like this though: In my example I override the color for Also I can only recommend doing it this way, when you do not use a DesignSystem like "material ui" or in my CodeSandbox "chakra". |
Beta Was this translation helpful? Give feedback.
-
Inspired by the answer of @nicosh I created a second example. I think this would be a more ideal solution when using Chakra UI. const { actions, nodes } = useEditor(
(state) => {
return { nodes: state.nodes };
}
); onChange={(event) => {
Object.values(nodes).forEach((node) => {
if (node.data.name === "Button") {
actions.setProp(node.id, (props) => {
props.colorScheme = event.target.value;
});
}
});
}} |
Beta Was this translation helpful? Give feedback.
-
I mean assume I want the user to be able to change the color of all buttons in my landing page to be red.
So far user need to click on a button and after that, he can change this button setting eg color
How can I achieve this? what do I need to change to show those settings without clicking on an element?
Beta Was this translation helpful? Give feedback.
All reactions