How to create a Community poll screen

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Community Poll Screen is a popular feature in social, feedback, and engagement-driven apps, allowing users to create polls or cast votes on specific topics. A well-designed poll interface includes radio buttons for single-choice questions, a submit button, live vote results, and statistics.

This guide will walk you through the steps to design and implement a Community Poll Screen using the Ionic Design Kit. By leveraging its flexible UI components and the Ionic Framework, you can create a clean, interactive, and easy-to-use polling experience that boosts participation and community engagement.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start poll blank --type=react

3. Get inside the project directory

cd poll

4. Create a Poll page

Create page Poll.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const Poll: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default Poll;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Select the layout structure

For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.

<IonPage>
  <IonHeader>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

6. Set up component state

The useState hook is used to store the currently selected option of the poll. The variable selected holds the value, and setSelected updates it. The generic type <string> ensures that the state is always a string.

const [selected, setSelected] = useState<string>("yes");

IonPage is the root container of the page. Inside it, IonHeader holds the IonToolbar which contains navigation elements. IonButtons with slot="start" places buttons on the left side. IonBackButton provides navigation back with attributes like defaultHref for fallback, text to hide the label, and icon to show an arrow. IonTitle sets the page title.

<IonHeader>
    <IonToolbar>
        <IonButtons slot="start" className="ion-padding-start">
            <IonBackButton defaultHref="/" text="" icon={arrowBack} />
        </IonButtons>
        <IonTitle>Vote on initiative</IonTitle>
    </IonToolbar>
</IonHeader>

This concludes our work with IonHeader, and the following sections will cover working with IonContent.

8. Display question and voter info

IonContent wraps the main scrollable area. A question is displayed with a heading using <h2> and horizontal padding via the utility class. An IonItem with lines="full" displays supporting info. IonIcon with slot="start" places an icon on the left. IonLabel displays the number of voters. IonNote with slot="end" adds extra text aligned to the right.

<IonContent>
    <h2 className="ion-padding-horizontal">
        Should the parking zone be expanded for residents?
    </h2>
    <IonItem lines="full" className="ion-margin-top ion-margin-bottom">
        <IonIcon icon={peopleOutline} slot="start" />
        <IonLabel>239</IonLabel>
        <IonNote slot="end">People voted</IonNote>
    </IonItem>
</IonContent>

9. Write description section

The description section uses an <h3> for the subtitle and a <p> paragraph for text. Both elements use ion-padding-horizontal to add horizontal spacing. This explains the context of the poll in a readable layout.

<IonContent>
...
    <h3 className="ion-padding-horizontal">Description:</h3>
    <p className="ion-padding-horizontal">
        The proposal includes the creation of additional parking spaces within
        the complex to improve convenience for car owners. Expanding the
        parking area could significantly reduce the problem of finding a free
        spot and enhance overall resident comfort.
    </p>
</IonContent>

10. Configure voting options

The IonRadioGroup allows only one option to be selected at a time. The value attribute is bound to the current state, and onIonChange updates it when the user selects a different choice. Each IonItem represents a poll option and uses lines="full" for a separated look. Inside, IonRadio with slot="start" places the radio button on the left, IonLabel provides the option text, and IonNote with slot="end" shows the percentage of votes aligned to the right.

<IonContent>
    ...
    <h3 className="ion-padding-horizontal">Voting results:</h3>
    <IonRadioGroup value={selected} onIonChange={(e) => setSelected(e.detail.value)}>
        <IonItem lines="full">
            <IonRadio slot="start" value="yes" />
            <IonLabel>Yes, it should be expanded</IonLabel>
            <IonNote slot="end">60%</IonNote>
        </IonItem>
        <IonItem lines="full">
            <IonRadio slot="start" value="no" />
            <IonLabel>No, parking is sufficient</IonLabel>
            <IonNote slot="end">25%</IonNote>
        </IonItem>
        <IonItem lines="full">
            <IonRadio slot="start" value="unsure" />
            <IonLabel>Not sure</IonLabel>
            <IonNote slot="end">15%</IonNote>
        </IonItem>
    </IonRadioGroup>
</IonContent>

IonFooter defines the footer bar with padding. Inside, IonButton uses expand="block" to stretch across the full width of the screen. It provides an action button for navigation back.

<IonContent>
    ...
</IonContent>
<IonFooter className="ion-padding">
    <IonButton expand="block">Go back</IonButton>
</IonFooter>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!