I am using Ionic 4 React and trying to make a simple chat application. When the user loads the chat page, I'd like to automatically start on the bottom of the page. What is the simplest way to do this?
Here is the code I have:
<IonPage>
{/* Header */}
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonButton onClick={() => {
setCurrentConversationId('')
setState('home');
}}
fill="clear" className="back-button" shape="round" size="default">
<IonIcon slot="icon-only" icon={arrowBack} />
</IonButton>
</IonButtons>
<IonTitle>Chat</IonTitle>
</IonToolbar>
</IonHeader>
{/* Content */}
<IonContent>
{Object.values(messages).map((el, idx) =>
printMessage(el, idx)
)}
</IonContent>
</IonPage>
You can use .scrollToBottom() when loading of content is done. It's a method of ion-content.
Related
I am creating a navigation menu and part of it is having a Login link and "Try for Free" button on the right part of the webpage. But what is puzzling me is how to get the button aligned to the right of the Login link. Currently it looks like this:
What am I doing wrong?
<Grid item xs={4}>
{/* <Toolbar disableGutters> */}
<Tabs className={classes.tabContainer}>
<Tab className={classes.tab} component={Link} to="/analyze" label="Login" />
</Tabs>
{/* <Typography className={classes.root}>
<Link href="#" onClick={menuOptions}>
Link
</Link>
</Typography> */}
<Button
variant="contained"
color="default"
size="medium"
// style={{ marginTop: '1.1em' }}
// style={{ maxWidth: '108px', minWidth: '108px' }}
onClick={() => {
// handleClickImportPGN();
}}
>
Try for Free
</Button>
{/* </Toolbar> */}
</Grid>;
One of the handiest ways is to use CSS Flexbox
<Grid item style={{ display: "flex" }}>
<Tabs>
<Tab component={Link} label="Login" />
</Tabs>
<Button
variant="contained"
color="default"
size="medium"
// style={{ marginTop: '1.1em' }}
// style={{ maxWidth: '108px', minWidth: '108px' }}
onClick={() => {
// handleClickImportPGN();
}}
>
Try for Free
</Button>
{/* </Toolbar> */}
</Grid>;
But if you want to make use more of Material UI, you could try to have a few more Grid within each of the children elements.
Simplified Working Example:
Link to ion-menu ionic docs.
I am using ionic-react and elements. menu items list is mapped inside an ionContent inside an IonMenu.
when menu items are clicked I am using menuController.toggle() to close the menu. Can someone help me to close the menu when the user clicks outside the menu?
<IonMenu contentId="main">
<IonContent>
<div className="menu-list-container">
<IonList lines="none" className="side-menu">
{!_.isEmpty(menuList) &&
menuList.map((item: any) => {
return (
<IonRouterLink routerLink={item.link}>
<div
className="menu-items"
onClick={() => {
setMenuActive(item);
menuController.toggle();
}}
>
<span className={item.menuIcon}></span>
{item.menuName}
</div>
</IonRouterLink>
);
})}
</IonList>
</div>
</IonContent>
</IonMenu>
I'm starting from scratch with the standard Ionic 5 Tabs Starter template and the large title block from the docs but above my title block I can the the blured content from below. Is this the correct behavior?
const Tab2: React.FC = () => {
return (
<IonPage>
<IonHeader translucent>
<IonToolbar>
<IonTitle>Settings</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Settings</IonTitle>
</IonToolbar>
<IonToolbar>
<IonSearchbar></IonSearchbar>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 3 page" />
</IonContent>
</IonPage>
);
};
after scrolling down the second header is correct:
Ok I found the reason for this issue. It was my fault to duplicate the content. If I add normal cards inside the content section the behavior is correct.
remove the addition header
<IonPage>
<IonHeader translucent>
<IonToolbar>
<IonTitle>Settings</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonToolbar>
<IonSearchbar></IonSearchbar>
</IonToolbar>
<ExploreContainer name="Tab 3 page" />
</IonContent>
</IonPage>
I am trying to use material ui component into react class based component material ui component demo everthing wrtten function based but we are written all project pages are class based very difficult to integrating material UI component
It is not difficult to integrate on class-based Components. yes, In Material UI doc all the things have integrated on functional-based Components with using Hooks. But you should have some Knowledge about hooks and state concepts then you can easily be integrated them.
for example:
export default function AlertDialog() {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open alert dialog
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location
data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Disagree
</Button>
<Button onClick={handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}
So, this Dialog Code has written in functional Based Components But we can easily integrated on class based component Like:
export default class AlertDialog extends React.Components{
constructor(){
super(props)
this.state={
open:false
}
}
handleClickOpen = () => {
this.setState({open:true})
};
handleClose = () => {
this.setState({open:false})
};
render(){
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open alert dialog
</Button>
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location
data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Disagree
</Button>
<Button onClick={this.handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
So, just we should have Knowledge about basic React Concept and you can do this.
these are my stencil and ionic version
"dependencies": {
"#ionic/core": "one"
},
"devDependencies": {
"#stencil/core": "1.0.0-beta.8"
}
I'm trying to use the <ion-menu> inside a <ion-split-pane> like in a ionic app, this is my code (this is the original repo of this code https://github.com/modemlooper/stencil-pwa-sidemenu ):
app-root.tsx
[...]
render() {
return (
<ion-app>
<ion-router useHash={false}>
<ion-route url="/" component="app-home" />
<ion-route url="/profile/:name" component="app-profile" />
</ion-router>
<ion-split-pane when="lg">
<ion-menu side="start">
<ion-header>
<ion-toolbar color="primary" />
</ion-header>
<ion-content forceOverscroll={false}>
<ion-list>
<ion-menu-toggle autoHide={false}>
<ion-item href="/">
<ion-icon slot="start" name="home" />
<ion-label>Home</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle autoHide={false}>
<ion-item href="/profile/piero">
<ion-icon slot="start" name="person" />
<ion-label>Profile</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav main />
</ion-split-pane>
</ion-app>
);
}
[...]
The problem is that <ion-nav main /> gives me this error:
And without "main" the split pane don't work properly
This is the expected behaviour
How is it possible to fix this? I don't get how to use properly the ion menu inside a split pane...
Thank you so much
I have the split-pane working in an app. There are a couple differences with your implementation:
ion-nav is wrapped in an ion-content element with an ID attribute
The ion-contents ID is referenced in ion-split-pane[contentId] and ion-menu[contentId]
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content">
...
</ion-menu>
<ion-content id="main-content">
<ion-nav />
</ion-content>
</ion-split-pane>