本指南用于在 Ionic Framework 与 Capacitor 中构建具有原生外观的移动应用。适用情形包括：使用 Ionic 组件、需要原生风格 UI、询问 Ionic 主题定制、需要移动端 UI 模式或平台差异化样式。
主要能力：Ionic 提供 100+ 移动优化 UI 组件、自动的 iOS/Android 平台样式、内置深色模式支持与开箱即用的无障碍特性，可用于 React、Vue、Angular 或原生 JS。
安装与初始化：React 下执行 bun create vite my-app --template react-ts、cd my-app、bun add @ionic/react @ionic/react-router；Vue 下使用 vue-ts 模板并安装 @ionic/vue 与 @ionic/vue-router；随后 bun add @capacitor/core @capacitor/cli 并运行 bunx cap init。React 入口需引入 core.css、normalize.css、structure.css、typography.css 及可选工具类样式，并调用 setupIonicReact()。
组件覆盖：页面结构（IonPage、IonHeader、IonToolbar、IonContent、IonBackButton）；列表（IonList、IonItem、IonItemSliding）；表单（IonInput、IonTextarea、IonSelect、IonToggle、IonCheckbox、IonRadioGroup）；按钮（fill、color、size、expand 等变体）；卡片；模态与底部抽屉（IonModal 的 breakpoints、initialBreakpoint）；导航（IonTabs 标签导航、IonReactRouter 堆栈导航）。
主题定制：通过 :root 中的 --ion-color-* 变量定义主色、次色及自定义颜色，配合 prefers-color-scheme 深色模式，以及 .ios / .md 类进行平台专属样式。平台检测使用 isPlatform('ios' / 'android' / 'hybrid' / 'mobileweb') 做条件渲染。
最佳实践：长列表使用 IonVirtualScroll、IonImg 自动懒加载、图标按钮提供 aria-label、IonContent 默认适配安全区域。
限制：资料未提供版本兼容性、收费与授权、性能基准或具体组件完整属性列表，暂未提供。