Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all articles
Browse latest Browse all 49230

New to ionic. Need help

$
0
0

Hello every one I’m new to ionic. I’m using ionic with Reactjs.
But I got some problems.
I trying to set a menu with IonMenu but still getting a blank black page.
And again I would like to know if there is className to set the background-color without using style(like bg-primary to set the bg color to primary or something like that.) Thank you
here is my code:

import React,{ Component } from "react";
import { 
    IonPage,IonAvatar,
    IonContent,IonMenu,
    IonItem,IonList,IonIcon,
    IonHeader,IonToolbar,
    IonTitle
 } from "@ionic/react";
import { Redirect, Route } from 'react-router-dom';
import axios from "axios";
import API_URL from "../apicommon";

export default class Marketing extends Component{
    constructor(props){
        super(props)
        this.state={
            user:{
                full_name:'',
                role:'Directeur',
                email:'mhady.itman@cestrack.com'
            }
        }
    }

    componentDidMount(){
        console.log("mounted")
    }


    render(){
        return(
            
                <IonPage>
                    <IonContent>
                <IonMenu side="start" contentId="main-content">
                <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Start Menu</IonTitle>
        </IonToolbar>
      </IonHeader>

      <div id="main-content">
                        
                        {/*<div className="always-top">
                            <IonAvatar>
                                <img src="./avatar.jpg" />
                            </IonAvatar>
                            <div className="bg-primary">{this.state.user.full_name}</div>
                            <div className="bg-primary" >{this.state.user.role}</div>
                            <div className="bg-primary">{this.state.user.email}</div>
        </div>*/}
                        <IonList>
                            <IonItem>
                                 Profile
                            </IonItem>
                            <IonItem>
                                 Log out
                            </IonItem>
                        </IonList>
                        </div>
                    
                </IonMenu>
               
                </IonContent>
                </IonPage>
            
        );
    }
}

1 post - 1 participant

Read full topic


Viewing all articles
Browse latest Browse all 49230

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>