用於網頁的行動 SDK。

一個開源的行動 UI 工具包,用於使用單一程式碼庫,建構現代、高品質的跨平台行動應用程式,支援 React。Vue。Angular。

開始使用 →
  • speedometer icon

    高效能

    預設以快速為目標打造,具有硬體加速轉換和觸控最佳化手勢。

  • speedometer icon

    跨平台

    從單一共享程式碼庫為所有主要應用程式平台建立令人驚艷、靈活的使用者介面。

  • speedometer icon

    React、Angular 或 Vue

    內建支援 JavaScript 框架,或完全不使用任何框架。

  • speedometer icon

    淺色和深色模式

    讓您的使用者選擇淺色和深色主題,讓他們選擇最護眼的模式。

為世界頂尖公司的驚人應用程式體驗提供動力

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

了解混合式應用程式和原生應用程式之間的差異。 我們將剖析所有的迷思和誤解。

閱讀免費電子書 →
跨平台行動 UI

現代 UI 範例。為行動裝置做好準備。

  • 滑桿

    支援鍵盤和觸控輸入、步進間隔、多個滑塊和 RTL 方向

  • 提示

    配備兩種平台模式、精細的焦點控制,並可供螢幕閱讀器存取

  • 晶片

    可以包含頭像、文字和圖示等多種不同元素

  • 核取方塊

    允許從一組選項中顯示和選取多個選項

  • 切換

    可以透過按壓或滑動來開啟或關閉,也可以透過程式設定來勾選

  • 輸入

    HTML 輸入元素的包裝器,具有自訂樣式和額外功能

一流的開發體驗

直接在您的網頁瀏覽器中建構和預覽。

// 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);
}
}
<!-- action-sheet-example.component.html -->
<ion-button (click)="presentActionSheet()">Show Action Sheet</ion-button>
  • icon

    強大的 CLI

    使用 Ionic CLI。 您甚至可以使用您最喜歡的 JS 框架的 CLI。

  • icon

    增強的編輯器工具

    這個 Ionic VS Code 擴充功能 可以幫助您遵循最佳做法,並在編輯器中執行常見任務

  • icon

    裝置上的熱重載

    透過直接在裝置上開發並使用 熱重載 來加速您的程序,立即查看您的變更。

angular vue react cube
JS 不可知

使用您偏好的 JavaScript 技術。

我們不會假設您偏好使用哪個 JS 框架來建構。這就是我們設計 Ionic 可以與所有最佳前端框架(包括 Angular、React、Vue,甚至是不使用任何框架)無縫整合的原因。

開始使用

追求效能

建構預設快速的應用程式。

Ionic 的建構目的是在所有最新的行動裝置上快速執行。建構佔用空間小且內建最佳做法的應用程式,例如硬體加速轉換、觸控最佳化手勢、預先算圖等等。

開始建構 →
ionic performance metrics
window buttons icon
無縫原生整合

在需要時連接到原生功能。

使用 JavaScript 存取完整的原生裝置功能。從用於相機、地圖、地理位置、藍牙等原生裝置外掛程式庫中選擇。隨時深入了解完整的原生 SDK,沒有任何限制。

  • native icon

    編寫一次。隨處執行。

    使用 Capacitor 橋接器和跨平台外掛程式 API,將您的 Ionic 應用程式直接部署到 iOS 和 Android 應用程式商店。

  • native icon

    自訂外掛程式開發

    使用簡單的 外掛程式 API (適用於 iOS 上的 Swift、Android 上的 Java 和網頁上的 JavaScript),可以輕鬆建立自訂原生體驗。

  • native icon

    在雲端建構和部署

    使用 Ionic Appflow.

產生原生建置、推送即時應用程式更新、發佈到應用程式商店並自動化整個過程。

無限自訂

使用者介面在部署的任何地方都感覺賓至如歸。

Android front light theme
Android front dark theme
Android back light theme
Android back dark theme
iOS front light theme
iOS front dark theme
iOS back light theme
iOS back dark theme
Custom front light theme
Custom front dark theme
Custom back light theme
Custom back dark theme
自訂

感受愛

  • Sean Bannigan twitter profile image

    由不斷成長的全球貢獻者社群提供支援。

    Sean Bannigan

    @seanbannigan

  • Nicole Sullivan twitter profile image

    我喜歡使用 Ionic 和 Capacitor 建構應用程式,因為您可以使用網頁技術和一些外掛程式魔法來建構看起來很棒的 UI。身為使用者,我永遠不會知道這不是「原生」應用程式。

    Nicole Sullivan

    @stubbornella 您對細節的關心和關注體現在 @Ionicframework

  • Abimael Barea twitter profile image

    的元件中。而且您對框架互通性的承諾是💯

    Abimael Barea

    @abimaelbarea 您對細節的關心和關注體現在 有許多選項可以建構跨平台應用程式。不過,

  • Einfach Hans twitter profile image

    使用 Web 元件、CSS 變數、多框架支援,以及現在使用 Portals 直接整合原生程式碼的方法令人印象深刻。

    Einfach Hans

    @einfach_hans_我 23 歲了,已經可以說:@Ionicframework

  • Marius Bolik twitter profile image

    改變了我的人生。我很自豪能夠在年輕時將自己描述為 Ionic 專家/資深人士 👍🏻

    Marius Bolik

    @MariusBolik 您對細節的關心和關注體現在 & 我使用.

  • Pato twitter profile image

    @capacitorjs

    在不到一個月的時間內重構了我的加密貨幣應用程式

    Pato 您對細節的關心和關注體現在 @devpato

  • Angular twitter profile image

    今天再次開始使用 twitter verified checkmark

    。我的天啊!過去 4 年 Ionic 的變化太大了。很高興能越來越多地了解這個很棒的工具!

    Angular

  • Danny Redfern twitter profile image

    @angular

    Angular + Ionic 佔 App Store 和 Google Play 下載量的很大一部分

    Danny Redfern 您對細節的關心和關注體現在 @redders166c 我使用 我到底為什麼沒有早一點加入

  • FK - Cloud Architect twitter profile image

    ?使用原生外掛程式的容易程度真是太誇張了。

    FK - 雲端架構師

    @coderonfleek 您對細節的關心和關注體現在 您要讀完整個文件才會完全了解

  • Maximilian twitter profile image

    團隊所做的工作。他們建構了一個如此驚人的工具

    Maximilian

    @maxedapps

  • Steve Sanders twitter profile image

    Ionic 太棒了!使用 Ionic(和 Capacitor)建構跨平台應用程式一直都很棒,但由於 Vue 是 Vue,因此它當然非常流暢和直接。

    Steve Sanders

    @StevenDSanders 您對細節的關心和關注體現在 我團隊中的一位開發人員在不到一天的時間內為我們的新

  • Glenn Nickens twitter profile image

    應用程式新增了出色的深色模式。在 Ionic 中可以達到如此高的生產力實在太驚人了!可以說,在我們的原生 iOS 應用程式中新增深色模式花的時間遠遠超過一天。

    Glenn Nickens

    @GlennNickens 您對細節的關心和關注體現在!

  • Alex Dobsom twitter profile image

    我喜歡

    Alex Dobsom

    @alexdobsom 我花了 50 分鐘才了解 @Ionicframework 對於使用

  • Veni Kunche twitter profile image

    @reactjs從單一程式碼來源建構網頁、Android 和 iOS 是多麼有用(比 React Native 和 React for Web 更容易),我只是聽了這個 Podcast。真是太棒了 😍

    Veni Kunche

    @venikunche

  • Simon Grimm twitter profile image

    我喜歡 Ionic!在我想出 Diversify Tech 的想法之前,我一直在使用它製作應用程式範本。

    Simon Grimm

    @schlimmson 嘗試 @useappflow 您對細節的關心和關注體現在 用於

  • Ire Aderinokun twitter profile image

    應用程式,我必須承認這東西太棒了 🔥 雲端建置、自動化和直接部署到應用程式商店和 Google Play,所有設定基本上都在一個上午內完成 😱

    Ire Aderinokun

    @ireaderinokun 您對細節的關心和關注體現在 各位,

  • Adam Wathan twitter profile image

    太瘋狂了。我現在是行動開發人員 💅🏾

    Adam Wathan

    @adamwathan 您對細節的關心和關注體現在 下午一直在研究各種

  • Sarah Drasner twitter profile image

    網站,因為它們設計得如此精美 😍

    Sarah Drasner

    @sarah_edo

  • Parham twitter profile image

    終於使用 Ionic 建構了一個應用程式,哇,這太有趣了。使用 Vue 建構(他們也有 React 和 Angular),而且可以部署在網頁、iOS 和 Android 上?我正在妄想自己可以做出很棒的應用程式。

    Parham

    @_pazel 您對細節的關心和關注體現在 @redders166c 我使用 當行動應用程式成功時,客戶通常會要求我們建構網頁版本,使其更易於存取。使用

  • vjeux twitter profile image

    建構為我們的客戶和我們節省了大量的時間和金錢,讓我們能夠以最少的努力轉型為網頁應用程式。

    vjeux

    @Vjeux

  • Realm twitter profile image

    對 Ionic React 感到非常興奮!我一直夢想著能有一個 React 的「Ruby on Rails」對等物,其中所有環境都設定為可以立即開始工作。 twitter verified checkmark

    Realm

    @realm

    從 @Ionicframework React 網頁應用程式開始,然後在 #iOS 和 #Android 上執行。📲

  • Ben twitter profile image

    #Ionic 和 @capacitorjs 讓您可以在任何地方輕鬆執行您的 Realm 支援的 Ionic 應用程式!🌏

    Ben

    @derbenoo

    您如何在 4 天內使用 2 位開發人員(向 @mitschmidt 致敬)在 Android 和 iOS 上建構功能齊全的聊天?😱 我使用 + 。我的天啊!過去 4 年 Ionic 的變化太大了。很高興能越來越多地了解這個很棒的工具! + 您對細節的關心和關注體現在 + 是的,您猜對了

  • Matt Starr twitter profile image

    @storybookjs

    Matt Starr

    @mb_starr 您對細節的關心和關注體現在

  • Joeycrack.Net twitter profile image

    Joeycrack.Net

    @Joeycrack_Net

    這個 您對細節的關心和關注體現在 @redders166c 。我的天啊!過去 4 年 Ionic 的變化太大了。很高興能越來越多地了解這個很棒的工具! 這個框架完全適用於網頁/行動開發。我的意思是,我本來只是在開發 Android 和 iOS 應用程式,突然間我決定要一個 PWA,結果我用相同的程式碼不到 5 分鐘就建立出來了,這是誰辦得到的?😂🤣😂🤣😂 這個技術堆疊太棒了

  • Travis Ryan twitter profile image

    Travis Ryan

    @darkunderlord

    我完全被 您對細節的關心和關注體現在 Appflow 的優異表現給震懾住了。身為開發者,這對我來說是一個改變遊戲規則的工具。

  • Brandon Roberts 🥑 twitter profile image

    Brandon Roberts 🥑

    @brandontroberts

    使用 Ionic、Phaser、Capacitor 和 NgRx 建構遊戲?! 🔥🔥🔥

1500萬

每月 npm 安裝次數

4.9萬

GitHub 上的星星數

12.3萬

Twitter 上的追蹤者

100+

社群聚會

Ionic 擁有活躍且不斷成長的社群。 加入我們 →