Home / Blog / How to create a Locations list screen

How to create a Locations list screen

30 Oct 2024 · 8 min read

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 Locations List Screen serves as a fundamental element in user interface design, offering users a comprehensive overview of available locations within an application. It plays a crucial role in providing users with easy access to pertinent information about various destinations, facilitating efficient navigation and decision-making. By presenting a well-organized and visually appealing layout, the Locations List Screen enhances the user experience, enabling users to quickly find and explore desired locations.

This article provides a detailed guide, empowering designers and developers to seamlessly integrate a user-centric Locations List Screen into their applications. Leveraging design components from the Ionic Kit, built upon the robust foundation of the extensive Ionic framework library, ensures effortless integration and consistency in design, ultimately enhancing the overall usability of the application.

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 calendar-screen blank --type=react

3. Get inside the project directory

cd location-screen

4. Create a Location page

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

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

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

export default Location;

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>.

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

6. Add the Buttons component to the toolbar

Inside the IonToolbar component, add the IonButtons component and set the slot to start. This positions the button at the beginning of the toolbar.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
    </IonButtons>
  </IonToolbar>
</IonHeader>

7. Within the IonButtons add the IonButton component

<IonButtons slot='start'>
  <IonButton>
  </IonButton>
</IonButtons>

8. Add icons inside the Buttons component

Inside the IonButton component, place the IonIcon component with the properties slot='icon-only' and icon={options} to define that this component should be used as an icon in an option that has no text, using the icon from Ionic icons.

<IonButton>
  <IonIcon slot='icon-only' icon={options}></IonIcon>
</IonButton>

9. Add title to the page

Next, after the IonButtons component, place the IonTitle with the text 'Recycling points' to add a title for this page.

<IonHeader>
  <IonToolbar>
    ...
    <IonTitle>Recycling points</IonTitle>
  </IonToolbar>
</IonHeader>

10. Add a button at the end of the toolbar

Next, after the IonTitle component, include another IonButtons component and set the slot to end. This positions the button at the end of the toolbar.

<IonToolbar>
  ...
  <IonButtons slot='end'>
  </IonButtons>
</IonToolbar>

11. Add Auto-hide menu feature

Within the IonButtons component, incorporate the IonMenuButton component and set the autoHide property to {false}, ensuring the menu button remains visible even when the corresponding menu is inactive.

<IonButtons slot='end'>
  <IonMenuButton autoHide={false}></IonMenuButton>
</IonButtons>

12. Add another IonToolbar component after the IonButtons

<IonHeader>
  <IonToolbar>
    ...
  </IonToolbar>
  <IonToolbar>
  </IonToolbar>
</IonHeader>

13. Add the Search bar component

Inside the IonToolbar component, add the IonSearchbar component to enable searching through a collection.

<IonToolbar>
  <IonSearchbar></IonSearchbar>
</IonToolbar>

14. Add Content component following the header

Following the IonHeader component, add the IonContent component and apply the ion-padding class to style the content within.

<IonHeader>
  ...
</IonHeader>
<IonContent className='ion-padding'>
</IonContent>

15. Add the Segment with the list property

Inside the IonContent component, add the IonSegment component to display a group of related buttons. Set the value property to list on the segment to match the value of a button and select that button.

<IonContent className='ion-padding'>
  <IonSegment value='list'>
  </IonSegment>
</IonContent>

16. Add the List component

Add the IonList component to organize the items inside. Set the property lines as none and apply the ion-margin-bottom class to style the content.

<IonContent className='ion-padding'>
  ...
  <IonList lines='none' className='ion-margin-bottom'>
  </IonList>
</IonContent>

17. Add the header for the list

Inside the IonList component, add the IonListHeader component with the class ion-no-padding to describe the contents of the list. Within the IonListHeader, include an h4 tag with the text 'Containers «Gips-eco»'.

<IonList lines='none' className='ion-margin-bottom'>
  <IonListHeader className='ion-no-padding'>
    <h4>Containers «Gips-eco»</h4>
  </IonListHeader>
</IonList>

18. Create an item in the list

Add the IonItem component with the class ion-no-padding to style the content inside.

<IonList lines='none' className='ion-margin-bottom'>
  ...
  <IonItem className='ion-no-padding'>
  </IonItem>
</IonList>

19. Add the icon to the item

Inside the IonItem add the IonIcon component with the properties slot='start' and icon={timeOutline} to style the icon of the item.

<IonItem className='ion-no-padding'>
  <IonIcon slot='start' icon={timeOutline}></IonIcon>
</IonItem>

20. Create the 'Always open' label

Add the IonLabel component, with the text 'Always open' inside.

<IonItem className='ion-no-padding'>
  ...
  <IonLabel>Always open</IonLabel>
</IonItem>

21. Create another item

Add another IonItem component with the class ion-no-padding.

<IonList lines='none' className='ion-margin-bottom'>
  ...
  <IonItem className='ion-no-padding'>
  </IonItem>
</IonList>

22. Add the icon to the new item

Inside the IonItem add the IonIcon component with the properties slot='start' and icon={locationOutline} to style the icon of the item.

<IonItem className='ion-no-padding'>
  <IonIcon slot='start' icon={locationOutline}></IonIcon>
</IonItem>

23. Create the 'Senatorska 16 (1,5 km)' label

Add the IonLabel component, with the text 'Senatorska 16 (1,5 km)' inside.

<IonItem className='ion-no-padding'>
  ...
  <IonLabel>Senatorska 16 (1,5 km)</IonLabel>
</IonItem>

Inside the IonLabel add the IonRouterLink component with the text 'Show route'.

<IonItem className='ion-no-padding'>
  ...
  <IonLabel>Senatorska 16 (1,5 km) <IonRouterLink>Show route</IonRouterLink></IonLabel>
</IonItem>

25. After the item add the Chip component with the text 'Paper'

After the IonItem add the IonChip component with the property color=’primary’ to style the component and set the text 'Paper' inside.

<IonList lines='none' className='ion-margin-bottom'>
  ...
  <IonChip color='primary'>Paper</IonChip>
</IonList>

26. Add another Chip component with the 'Plastic' text

Repeat the previous step to add another IonChip component and set the text to 'Plastic'.

27. Add another Chip component with the 'Glass' text

Then, repeat step 25 to add another IonChip component and set the text to 'Glass'.

28. Add another Chip component with the 'Tetra pack' text

Repeat step 25 to add another IonChip component and set the text to 'Tetra pack'.

29. Add another List component

Next, repeat step 16 to add another IonList component.

<IonContent className='ion-padding'>
  ...
  <IonList lines='none' className='ion-margin-bottom'>
  </IonList>
</IonContent>

30. Repeat step 17 and set the text 'Containers «Greens»' inside the h4 tag

<IonList lines='none' className='ion-margin-bottom'>
  <IonListHeader className='ion-no-padding'>
    <h4>Containers «Greens»</h4>
  </IonListHeader>
</IonList>

31. Repeat step 18 to add the IonItem component inside the IonList

<IonList lines='none' className='ion-margin-bottom'>
  ...
  <IonItem className='ion-no-padding'>
  </IonItem>
</IonList>

32. Repeat step 19 to add the IonIcon component inside the IonItem

<IonItem className='ion-no-padding'>
  <IonIcon slot='start' icon={timeOutline}></IonIcon>
</IonItem>

33. Repeat step 20 and set the text 'Open 9.00 - 20.00, Sunday close' inside the IonLabel

<IonItem className='ion-no-padding'>
  ...
  <IonLabel>Open 9.00 - 20.00, Sunday close</IonLabel>
</IonItem>

34. Repeat step 21 to add another IonItem component

<IonList lines='none' className='ion-margin-bottom'>
  ...
  <IonItem className='ion-no-padding'>
  </IonItem>
</IonList>

35. Repeat step 22 to add the IonIcon component inside the IonItem

<IonItem className='ion-no-padding'>
  <IonIcon slot='start' icon={locationOutline}></IonIcon>
</IonItem>

36. Repeat step 23 and set the text 'Zielna 7 (0,9 km)' inside the IonLabel

<IonItem className='ion-no-padding'>
  ...
  <IonLabel>Zielna 7 (0,9 km)</IonLabel>
</IonItem>

<IonItem className='ion-no-padding'>
  ...
  <IonLabel>Zielna 7 (0,9 km) <IonRouterLink>Show route</IonRouterLink></IonLabel>
</IonItem>

38. Repeat step 25 to add the IonChip with the text 'Paper'

<IonList lines='none' className='ion-margin-bottom'>
  ...
  <IonChip color='primary'>Paper</IonChip>
</IonList>

39. Repeat step 25 to add the IonChip with the text 'Glass'

40. Next, repeat step 16 to add another IonList component

<IonContent className='ion-padding'>
  ...
  <IonList lines='none' className='ion-margin-bottom'>
  </IonList>
</IonContent>

41. Repeat step 17 and set the text 'Containers «WarsawCity»' inside the h4 tag

<IonList lines='none' className='ion-margin-bottom'>
  <IonListHeader className='ion-no-padding'>
    <h4>Containers «WarsawCity»</h4>
  </IonListHeader>
</IonList>

42. Repeat step 18 to add the IonItem component inside the IonList

<IonList lines='none' className='ion-margin-bottom'>
  ...
  <IonItem className='ion-no-padding'>
  </IonItem>
</IonList>

43. Repeat step 19 to add the IonIcon component inside the IonItem

<IonItem className='ion-no-padding'>
  <IonIcon slot='start' icon={timeOutline}></IonIcon>
</IonItem>

44. Repeat step 20 and set the text 'Always open' inside the IonLabel

<IonItem className='ion-no-padding'>
  ...
  <IonLabel>Always open</IonLabel>
</IonItem>

45. Repeat step 21 to add another IonItem component

<IonList lines='none' className='ion-margin-bottom'>
  ...
  <IonItem className='ion-no-padding'>
  </IonItem>
</IonList>

46. Repeat step 22 to add the IonIcon component inside the IonItem

<IonItem className='ion-no-padding'>
  <IonIcon slot='start' icon={locationOutline}></IonIcon>
</IonItem>

47. Repeat step 23 and set the text 'Jezuicka 11 (2,4 km)' inside the IonLabel

<IonItem className='ion-no-padding'>
  ...
  <IonLabel>Jezuicka 11 (2,4 km)</IonLabel>
</IonItem>

<IonItem className='ion-no-padding'>
  ...
  <IonLabel>Jezuicka 11 (2,4 km) <IonRouterLink>Show route</IonRouterLink></IonLabel>
</IonItem>

49. Repeat step 25 to add the IonChip with the text 'Plastic'

<IonList lines='none' className='ion-margin-bottom'>
  ...
  <IonChip color='primary'>Plastic</IonChip>
</IonList>

50. Repeat step 27 to add the IonChip with the text 'Glass'

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!

Looking for Ionic kit for you platform?
Ionic Sketch
Ionic Figma
Ionic XD
Made in New Zealand 🇳🇿 at  Sliday