[フレーム]

Important Announcement: The Future of Ionic’s Commercial Products →

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.

Get started →
  • speedometer icon

    Performant

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

  • speedometer icon

    Cross-platform

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

  • [画像:speedometer icon]

    React, Angular, or Vue

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

  • [画像:speedometer icon]

    Light & Dark mode

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

Powering incredible app experiences at the world’s best companies

aflac logotarget logosouthwest logoh&r block logoibm logot-mobile logo

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'],
})
exportclassActionSheetExample{
constructor(private actionSheetController:ActionSheetController){}
asyncpresentActionSheet(){
const actionSheet =awaitthis.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);
}
}
<!-- action-sheet-example.component.html -->
<ion-button(click)="presentActionSheet()">Show Action Sheet</ion-button>
  • icon

    A powerful CLI

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

  • icon

    Enhanced editor tooling

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

  • icon

    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:

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 →
window buttons icon
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.

  • native icon

    Write once. Run anywhere.

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

  • native icon

    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.

  • native icon

    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.

Feel the love

Powered by a growing global contributors community.

15M

Monthly npm installs

49k

Stars on GitHub

123k

Followers on Twitter

100+

Community meetups

Ionic has a vibrant, growing community. Join us →

AltStyle によって変換されたページ (->オリジナル) /