Ionic react ui

Ionic Framework Ionic React
1

Hello and Happy new year Ionic community,

I am fairly new to the subject but I have taken a liking to learning Ionic react. I am struggling to get a couple of buttons that are in a Ionrow to the bottom of the screen. I’d much appreciate any help.

Thank you Kindly,
Ishan

Capture
Capture559×840 9.22 KB

2

You can wrap the buttons like:

<IonFooter>
  <IonToolbar>
    ...my buttons
  </IonToolbar>
</IonFooter>

More about ion-footer

1 Like
3

Thanks, mate. Appreciate it. This might come off as an unusual request. But I was wondering if I could have a chat with you about how CSS works in Ionic react? I am an android dev. I have been for past 10 years. But I am struggling to put UIs together on Ionic react. especially setting up components where I want on the screen. Guess I am use to drag and drop a lot :stuck_out_tongue:

4

There’s nothing special about how CSS works in Ionic React; CSS should work the same way it does in a web browser.

That said, you can do most layouts using the built-in Ionic components, especially IonGrid and IonHeader/IonContent/IonFooter.

Also note that many Ionic components have a slot attribute that you can set to start or end to align them.

1 Like
5 
import { IonAlert, IonButton, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonInput, IonItem, IonItemDivider, IonLabel, IonList, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';



import './LoginStyles.css';
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";


const Login: React.FC = () => {



  return (
    <IonPage>
      <IonHeader collapse="condense">
        <IonToolbar>
          <IonTitle>Login</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen className="ion-padding ion-text-center">
        <IonGrid>


          <IonRow>

          </IonRow>
          <IonItem>
            <IonLabel position="stacked" color="primary">Username</IonLabel>
            <IonInput name="username" type="text" spellCheck={false} autocapitalize="off">
            </IonInput>
          </IonItem>

          <IonItem>
            <IonLabel position="stacked" color="primary">Password</IonLabel>
            <IonInput name="password" type="password" >
            </IonInput>
          </IonItem>

          <IonRow>

            <IonButton type="submit">Login</IonButton>


          </IonRow>

         
        </IonGrid>
      </IonContent>
    </IonPage>
  );
};



This is what I am working with. I need to get here. I have worked out how the colors borders work except for alignment of components. 
![Capture2|332x500](upload://pdf1NgCO0MxC5AZHBaRETICvFOA.png)

How do I get to here? 

I appreciate your help mate. thanks
6

Capture2
Capture2471×709 12.1 KB

7

You probably don’t need a grid for this kind of layout, but if you are going to use a grid, you need to make sure that everything in <IonGrid> is in <IonRow> which is in <IonCol>. In your code, you have <IonItem> as a child of <IonGrid>, but that won’t work; start from the examples in the docs and make sure you structure your code the same way.

For a basic login form, a normal structure is something like:

<IonItem>
  <IonLabel position="stacked">Email</IonLabel>
  <IonInput type="email" value={value} inputmode="email" />
</IonItem>
<IonItem>
  <IonLabel position="stacked">Password</IonLabel>
  <IonInput type="password" value={value} />
</IonItem>
<IonButton type="submit" expand="block">Log in</IonButton>