Hi! In Studio, how to add links to components or elements nested into components? I can add link elements (via tag select in right panel) but how do you access and override link targets in instances? For example, I have a basic card component - how do I set it as link in component level and edit its targets in instances?
Ok, we just have to wrap the instance into a link, like here explained: https://m.youtube.com/watch?v=IInfVYZKgWw
Was expecting a link that can be overwritten.
Additionally, in my case, wrapping instance adds underline to texts in card instances because of global link style - let’s see if I manage to get rid of these…
You could wrap each instance in a link, but if you want all instances of the component to be links, you may want to just have it be part of the component, which I believe is what you were originally asking for
When editing the component, you can insert a link or link container inside of it. If you already have all the content built out in the component, then you can either wrap it in a new vertical or horizontal stack and then change its tag type to be a link, or if the root element is already an HTML element you can change its tag to be a link
Let me know if that makes sense
If you want to expose it destination attributes on the component, right click the destination attribute and link it as a prop on the component
Great, the prop thing works. Need to learn more about props. Thanks!
Still struggling with text underlines. I’ve set underline to links in default styles panel. Then made mixin with decorate: none. Applied to text in card comp which is wrapped into link element, but nothing changes, altough the X icon is active in text styles’ decoration settings. Any way to override decoration? Or should I be more specific in defining default styles (not hover state instead of base?)?
Text decoration actually cannot be overridden in a way that removes it in a nested element, this is just how CSS works on the web unfortunately
Trying the embed CSS now (under settings on the left sidebar) - targeting a-element won’t work? A simple a-tagged link inside a simple p-tagged paragraph won’t work? I manage to target the paragraph, but not links inside. Any ideas?
Generally, for me as an UX/UI designer the layout, components and design system parts of Plasmic are really fantastic, but now I’m totaly stuck with such a basic things like adding links to elements and styling links…
OMG - hit the publish button, and the embedded CSS is there! Ahaa, I see, the Studio app can’t display some embedded bits…
Can you share the URL to the project? We generally don’t want there to be divergences between editing and codegen, so it could be a bug, but depends on what the CSS is
Also, can you elaborate more on what are the basic things that don’t work in Plasmic? You can’t select a link inside a paragraph to style it?
Restored the situation in Studio when I tried and failed to target link elements inside my card component. Probably my missing css-skills causing the problem
On the live site (https://silversikk.ee/) there is underline applied to links in paragraphs - in Studio editing mode those were not visible, in the preview mode underlines are visible as they should be.