ionic react project

-
how to create page in react ionic project

create file add a name to that file add extension
example
Home.tsx
Home.css
..........
add routing to App.tsx 
 
          <Route exact path="/home">
            <Home />
          </Route>

add above one in  <IonRouterOutlet>

Comments

Post a Comment

Popular posts from this blog

push multiple data in array(select and disselect items in array)

-
 <ion-content> <h1 class="h1 margin">Following</h1> <ion-row>   <ion-col size="12" *ngFor="let data of followingdata" (click)="select(data)">     <div  class="newcssbg"  [ngStyle]="{'background-image': 'url(' + data.img +  ')'}">       <div class="overlay">       <p class="innertext">{{data.text}}       <ion-icon *ngIf="data.selected" style="color:#fff;float:right;" name="checkmark-circle-outline"></ion-icon>       </p>    </div>     </div>   </ion-col> </ion-row> </ion-content> <!-- [ngStyle]="data.selected  && {'border': '2px solid green'}" --> ts  select(data) {     // this.followingdataarray.push(data);     this.followingdata.map(e => {               if(e.id==data.id){  ...
Read more

how to active side menu in ionic3

-
import { Component, ViewChild } from '@angular/core' ; import { Nav, Platform, AlertController, MenuController, Icon } from 'ionic-angular' ; import { StatusBar } from '@ionic-native/status-bar' ; import { SplashScreen } from '@ionic-native/splash-screen' ; import { HomePage } from '../pages/home/home' ; import { WelcomePage } from '../pages/welcome/welcome' ; import { Storage } from '@ionic/storage' ; import { NetworkInterface } from '@ionic-native/network-interface' ; import { Network } from '@ionic-native/network' ; import { ChangepasswordPage } from '../pages/changepassword/changepassword' ; @ Component ({ templateUrl: 'app.html' }) export class MyApp { @ ViewChild (Nav) nav : Nav ; rootPage : any ; pages : Array <{title : string ,icon : string , component : any }>; closelogin : boolean ; user : string ; username :...
Read more

how to add accordian to ionic project

-
<ion-list>     <div class="input1001" *ngFor="let d of diseases; let i=index" text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}">     <ion-row style="border-radius: 5px;padding-top: 2px;box-shadow:2px 2px 2px 2px #e6e6e6">       <ion-col size="11" style="    padding-left: 5px; font-size:12px       ">         {{d.title}}       </ion-col>       <ion-col size="1" style="text-align: right;padding-right: 10px;">         <ion-icon name="chevron-down-outline" *ngIf="!isGroupShown(i)"></ion-icon>         <ion-icon  name="chevron-up-outline" *ngIf="isGroupShown(i)"></ion-icon>       </ion-col>     </ion-row>     <div style="height:1px;box-shadow: 1px 1px 1px 1px #F0F0F0 ">     </div>   ...
Read more