List of restaturant

Ionic Framework ionic-v3
1

I am trying to show restaurant list.with well structured manner.
Can you plz help me

2

my page is myfood

I want to show like

food
food.jpg720×1280 93.9 KB

3

Hello @81surajjadhav,
First of all please refer to this link for UI components’ details: Ionic Framework UI components Documentation.

I’d suggest you create a new app having sidemenu. Use this command for that purpose:

ionic start myApp sidemenu

Then for the top bar, you can customize it using ion-buttons in your navbar for icons like this:

<ion-buttons end>
  <ion-icon name="basket"></ion-icon>
  <ion-icon name="search"></ion-icon>
</ion-buttons>

And then in ion-content, you should ion-segment for Recommended and All Restaurants tabs/segments like this:

<ion-segment [(ngModel)]="restaurantList">
    <ion-segment-button value="recommend">RECOMMENDED</ion-segment-button>
    <ion-segment-button value="all">ALL RESTAURANTS</ion-segment-button>
  </ion-segment>

and then for each listing, you can have something like this:

<div [ngSwitch]="restaurantList">
  	<ion-list *ngSwitchCase="'recommend'">      
	    <button ion-item class="item item-block">
		  <ion-thumbnail item-start><img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/bf/KFC_logo.svg/1200px-KFC_logo.svg.png"></ion-thumbnail>
	      <span>KFC</span>
          <br>
          <span>North Indian, chinese</span>
          <span>$$$.min $$ . 60mins</span>
	    </button>
	  </ion-list>
      <ion-list *ngSwitchCase="'all'">      
	    <button ion-item class="item item-block">
		  <ion-thumbnail item-start><img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/bf/KFC_logo.svg/1200px-KFC_logo.svg.png"></ion-thumbnail>
	      <span>Royal Foods</span>
          <br>
          <span>North Indian, chinese</span>
          <span>$$$.min $$ . 60mins</span>
	    </button>
	  </ion-list>
    </div>

At last, you can use FABs for the button type thing you are showing in bottom right corner.
Add styling in your css as your requirement. Hope it’d help. Please let me know if you find any confusion and make sure to see that link for any other documentation related to UI components.
Cheers!!!

1 Like