Looking for Ionic kit for you platform?
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 Weather Dashboard is an essential feature in weather apps, travel platforms, and smart home interfaces. It provides users with current weather conditions and multi-day forecasts, including temperature, humidity, wind speed, and precipitation. A well-designed dashboard presents this information in a visually intuitive format, using icons, charts, and clear typography to enhance readability and usability.
This guide will walk you through the steps to design and implement a Weather Dashboard using the Ionic Design Kit. By leveraging its design elements and the Ionic Framework, you can create a clean, responsive, and informative interface that delivers accurate weather updates in an engaging way.
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 weather blank --type=react
3. Get inside the project directory
cd weather
4. Create a Weather page
Create page Weather.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const Weather: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default Weather;
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. Define global styles with CSS variables
Add the following global styles to your src/theme/variables.css file. These variables set the background, text color, and toolbar color for your app. The --ion-background-color sets the default background for components like IonContent, while --ion-text-color defines the base text color as white. Additionally, ion-toolbar is styled with a custom background color using the --background variable, which affects elements like the footer toolbar.
:root {
--ion-background-color: #0163AA;
--ion-text-color: #FFF;
}
ion-toolbar {
--background: #0163AA;
}
6. Build the layout and header section
The IonPage is a wrapper for a full-screen page in Ionic. Inside it, IonContent holds the scrollable content and is centered using ion-text-center. Headings <h1>, <h2> and paragraphs <p> are used to display the current location and temperature. These tags behave like standard HTML elements within Ionic components.
<IonContent className="ion-text-center">
<h1>My Location</h1>
<p>Thailand</p>
<h2>37° | Sunny</h2>
</IonContent>
7. Add a five-column hourly weather grid
The weather-by-hour section uses IonGrid for layout. Inside it, IonRow wraps five IonCol elements. Each column uses size="2.4" to divide the row equally into five parts (since 2.4 × 5 = 12). Each column displays the time, a weather icon (IonIcon with the icon and color attributes), and the corresponding temperature. This structure ensures a responsive grid layout.
<IonContent className="ion-text-center">
<IonGrid>
<IonRow>
<IonCol size="2.4">
<p>5pm</p>
<IonIcon icon={sunny} color="warning" />
<p>36°</p>
</IonCol>
<IonCol size="2.4">
<p>6pm</p>
<IonIcon icon={sunny} color="warning" />
<p>35°</p>
</IonCol>
<IonCol size="2.4">
<p>7:02pm</p>
<IonIcon icon={partlySunny} />
<p>33°</p>
</IonCol>
<IonCol size="2.4">
<p>8pm</p>
<IonIcon icon={cloudy} />
<p>30°</p>
</IonCol>
<IonCol size="2.4">
<p>9pm</p>
<IonIcon icon={cloudyNight} />
<p>29°</p>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
8. Display a 10-day forecast in a list
This section uses IonList to display a forecast in vertical list form. The lines="none" attribute removes dividing lines between items, and ion-text-start aligns the content to the left. IonListHeader provides a title, while each IonItem represents a day’s forecast. Inside an item, IonIcon (with slot="start") shows a weather icon, and IonLabel holds the day name. A <p> with slot="end" displays temperature highs and lows, with a <span> used for spacing.
<IonContent className="ion-text-center">
...
<IonList lines="none" className="ion-text-start">
<IonListHeader>10-day forecast</IonListHeader>
<IonItem>
<IonIcon slot="start" icon={sunny} color="warning" />
<IonLabel>Today</IonLabel>
<p slot="end">
37°<span> 28°</span>
</p>
</IonItem>
<IonItem>
<IonIcon slot="start" icon={sunny} color="warning" />
<IonLabel>Monday</IonLabel>
<p slot="end">
39°<span> 32°</span>
</p>
</IonItem>
<IonItem>
<IonIcon slot="start" icon={rainy} />
<IonLabel>Tuesday</IonLabel>
<p slot="end">
36°<span> 27°</span>
</p>
</IonItem>
<IonItem>
<IonIcon slot="start" icon={partlySunny} />
<IonLabel>Wednesday</IonLabel>
<p slot="end">
32°<span> 26°</span>
</p>
</IonItem>
<IonItem>
<IonIcon slot="start" icon={sunny} color="warning" />
<IonLabel>Thursday</IonLabel>
<p slot="end">
41°<span> 31°</span>
</p>
</IonItem>
<IonItem>
<IonIcon slot="start" icon={rainy} />
<IonLabel>Friday</IonLabel>
<p slot="end">
34°<span> 29°</span>
</p>
</IonItem>
<IonItem>
<IonIcon slot="start" icon={thunderstorm} />
<IonLabel>Saturday</IonLabel>
<p slot="end">
31°<span> 24°</span>
</p>
</IonItem>
<IonItem>
<IonIcon slot="start" icon={thunderstorm} />
<IonLabel>Sunday</IonLabel>
<p slot="end">
35°<span> 29°</span>
</p>
</IonItem>
<IonItem>
<IonIcon slot="start" icon={rainy} />
<IonLabel>Monday</IonLabel>
<p slot="end">
34°<span> 28°</span>
</p>
</IonItem>
<IonItem>
<IonIcon slot="start" icon={sunny} color="warning" />
<IonLabel>Tuesday</IonLabel>
<p slot="end">
41°<span> 35°</span>
</p>
</IonItem>
</IonList>
</IonContent>
9. Add a bottom toolbar with icon buttons
At the bottom, IonFooter contains an IonToolbar, which holds two IonButton components. Both buttons have fill="clear" to remove the default background. The slot="start" and slot="end" positions the buttons on the left and right. Inside the buttons, IonIcon uses slot="icon-only" to display just the icon. The color="light" and size="large" attributes adjust the icon color and size for better visibility against the dark background.
<IonFooter>
<IonToolbar>
<IonButton fill="clear" slot="start">
<IonIcon
color="light"
size="large"
slot="icon-only"
icon={mapOutline}
/>
</IonButton>
<IonButton fill="clear" slot="end">
<IonIcon color="light" size="large" slot="icon-only" icon={list} />
</IonButton>
</IonToolbar>
</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!