Currently, I am utilizing the Ionic 5 CSS library in combination with React.
I found that IonTabButtons have a more appealing style compared to IonButtons because IonTabButton allows for text below the Icon. In the screenshot provided, all icons are displayed as tab-buttons except for Home, which is styled as an IonButton.
While I appreciate the appearance of IonTabButton, I encountered an issue where it does not execute the onclick function (no output on the console).
My query pertains to whether it would be easier, better, or even possible to:
- Add onClick functionality to iontab, or
- Transform IonButton to resemble IonTabButton's layout with both icon and text positioned inside the button.
If the preferred option is b), do you happen to know where one can locate the default CSS properties of IonButton and IonTabButton to identify their differences and potentially make them appear similar more easily?
https://i.sstatic.net/P4F2p.png
import React from 'react'
import { useHistory } from 'react-router-dom'
import './Welcome.css'
// ionic lib imports
import {
IonButton,
IonCol,
IonContent,
IonGrid,
IonIcon,
IonLabel,
IonPage,
IonRow,
IonTabButton
} from '@ionic/react'
// ionic icon imports
import {
cog,
help,
home,
power,
walk
} from 'ionicons/icons'
const Welcome = (props) => {
let history = useHistory()
const handleHomeClick = () => {
console.log('clicked')
history.push('./Running')
}
return(
<IonPage>
<IonContent>
<IonGrid>
<IonRow>
<IonCol size='6'>
<IonButton
fill='clear'
onClick={handleHomeClick}
>
<IonIcon icon={home} />
Home
</IonButton>
</IonCol>
<IonCol size='6'>
<IonTabButton
fill='clear'
onClick={handleHomeClick}
>
<IonIcon icon={walk}></IonIcon>
<IonLabel> Jog </IonLabel>
</IonTabButton>
</IonCol>
</IonRow>
<IonRow>
<IonCol size='6'>
<IonTabButton
fill='clear'
onClick={handleHomeClick}
>
<IonIcon icon={cog}></IonIcon>
<IonLabel> Settings </IonLabel>
</IonTabButton>
</IonCol>
<IonCol size='6'>
<IonTabButton
fill='clear'
onClick={handleHomeClick}
>
<IonIcon icon={help}></IonIcon>
<IonLabel> Help </IonLabel>
</IonTabButton>
</IonCol>
</IonRow>
<IonRow>
<IonCol size='6'>
<IonTabButton
fill='clear'
onClick={handleHomeClick}
>
<IonIcon icon={power}></IonIcon>
<IonLabel> Power </IonLabel>
</IonTabButton>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
)
}
export default Welcome
/* CSS Rules For Welcome.js */
ion-icon {
font-size: 128px;
color: white;
}
ion-grid {
padding-top: 120px;
}
ion-col {
justify-content: center;
}
ion-row {
margin: 15px;
}
ion-button {
height: 128px;
width: 128px;
line-height: 10px;
}
ion-label {
font-size: 24px;
}