CODEWITHSUNDEEP
onclicksvelteflip
Diegus Aurelius
Diegus Aurelius

Reputation: 139

Pass data on:click Svelte

I'm building an app with flip cards with three buttons each. I need to show the text in the button clicked on the back of the card. How can I do this in Svelte?

<section class="front-side">
  <button aria-label="Pizza" on:click={flip}>PIZZA</button>
  <button aria-label="Donuts" on:click={flip}>DONUTS</button>
  <button aria-label="Hot Dogs" on:click={flip}>HOT DOGS</button>
</section>

<section class="back-side">
  Great! We like {data} too.
</section>

Upvotes: 0

Views: 1126

Answers (1)

JHeth
JHeth

Reputation: 8386

This can be solved in a number of ways but the easiest is CSS and the class directive. Whenever one of your options is clicked just toggle a flipped variable and bind it to a class of the same name on a div that wraps the front and back of the card.

If you want to inform the parent of the flip component about the option selected for each card you can dispatch the clicked card's data and handle it how you see fit.

Here's a simplified example in the REPL with CSS pretty much scraped from the W3 Schools tutorial on flip cards the only difference would be instead of hover being the trigger the flipped class has the transform inside it.

https://svelte.dev/repl/782718a4f2fe43e3b731822b54aaed78?version=3.38.3

Upvotes: 0

Related Questions