Conditionally Link a Div in a Component

General
1

In my Card component, I have a link property so that the entire card is hyperlinked.

But in some cases, I don’t want the card to be linked.

Even if I don’t set a link on the instance of a component, it still renders as an <a> and not a <div>

Can I do something to get around this?

image
image2318×1466 275 KB

2

Hi @grantambrose,

Here is one way you can you do it:

  1. Create a new component property of type “Visibility”. Set it to Hidden by default.
  2. Remove the link from “card” div.
  3. Create a new child div, call it “link”
  4. Link the link property of the newly created div with the component’s link property.
  5. Link the visibility property of the newly created div wit the components visibility property.
  6. Set the position of the newly created div to absolute, top 0, and right 0.
  7. Set the width and height of the new created div to 100%.
  8. Set the position of the “card” div to relative.

Now for Card components that have a link, set their visibility to Visible and set the corresponding link.

Below are a few screenshots. Hope this helps!

image
image292×501 7.02 KB

image
image
image2490×612 48.2 KB

image

2 Likes
3

thank you for that detailed reply.

I think adding an element with positioning and a visibility toggle might be how I end up doing it.

That is, if there isn’t an easier way using the Cwicly UI