Ionic的核心组件是Ionic框架的基础构建块，提供了一套全面的可重用UI元素。这些组件是使用Stencil.js构建的符合标准的Web组件，使其独立于框架，同时为Angular、React和Vue提供专门的集成。本页概述了组件系统，并介绍了Ionic框架中可用的主要组件类别。
有关底层组件系统架构的信息，请参阅组件系统。有关框架集成详细信息，请参阅框架集成。
Ionic的核心组件是使用Stencil.js编译器构建的Web组件，它创建了跨所有现代浏览器工作的标准兼容自定义元素。
来源
每个Ionic组件都遵循一种一致的实现模式，该模式利用了Stencil.js的装饰器和生命周期钩子。
来源
Ionic的核心组件根据其功能和用途分为几个类别。
表单组件处理用户输入和表单交互，为从用户那里收集数据提供了一致的界面。
| 组件 | 描述 | 主要功能 |
|---|---|---|
| ion-input | 文本输入控件 | 标签位置、辅助/错误文本、防抖、清除按钮 |
| ion-select | 下拉列表选择 | 各种界面（警报、弹出框、操作表、模态框） |
| ion-checkbox | 布尔值选择 | 标签位置、不确定状态 |
| ion-radio | 选项选择 | 单选按钮组、自定义对齐 |
| ion-toggle | 开/关切换 | 自定义标签、触觉反馈 |
| ion-range | 滑块控件 | 单/双旋钮、引脚显示、刻度 |
| ion-datetime | 日期/时间选择器 | 日历视图、滚轮选择 |
| ion-searchbar | 搜索输入 | 防抖、清除按钮、取消按钮 |
| ion-textarea | 多行文本输入 | 自动增长、计数器 |
来源
导航组件提供了在应用程序的不同视图和部分之间移动的结构。
| 组件 | 描述 | 主要功能 |
|---|---|---|
| ion-tabs | 基于标签的导航 | 标签自定义、懒加载 |
| ion-nav | 基于堆栈的导航 | 视图过渡、滑动操作 |
| ion-router | 基于URL的路由 | 与框架路由集成 |
| ion-menu | 侧边菜单导航 | 各种类型（覆盖层、揭示、推送） |
| ion-split-pane | 响应式布局 | 基于断点的可见性 |
| ion-segment | 分段控件 | 可滚动分段、分段按钮 |
来源
覆盖层组件显示在主内容上方，向用户呈现额外信息或选项。
| 组件 | 描述 | 主要功能 |
|---|---|---|
| ion-modal | 全屏或半屏覆盖层 | 底部表格视图、断点 |
| ion-popover | 上下文弹出窗口 | 定位、箭头自定义 |
| ion-alert | 系统警报对话框 | 输入、多个按钮 |
| ion-action-sheet | 操作菜单 | 按钮选项、可取消 |
| ion-loading | 加载指示器 | 加载动画自定义、背景 |
| ion-toast | 通知消息 | 位置、按钮、持续时间 |
来源
UI组件提供用于显示内容和处理用户交互的视觉元素。
| 组件 | 描述 | 主要功能 |
|---|---|---|
| ion-button | 按钮控件 | 各种样式（实心、轮廓、透明） |
| ion-card | 内容容器 | 头部、标题、内容区域 |
| ion-list | 列表项容器 | 头部、分隔线、滑动项 |
| ion-item | 列表项 | 详细箭头、线条、插槽 |
| ion-badge | 状态指示器 | 各种颜色、小文本显示 |
| ion-chip | 紧凑型复杂实体 | 可删除、图标、头像 |
| ion-avatar | 圆形图像 | 固定尺寸、一致的样式 |
| ion-icon | SVG图标 | 大型图标库、自定义SVG |
来源
布局组件有助于构建应用程序的界面和组织内容。
| 组件 | 描述 | 主要功能 |
|---|---|---|
| ion-grid | Flexbox网格系统 | 响应式断点 |
| ion-row | 网格行 | 对齐、分布 |
| ion-col | 网格列 | 大小、偏移、推/拉 |
| ion-content | 可滚动容器 | 全屏、滚动事件 |
| ion-header | 固定顶部区域 | 可折叠、淡入效果 |
| ion-footer | 固定底部区域 | 透明背景选项 |
| ion-toolbar | 顶部/底部栏 | 按钮插槽、标题居中 |
| ion-title | 区域标题 | 大标题支持、折叠 |
| ion-accordion | 可折叠区域 | 切换自定义、动画 |
来源
每个组件都公开了具有Props、Events、Methods、CSS Custom Properties和Shadow Parts的一致API结构。
来源
ion-input组件演示了典型的API结构。
color、placeholder、value、disabled等。ionInput、ionChange、ionFocus、ionBlursetFocus()、getInputElement()--background、--color、--padding-top等。container、label、input、helper-text、error-text等。label、start、end来源
Ionic Core Components 旨在通过专门的集成包与多种框架协同工作。
这些框架适配器会将 Ionic 的 Web Components 转换成框架原生的组件。
| 框架 | 集成包 | 实现 | 特性 |
|---|---|---|---|
| Angular | @ionic/angular | 指令、模块 | 值访问器、表单集成 |
| React | @ionic/react | 组件包装器 | React Router 集成、Hooks |
| Vue | @ionic/vue | Vue 组件代理 | Vue Router 集成、v-model 支持 |
来源
Ionic 组件通过 CSS 变量高度可定制，为整个组件库提供了统一的主题方法。
color 属性配合 Ionic 的颜色系统。ios 或 md 模式。自定义输入的示例
来源
Ionic Core Components 包含单元测试和手动测试，以确保功能和平台兼容性。
示例测试文件
来源
Ionic Core Components 提供了一套全面的 UI 元素，构成了 Ionic Framework 的基础。它们使用 Stencil.js 构建为 Web Components，提供了统一的 API、广泛的自定义选项以及适用于 Angular、React 和 Vue 的框架集成。组件分为几类，包括表单控件、导航元素、覆盖层、UI 组件和布局结构，为开发者提供了完整的工具集，用于构建在 iOS 和 Android 上都具有原生感觉的跨平台应用程序。