How to create a Filters 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 Filters Screen is a key component of user interface design, serving as a central hub for refining and customizing content within an application. It plays a pivotal role in providing users with the ability to narrow down search results or tailor displayed information according to their preferences. By presenting an intuitive and visually engaging interface, the Filters Screen enhances user control and facilitates a more personalized experience.

This comprehensive guide empowers designers and developers to seamlessly integrate a user-centric Filters Screen into their applications. Leveraging design components from the Ionic Kit, built upon the solid foundation of the extensive Ionic framework library, ensures effortless integration and consistency in design, ultimately enhancing the overall usability and satisfaction 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 filters-screen blank --type=react

3. Get inside the project directory

cd filters-screen

4. Create page Filters.tsx inside src/pages and add code

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

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

export default Filters;

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. Add the header

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

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

6. Add page title

Inside the IonToolbar component, add the IonTitle with the text 'Filters' to add a title for this page.

<IonToolbar>
  <IonTitle>Filters</IonTitle>
</IonToolbar>

7. Add the IonButtons

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

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

8. Add the IonButton

Within the IonButtons add the IonButton component.

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

9. Place IonIcon inside IonButton

Inside the IonButton component, place the IonIcon component with the properties slot='icon-only' and icon={close} 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={close}></IonIcon>
</IonButton>

10. Style IonContent

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

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

11. Add a line break

<IonContent className='ion-padding-vertical'>
  <br />
</IonContent>

12. Add IonAccordionGroup

Next, add the IonAccordionGroup as a container to organize items, with multiple accordion instances within.

<IonContent className='ion-padding-vertical'>
  ...
  <IonAccordionGroup></IonAccordionGroup>
</IonContent>

13. Create a collapsible section with IonAccordion

Inside the IonAccordionGroup component, place the IonAccordion component to create collapsible sections. Set the value property to item1 on IonAccordion to control which accordion is open within the IonAccordionGroup.

<IonAccordionGroup>
  <IonAccordion value='item1'>
    <IonItem slot='header' lines='full' className='no-padding'>
      <IonLabel>Price, $</IonLabel>
    </IonItem>
</IonAccordionGroup>

14. Use IonItem as the toggle for the accordion

Inside the IonAccordion component, place the IonItem component with properties slot='header' and lines='full'. This will enable us to use the IonItem as the toggle for expanding or collapsing the accordion, and to style the text within this component.

<IonAccordion value='item1'>
  <IonItem slot='header' lines='full'></IonItem>
</IonAccordion>

15. Add a label to the IonItem

Within the IonItem component, place the IonLabel component with the text 'Price, $'.

<IonItem slot='header' lines='full'>
  <IonLabel>Price, $</IonLabel>
</IonItem>

16. Add IonList inside the IonAccordion

Next after the IonItem component add the IonList component with property slot='content’. This will enable us to use the IonList as the part of the accordion that is revealed or hidden depending on the state of the accordion.

<IonAccordion value='item1'>
  ...
  <IonList slot='content'>
  </IonList>
</IonAccordion>

17. Add another IonAccordion for 'Category'

Repeat steps 13 to 16 to add another IonAccordion component with the content inside. Set the property value='item2' for this component and set the text 'Category' inside the IonLabel.

<IonAccordionGroup>
  ...
  <IonAccordion value='item2'>
    <IonItem slot='header' lines='full'>
      <IonLabel>Category</IonLabel>
    </IonItem>
    <IonList slot='content'>
    </IonList>
  </IonAccordion>
</IonAccordionGroup>

18. Add another IonAccordion for 'Delivery'

Repeat steps 13 to 16 to add another IonAccordion component with the content inside. Set the property value='item3' for this component and set the text 'Delivery' inside the IonLabel.

<IonAccordionGroup>
  ...
  <IonAccordion value='item3'>
    <IonItem slot='header' lines='full'>
      <IonLabel>Delivery</IonLabel>
    </IonItem>
    <IonList slot='content'>
    </IonList>
  </IonAccordion>
</IonAccordionGroup>

19. Add IonItem inside IonList

Inside the IonList component, add the IonItem component item with content in the accordion.

<IonList slot='content'>
  <IonItem></IonItem>
</IonList>

20. Add a label to the IonItem

Inside the IonItem add the IonLabel component with the text '1 day'.

<IonItem>
  <IonLabel>1 day</IonLabel>
</IonItem>

21. Add another IonItem with the label '2 days'

Repeat steps 19 and 20 to add another IonItem and set the text '2 days' inside the IonLabel.

<IonList slot='content'>
  ...
  <IonItem>
    <IonLabel>2 days</IonLabel>
  </IonItem>
</IonList>

22. Add another IonItem with the label 'up to 3 days'

Repeat steps 19 and 20 to add another IonItem and set the text 'up to 3 days' inside the IonLabel.

<IonList slot='content'>
  ...
  <IonItem>
    <IonLabel>up to 3 days</IonLabel>
  </IonItem>
</IonList>

23. Add another IonItem with the label 'up to 5 days'

Repeat steps 19 and 20 to add another IonItem and set the text 'up to 5 days' inside the IonLabel.

<IonList slot='content'>
  ...
  <IonItem>
    <IonLabel>up to 5 days</IonLabel>
  </IonItem>
</IonList>

24. Add another IonItem with the label 'Another' and remove the extra line

Repeat steps 19 and 20 to add another IonItem with property lines='none' to remove an extra line at the end of the list and set the text 'Another' inside the IonLabel.

<IonList slot='content'>
  ...
  <IonItem lines='none'>
    <IonLabel>Another</IonLabel>
  </IonItem>
</IonList>

25. Add another IonAccordion for 'Size'

Next, repeat steps 13 to 16 to add another IonAccordion component with the content inside. Set the property value='item4' for this component and set the text 'Size' inside the IonLabel.

<IonAccordionGroup>
  ...
  <IonAccordion value='item4'>
    <IonItem slot='header' lines='full'>
      <IonLabel>Size</IonLabel>
    </IonItem>
    <IonList slot='content'>
    </IonList>
  </IonAccordion>
</IonAccordionGroup>

26. Add another IonAccordion for 'Brand'

Repeat steps 13 to 16 to add another IonAccordion component with the content inside. Set the property value='item5' for this component and set the text 'Brand' inside the IonLabel.

<IonAccordionGroup>
  ...
  <IonAccordion value='item5'>
    <IonItem slot='header' lines='full'>
      <IonLabel>Brand</IonLabel>
    </IonItem>
    <IonList slot='content'>
    </IonList>
  </IonAccordion>
</IonAccordionGroup>

27. Add another IonAccordion for 'Style'

Repeat steps 13 to 16 to add another IonAccordion component with the content inside. Set the property value='item6' for this component and set the text 'Style' inside the IonLabel.

<IonAccordionGroup>
  ...
  <IonAccordion value='item6'>
    <IonItem slot='header' lines='full'>
      <IonLabel>Style</IonLabel>
    </IonItem>
    <IonList slot='content'>
    </IonList>
  </IonAccordion>
</IonAccordionGroup>

28. Add another IonAccordion for 'Color'

Repeat steps 13 to 16 to add another IonAccordion component with the content inside. Set the property value='item7' for this component and set the text 'Color' inside the IonLabel.

<IonAccordionGroup>
  ...
  <IonAccordion value='item7'>
    <IonItem slot='header' lines='full'>
      <IonLabel>Color</IonLabel>
    </IonItem>
    <IonList slot='content'>
    </IonList>
  </IonAccordion>
</IonAccordionGroup>

29. Add another IonAccordion for 'Type'

Repeat steps 13 to 16 to add another IonAccordion component with the content inside. Set the property value='item8' for this component and set the text 'Type' inside the IonLabel.

<IonAccordionGroup>
  ...
  <IonAccordion value='item8'>
    <IonItem slot='header' lines='full'>
      <IonLabel>Type</IonLabel>
    </IonItem>
    <IonList slot='content'>
    </IonList>
  </IonAccordion>
</IonAccordionGroup>

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!