Let's say we want to make a component similar to q-button-group.
As a Developer I need 2 components TButton and GroupRender so that I can style TButton independently and create groups just by putting those buttons inside the GroupRender.
Given Vue Template should result into Resulting HTML.
Vue Template
<div class="flex flex-col justify-center items-center min-h-screen space-y-8">
<div>
<TButton label="One" />
</div>
<div>
<GroupRender>
<TButton label="Two" />
<TButton label="Three" />
</GroupRender>
</div>
</div>
Resulting HTML
<div class="flex flex-col justify-center items-center min-h-screen space-y-8">
<div>
<button class="border rounded-lg px-4 py-2 hover:bg-gray-100">One</button>
</div>
<div>
<div class="border rounded-lg flex divide-x">
<div>
<button class="px-4 py-2 hover:bg-gray-100">Two</button>
</div>
<div>
<button class="px-4 py-2 hover:bg-gray-100">Three</button>
</div>
</div>
</div>
</div>
How to submit?
- Write in the comments "Challenge accepted".
- Fork stackblitz project and send a new link with your solution as a reply to your original comment.
Unit tests are good to have, but optional.
Share useful articles in the comments.
In a meantime I will start working on a tutorial and a solution. Don't miss it - subscribe to discussion and follow me.
Top comments (0)