shadcn.io is not affiliated with official shadcn/ui
Reader Poll Blog Block for Vue
A reader poll in a split: a RadioGroup of four choices and a Vote button at the start, result bars with percentages, vote counts and a total at the end, and a Change vote button that takes your vote back.
Installation
Overview
A reader poll for Vue with Ark UI, written for Pollen Weekly, a beekeeping newsletter. A start-aligned header sits over a split behind a divider. At the start is the question with four choices, a RadioGroup of cells on shared hairlines, and a Vote Shine Button. At the end are the results: the same four rows, empty until you vote, then a bar, a percentage and a vote count each, your vote counted in, and the total. Change vote takes your vote back, so a vote moves a count by one and back. On a phone the results sit under the question. The 612 earlier votes are example data, and your vote stays in the page. It is built from Guides, RadioGroup, Field, Progress, Button and a Shine Button. For newsletters, blogs and any page that asks its readers one question.
FAQ
Are the votes real?
No. The 612 votes before yours are example data, and the page says so under the results. Your vote is held in the page and is gone on reload. To make it real, send the choice in the vote handler and replace votes in OPTIONS with the counts your server returns.
How are the percentages worked out?
From the votes shown, with whole numbers that always add to 100: each share is rounded down and the leftover points go to the largest fractions (sharesOf). Add or change an option and every percentage, bar and the total follow, because nothing is typed in twice.
What does Change vote do?
It removes your vote, so the choice you made counts one less, the results empty again and the choices unlock. Focus returns to the first choice. Voting adds one to exactly one option, so you can vote, look, take it back and choose differently as often as you like.