This guide will help you integrate Flexmonster with the Ionic framework, which allows creating cross-platform mobile applications.
Follow the steps below to run a sample application demonstrating Flexmonster integration with Ionic and React or Ionic and Angular.
Step 1. To get our sample project, download it as ZIP or clone it with the following commands:
git clone https://github.com/flexmonster/pivot-ionic-react
cd pivot-ionic-react
git clone https://github.com/flexmonster/pivot-ionic
cd pivot-ionic
Step 2. Install the npm dependencies described in the package.json file with the following command:
npm install
Step 3. Run the sample application with the following command:
npm run start
The application can be shut down manually with Ctrl + C (Control + C on macOS).
The steps to embed Flexmonster into an application vary depending on the type of Ionic application.
Flexmonster can be integrated into an Ionic React application in the same way it is integrated into a React and Typescript application. See integration with React + Typescript for details.
To create a new Ionic React application, refer to the Ionic documentation.
Flexmonster can be integrated into an Ionic Angular application in the same way it is integrated into an Angular application. See integration with Angular for details.
To create a new Ionic Angular application, refer to the Ionic documentation.
The usage of Flexmonster attributes depends on the type of Ionic application.
In an Ionic React application, the FlexmonsterReact.Pivot component’s usage is the same as it is in React. Learn more about this component and its props: The FlexmonsterReact.Pivot component.
In an Ionic Angular application, the <fm-pivot> directive’s usage is the same as in Angular. Learn more about this directive and its attributes: The <fm-pivot> directive.
You may be interested in the following articles:
