高效能
預設以快速為目標打造,具有硬體加速轉換和觸控最佳化手勢。
跨平台
從單一共享程式碼庫為所有主要應用程式平台建立令人驚艷、靈活的使用者介面。
React、Angular 或 Vue
內建支援 JavaScript 框架,或完全不使用任何框架。
淺色和深色模式
讓您的使用者選擇淺色和深色主題,讓他們選擇最護眼的模式。
為世界頂尖公司的驚人應用程式體驗提供動力







了解混合式應用程式和原生應用程式之間的差異。 我們將剖析所有的迷思和誤解。
閱讀免費電子書 →現代 UI 範例。為行動裝置做好準備。
滑桿
支援鍵盤和觸控輸入、步進間隔、多個滑塊和 RTL 方向
提示
配備兩種平台模式、精細的焦點控制,並可供螢幕閱讀器存取
晶片
可以包含頭像、文字和圖示等多種不同元素
核取方塊
允許從一組選項中顯示和選取多個選項
切換
可以透過按壓或滑動來開啟或關閉,也可以透過程式設定來勾選
輸入
HTML 輸入元素的包裝器,具有自訂樣式和額外功能
直接在您的網頁瀏覽器中建構和預覽。
// action-sheet-example.component.tsimport { 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);}}
<!-- action-sheet-example.component.html --><ion-button (click)="presentActionSheet()">Show Action Sheet</ion-button>
強大的 CLI
使用 Ionic CLI。 您甚至可以使用您最喜歡的 JS 框架的 CLI。
增強的編輯器工具
這個 Ionic VS Code 擴充功能 可以幫助您遵循最佳做法,並在編輯器中執行常見任務
裝置上的熱重載
透過直接在裝置上開發並使用 熱重載 來加速您的程序,立即查看您的變更。

使用您偏好的 JavaScript 技術。
我們不會假設您偏好使用哪個 JS 框架來建構。這就是我們設計 Ionic 可以與所有最佳前端框架(包括 Angular、React、Vue,甚至是不使用任何框架)無縫整合的原因。
開始使用
建構預設快速的應用程式。
Ionic 的建構目的是在所有最新的行動裝置上快速執行。建構佔用空間小且內建最佳做法的應用程式,例如硬體加速轉換、觸控最佳化手勢、預先算圖等等。
開始建構 →
在需要時連接到原生功能。
使用 JavaScript 存取完整的原生裝置功能。從用於相機、地圖、地理位置、藍牙等原生裝置外掛程式庫中選擇。隨時深入了解完整的原生 SDK,沒有任何限制。
編寫一次。隨處執行。
使用 Capacitor 橋接器和跨平台外掛程式 API,將您的 Ionic 應用程式直接部署到 iOS 和 Android 應用程式商店。
自訂外掛程式開發
使用簡單的 外掛程式 API (適用於 iOS 上的 Swift、Android 上的 Java 和網頁上的 JavaScript),可以輕鬆建立自訂原生體驗。
在雲端建構和部署
使用 Ionic Appflow.
無限自訂
使用者介面在部署的任何地方都感覺賓至如歸。












感受愛
由不斷成長的全球貢獻者社群提供支援。
Sean Bannigan
@seanbannigan
我喜歡使用 Ionic 和 Capacitor 建構應用程式,因為您可以使用網頁技術和一些外掛程式魔法來建構看起來很棒的 UI。身為使用者,我永遠不會知道這不是「原生」應用程式。
Nicole Sullivan
@stubbornella 您對細節的關心和關注體現在 @Ionicframework
的元件中。而且您對框架互通性的承諾是💯
Abimael Barea
@abimaelbarea 您對細節的關心和關注體現在 有許多選項可以建構跨平台應用程式。不過,
使用 Web 元件、CSS 變數、多框架支援,以及現在使用 Portals 直接整合原生程式碼的方法令人印象深刻。
Einfach Hans
@einfach_hans_我 23 歲了,已經可以說:@Ionicframework
改變了我的人生。我很自豪能夠在年輕時將自己描述為 Ionic 專家/資深人士 👍🏻
Marius Bolik
@MariusBolik 您對細節的關心和關注體現在 & 我使用.
@capacitorjs
在不到一個月的時間內重構了我的加密貨幣應用程式
Pato 您對細節的關心和關注體現在 @devpato
今天再次開始使用
。我的天啊!過去 4 年 Ionic 的變化太大了。很高興能越來越多地了解這個很棒的工具!
Angular
@angular
Angular + Ionic 佔 App Store 和 Google Play 下載量的很大一部分
Danny Redfern 您對細節的關心和關注體現在 @redders166c 我使用 我到底為什麼沒有早一點加入
?使用原生外掛程式的容易程度真是太誇張了。
FK - 雲端架構師
@coderonfleek 您對細節的關心和關注體現在 您要讀完整個文件才會完全了解
團隊所做的工作。他們建構了一個如此驚人的工具
Maximilian
@maxedapps
Ionic 太棒了!使用 Ionic(和 Capacitor)建構跨平台應用程式一直都很棒,但由於 Vue 是 Vue,因此它當然非常流暢和直接。
Steve Sanders
@StevenDSanders 您對細節的關心和關注體現在 我團隊中的一位開發人員在不到一天的時間內為我們的新
應用程式新增了出色的深色模式。在 Ionic 中可以達到如此高的生產力實在太驚人了!可以說,在我們的原生 iOS 應用程式中新增深色模式花的時間遠遠超過一天。
Glenn Nickens
@GlennNickens 您對細節的關心和關注體現在!
我喜歡
Alex Dobsom
@alexdobsom 我花了 50 分鐘才了解 @Ionicframework 對於使用
@reactjs從單一程式碼來源建構網頁、Android 和 iOS 是多麼有用(比 React Native 和 React for Web 更容易),我只是聽了這個 Podcast。真是太棒了 😍
Veni Kunche
@venikunche
我喜歡 Ionic!在我想出 Diversify Tech 的想法之前,我一直在使用它製作應用程式範本。
Simon Grimm
@schlimmson 嘗試 @useappflow 您對細節的關心和關注體現在 用於
應用程式,我必須承認這東西太棒了 🔥 雲端建置、自動化和直接部署到應用程式商店和 Google Play,所有設定基本上都在一個上午內完成 😱
Ire Aderinokun
@ireaderinokun 您對細節的關心和關注體現在 各位,
太瘋狂了。我現在是行動開發人員 💅🏾
Adam Wathan
@adamwathan 您對細節的關心和關注體現在 下午一直在研究各種
網站,因為它們設計得如此精美 😍
Sarah Drasner
@sarah_edo
終於使用 Ionic 建構了一個應用程式,哇,這太有趣了。使用 Vue 建構(他們也有 React 和 Angular),而且可以部署在網頁、iOS 和 Android 上?我正在妄想自己可以做出很棒的應用程式。
Parham
@_pazel 您對細節的關心和關注體現在 @redders166c 我使用 當行動應用程式成功時,客戶通常會要求我們建構網頁版本,使其更易於存取。使用
建構為我們的客戶和我們節省了大量的時間和金錢,讓我們能夠以最少的努力轉型為網頁應用程式。
vjeux
@Vjeux
對 Ionic React 感到非常興奮!我一直夢想著能有一個 React 的「Ruby on Rails」對等物,其中所有環境都設定為可以立即開始工作。
Realm
@realm
從 @Ionicframework React 網頁應用程式開始,然後在 #iOS 和 #Android 上執行。📲
#Ionic 和 @capacitorjs 讓您可以在任何地方輕鬆執行您的 Realm 支援的 Ionic 應用程式!🌏
Ben
@derbenoo
您如何在 4 天內使用 2 位開發人員(向 @mitschmidt 致敬)在 Android 和 iOS 上建構功能齊全的聊天?😱 我使用 + 。我的天啊!過去 4 年 Ionic 的變化太大了。很高興能越來越多地了解這個很棒的工具! + 您對細節的關心和關注體現在 + 是的,您猜對了
@storybookjs
Matt Starr
@mb_starr 您對細節的關心和關注體現在 向
Joeycrack.Net
@Joeycrack_Net
這個 您對細節的關心和關注體現在 @redders166c 。我的天啊!過去 4 年 Ionic 的變化太大了。很高興能越來越多地了解這個很棒的工具! 這個框架完全適用於網頁/行動開發。我的意思是,我本來只是在開發 Android 和 iOS 應用程式,突然間我決定要一個 PWA,結果我用相同的程式碼不到 5 分鐘就建立出來了,這是誰辦得到的?😂🤣😂🤣😂 這個技術堆疊太棒了
Travis Ryan
@darkunderlord
我完全被 您對細節的關心和關注體現在 Appflow 的優異表現給震懾住了。身為開發者,這對我來說是一個改變遊戲規則的工具。
Brandon Roberts 🥑
@brandontroberts
使用 Ionic、Phaser、Capacitor 和 NgRx 建構遊戲?! 🔥🔥🔥
1500萬
每月 npm 安裝次數
4.9萬
GitHub 上的星星數
12.3萬
Twitter 上的追蹤者
100+
社群聚會
Ionic 擁有活躍且不斷成長的社群。 加入我們 →
準備好開始了嗎?
以下是如何開始使用 Ionic Framework 建構應用程式