Ionic Framework - The Cross-Platform App Development Leader (original) (raw)

The mobile SDK for the Web.

An open source mobile UI toolkit for building modern, high quality cross-platform mobile apps from a single code base in React.Vue.Angular.

Performant

Built to be fast by default—with hardware accelerated transitions, and touch-optimized gestures.

Cross-platform

Create stunning, flexible UIs for all major app platforms from a single shared codebase.

React, Angular, or Vue

Built-in support for JavaScript Frameworks, or use without any framework at all.

Light & Dark mode

Give your users light and dark theme choices so they can choose what’s most eye-friendly.

Learn the differences between hybrid and native apps. We break down all the myths and misconceptions.

Read the free eBook →

Cross-platform mobile UI

Modern UI paradigms. Ready for mobile.

• Slider

Supports keyboard and touch input, step interval, multiple thumb, and RTL direction

• Alert

Stock with two platform modes, fine-grained focus control, accessible to screen readers

• Chip

Can contain several different elements such as avatars, text, and icons

• Checkbox

Allow for the display and selection of multiple options from a set of options

• Toggle

Can be switched on or off by pressing or swiping and can also be checked programmatically

• Input

A wrapper to the HTML input element with custom styling and additional functionality

First-Class DX

Build and preview directly in your Web Browser.

`// action-sheet-example.component.ts

import { Component } from '@angular/core';

import { ActionSheetController } from '@ionic/angular';

@Component({

selector: 'action-sheet-example',

templateUrl: 'action-sheet-example.component.html',

styleUrls: ['./action-sheet-example.component.css'],

})

export class ActionSheetExample {

constructor(private actionSheetController: ActionSheetController) {}

async presentActionSheet() {

const actionSheet = await this.actionSheetController.create({

  header: 'Albums',

  cssClass: 'my-custom-class',

  buttons: [{

    text: 'Delete',

    role: 'destructive',

    icon: 'trash',

    id: 'delete-button',

    data: {

      type: 'delete'

    },

    handler: () => {

      console.log('Delete clicked');

    }

  }, {

    text: 'Share',

    icon: 'share',

    data: 10,

    handler: () => {

      console.log('Share clicked');

    }

  }, {

    text: 'Play (open modal)',

    icon: 'caret-forward-circle',

    data: 'Data value',

    handler: () => {

      console.log('Play clicked');

    }

  }, {

    text: 'Favorite',

    icon: 'heart',

    handler: () => {

      console.log('Favorite clicked');

    }

  }, {

    text: 'Cancel',

    icon: 'close',

    role: 'cancel',

    handler: () => {

      console.log('Cancel clicked');

    }

  }]

});

await actionSheet.present();

const { role, data } = await actionSheet.onDidDismiss();

console.log('onDidDismiss resolved with role and data', role, data);

}

}

<ion-button (click)="presentActionSheet()">Show Action Sheet

`

A powerful CLI

Create, build, test, and deploy your app with the Ionic CLI. You can even use your favorite JS framework’s CLI.

Enhanced editor tooling

The Ionic VS Code Extension can help follow best practices and perform common tasks from within your editor

On-Device Hot Refresh

Speed up your process by developing right on device and making use of Hot Refresh to see your changes applied instantly.

JS Agnostic

Use the JavaScript tech you prefer.

We don’t make assumptions about the JS Frameworks you prefer to build with. That’s why we engineered Ionic to integrate seamlessly with all best frontend frameworks, including Angular, React, Vue, or even no framework.

Get started:

• ionic/vue
• ionic/react
• ionic/angular

Performance obsessed

Build apps that are fast by default.

Ionic is built to perform fast on the all of the latest mobile devices. Build apps with a small footprint and built-in best practices like hardware accelerated transitions, touch-optimized gestures, pre-rendering, and more.

Start building →

Seemless native integration

Connect to native when you need it.

Access full native device functionality with JavaScript. Choose from a library of native device plugins for Camera, Maps, Geolocation, Bluetooth, and more. Dive into the full native SDKs at any time—there’s no limit.

Write once. Run anywhere.

Deploy your Ionic apps directly to iOS and Android app stores using the Capacitor bridge and cross-platform plugin APIs.

Custom plugin development

Creating custom native experiences is easy with a simple Plugin API for Swift on iOS, Java on Android, and JavaScript for the web.

Build & deploy in the cloud

Generate native builds, push live app updates, publish to the app stores, and automate the whole process with Ionic Appflow.

Infinitely Customizable

UIs that feel at home wherever they are deployed.

Start with pre-built iOS and Material Design themes that use Adaptive Styling to display correctly on the platforms they’re rendered on, or easily tailor the components and create custom UIs that match your brand.

Ready to dive in?

Here’s how to get started building apps with Ionic Framework