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!